settings.php: 3.0.2 vs 3.0.0 · Taboola

← All changes | settings.php +91 -20 3.0.0 → 3.0.2 View file →

		@@ -237,11 +237,27 @@
237	237	<label>Placement Name:</label>
238	238	<input class="widefat" type="text" name="mid_placement[]" value="<?php echo esc_attr($widget->placement ?? ''); ?>" placeholder="Mid Article Thumbnails" />
239	239	</div>
240	240	</div>
	241	+ <div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label>
	242	+ <div class='tooltip'>
	243	+ <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
	244	+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
	245	+ <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
	246	+ </g>
	247	+ </svg>
	248	+ <div>The widget will be placed <i>just beneath</i> this element.<br><br>
	249	+ To target an element, 2 pieces of information are needed:<br><br>
	250	+ i) A CSS selector - e.g. <i>p</i> (for paragraph).<br>
	251	+ ii) An occurrence - e.g. 1st, 2nd, 3rd, etc.<br><br>
	252	+ For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center</a>.
	253	+ </div>
	254	+ </div>
	255	+ </div>
	256	+
241	257	<div style="display: flex; flex-wrap: wrap; margin-top: 10px;">
242	258	<div style="flex: 1; min-width: 200px; padding-right: 10px;">
243		- <label>Position below:</label>
	259	+ <label>Position:</label>
244	260	<select class="widefat mid-widget-type-selector" name="mid_paragraph_ui_mode[]">
245	261	<option value="Paragraph" <?php echo !isset($widget->location_string) \|\| $widget->location_string === 'p' ? 'selected' : ''; ?>>Paragraph</option>
246	262	<option value="Other" <?php echo isset($widget->location_string) && $widget->location_string !== 'p' ? 'selected' : ''; ?>>Other (Custom)</option>
247	263	</select>
		@@ -285,30 +301,44 @@
285	301	onclick="setEnabledDisabled('#category_widget', this)"
286	302	name="category_enabled"/>
287	303	<span class="slider round"></span>
288	304	</label>
289		- <b style="font-size:15px;">Category (Section Page)</b>
290		- <div class='tooltip'>
291		- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
292		- viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
293		- <g fill="none" fill-rule="evenodd">
294		- <path fill="currentColor"
295		- d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
296		- </g>
297		- </svg>
298		- <div>Settings will be applied to all Category/Section archive pages on your site.</div>
299		-</div>
	305	+ <b style="font-size:15px;float: left;">Category (Section Page)</b>
	306	+ <div class='tooltip'>
	307	+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
	308	+ <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
	309	+ </g>
	310	+ </svg>
	311	+ <div>Settings will be applied to all 'Category/Section' pages on your site.</div>
	312	+ </div>
	313	+ </div>
300	314
301		- </div>
302		-
303	315	<div class="label_below">
	316	+
304	317	<div class="mode_style">
305		- <label id="category_widget_id_label" style="float:left;">Mode (Widget ID):</label>
306		- </div>
307		- <div class="placement_style">
308		- <label id="category_placement_label" style="float:left;">Placement Name:</label>
309		- </div>
310		- </div>
	318	+ <label id="category_widget_id_label" style="float:left;">Mode (Widget ID):</label>
	319	+ <div class='tooltip'>
	320	+ <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
	321	+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
	322	+ <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
	323	+ </g>
	324	+ </svg>
	325	+ <div>Your <i>category</i> Mode (Widget ID), as provided by Taboola.</div>
	326	+ </div>
	327	+ </div>
	328	+
	329	+ <div class="placement_style"><label id="category_placement_label" style="float:left;">Placement Name:</label>
	330	+ <div class='tooltip'>
	331	+ <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
	332	+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
	333	+ <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
	334	+ </g>
	335	+ </svg>
	336	+ <div>Your <i>category</i> Placement Name, as provided by Taboola.</div>
	337	+ </div>
	338	+ </div>
	339	+ </div>
	340	+
311	341
312	342	<div class="input_below">
313	343	<div class="widget_below">
314	344	<input id="category_widget_id" type="text"
		@@ -321,14 +351,55 @@
321	351	name="category_placement" placeholder="Placement Name"/>
322	352	</div>
323	353	</div>
324	354
	355	+ <div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label>
	356	+ <div class='tooltip'>
	357	+ <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
	358	+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
	359	+ <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
	360	+ </g>
	361	+ </svg>
	362	+ <div>The widget will be placed <i>just beneath</i> this element.<br><br>
	363	+ To target an element, 2 pieces of information are needed:<br><br>
	364	+ i) A CSS selector - e.g. <i>p</i> (for paragraph).<br>
	365	+ ii) An occurrence - e.g. 1st, 2nd, 3rd, etc.<br><br>
	366	+ For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center</a>.
	367	+ </div>
	368	+ </div>
	369	+ </div>
	370	+
325	371	<div class="home_occurrence">
326	372	<div class="mode_style_home_selector">
327	373	<label id="category_location_string_label" style="float:left;">CSS selector :</label>
	374	+ <div class='tooltip'>
	375	+ <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
	376	+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
	377	+ <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
	378	+ </g>
	379	+ </svg>
	380	+ <div>
	381	+ The element to target - e.g.:<br><br>
	382	+ <i>section</i> - to target a <i>section</i>.<br>
	383	+ <i>#my-id</i> - to target an <i>ID</i> of "my-id".<br>
	384	+ <i>.my-class</i> - to target a <i>class</i> of "my-class".
	385	+ </div>
	386	+ </div>
	387	+
328	388	</div>
329	389	<div class="placement_style_home_occurrence">
330	390	<label id="category_occurrence_label" style="float:left;">Occurrence :</label>
	391	+ <div class='tooltip'>
	392	+ <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
	393	+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
	394	+ <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
	395	+ </g>
	396	+ </svg>
	397	+ <div>For a <b>non-unique</b> selector - e.g. <i>section</i> - fill in the <b>occurrence</b> to target.<br><br>
	398	+ E.g. To target the <b>2nd</b> section, fill in <i>2</i>. <br><br>
	399	+ For a <b>unique</b> selector - e.g. <i>#my-id</i> - leave the default value of '1'.</div>
	400	+ </div>
	401	+
331	402	</div>
332	403	</div>
333	404
334	405	<div class="home_placement">