Привет!

Предположим, вам нужно вставлять в несколько статей один и тот же кусок контента. Это может быть просто текст или текст с изображением, или таблица. Неважно. В общем, некий фрагмент контента.

Задача усложняется, когда таких статей больше, чем 2.

И ещё больше усложняется, когда по ходу приходится вносить правку в этот фрагмент. А потом редактировать все статьи, где этот фрагмент присутствует.

А что если таких статьей +10? Или +100 (как у меня) ?

Вот решение этой задачи

На примере.

Имеется блог www.fitosauna.ru/blog

В конце НЕКОТОРЫХ статей я размещаю тематические призывы к действию (call to action (СТА )).

Вот внутри этого CTA есть таблица с преимуществами для клиента (УТП — уникальное торговое предложение).

Таких статей +100 и следовательно таблиц с УТП столько же.

Недавно потребовалось сделать правки в таблице УТП, так как она криво смотрелась на мобильных устройствах.

Вот так было:

Код был такой:

<table border="0" width="100%">

<tbody>

<tr>

<td><a href="http://vimeo.com/246044087?width=560&amp;height=315" rel="wp-video-lightbox"><img class="aligncenter" title="Кедровые фитобочки и ик-сауны премиум-класса" src=" /blog/htdocs/blog/wp-content/uploads/2016/10/Premium_kachestvo_square.png" alt="Кедровые фитобочки и ик-сауны премиум-класса" width="100" height="150" /></a></td>

<td><a href="/blog/htdocs/blog/wp-content/uploads/2016/10/Bez-predoplatyi.jpg" rel="wp-video-lightbox"><img class="aligncenter" title="Купить без предоплаты кедровую фитобочку и инфракрасную сауну" src=" /blog/htdocs/blog/wp-content/uploads/2016/10/Bez_predoplaty_square.png" alt="Купить без предоплаты кедровую фитобочку и инфракрасную сауну" width="100" height="150" /></a></td>

<td><a href="http://vimeo.com/246043941?width=560&amp;height=315" rel="wp-video-lightbox"><img class="aligncenter" title="Тройная гарантия на кедровые фитобочки и ик-сауны" src=" /blog/htdocs/blog/wp-content/uploads/2016/10/Troynaya_garantiya_square.png" alt="Тройная гарантия на кедровые фитобочки и ик-сауны" width="100" height="150" /></a></td>

<td><a href="/blog/htdocs/blog/wp-content/uploads/2016/10/Soberem-i-ustanovim.jpg" rel="wp-video-lightbox"><img class="aligncenter" title="Соберем и установим кедровую фитобочку и инфракрасную сауну" src=" /blog/htdocs/blog/wp-content/uploads/2016/10/soberem_square.png" alt="Соберем и установим кедровую фитобочку и инфракрасную сауну" width="100" height="150" /></a></td>

</tr>

</tbody>

</table>

Добавил в первую строку кода атрибут class="adaptirovano"

<table class="adaptirovano" border="0" width="100%">

<tbody>

<tr>

<td><a href="http://vimeo.com/246044087?width=560&amp;height=315" rel="wp-video-lightbox"><img class="aligncenter" title="Кедровые фитобочки и ик-сауны премиум-класса" src=" /blog/htdocs/blog/wp-content/uploads/2016/10/Premium_kachestvo_square.png" alt="Кедровые фитобочки и ик-сауны премиум-класса" width="100" height="150" /></a></td>

<td><a href="/blog/htdocs/blog/wp-content/uploads/2016/10/Bez-predoplatyi.jpg" rel="wp-video-lightbox"><img class="aligncenter" title="Купить без предоплаты кедровую фитобочку и инфракрасную сауну" src=" /blog/htdocs/blog/wp-content/uploads/2016/10/Bez_predoplaty_square.png" alt="Купить без предоплаты кедровую фитобочку и инфракрасную сауну" width="100" height="150" /></a></td>

<td><a href="http://vimeo.com/246043941?width=560&amp;height=315" rel="wp-video-lightbox"><img class="aligncenter" title="Тройная гарантия на кедровые фитобочки и ик-сауны" src=" /blog/htdocs/blog/wp-content/uploads/2016/10/Troynaya_garantiya_square.png" alt="Тройная гарантия на кедровые фитобочки и ик-сауны" width="100" height="150" /></a></td>

<td><a href="/blog/htdocs/blog/wp-content/uploads/2016/10/Soberem-i-ustanovim.jpg" rel="wp-video-lightbox"><img class="aligncenter" title="Соберем и установим кедровую фитобочку и инфракрасную сауну" src=" /blog/htdocs/blog/wp-content/uploads/2016/10/soberem_square.png" alt="Соберем и установим кедровую фитобочку и инфракрасную сауну" width="100" height="150" /></a></td>

</tr>

</tbody>

</table>

А в style.css дочерней темы добавил код

table.adaptirovano,
	table.adaptirovano tbody,
	table.adaptirovano tr,
	table.adaptirovano td
	{display: block}
	table.adaptirovano td
	{width: 50%;
	float: left;
	margin: -1px;
background: #fff;
	}

Стало:

Совсем другое дело.

Теперь в файл functions.php дочерней темы вставляю код:

//Шорткод таблицы УТПшек
function text_short() {
return '

<table class="adaptirovano" border="0" width="100%">

<tbody>

<tr>

<td><a href="http://vimeo.com/246044087?width=560&amp;height=315" rel="wp-video-lightbox"><img class="aligncenter" title="Кедровые фитобочки и ик-сауны премиум-класса" src=" /blog/htdocs/blog/wp-content/uploads/2016/10/Premium_kachestvo_square.png" alt="Кедровые фитобочки и ик-сауны премиум-класса" width="100" height="150" /></a></td>

<td><a href="/blog/htdocs/blog/wp-content/uploads/2016/10/Bez-predoplatyi.jpg" rel="wp-video-lightbox"><img class="aligncenter" title="Купить без предоплаты кедровую фитобочку и инфракрасную сауну" src=" /blog/htdocs/blog/wp-content/uploads/2016/10/Bez_predoplaty_square.png" alt="Купить без предоплаты кедровую фитобочку и инфракрасную сауну" width="100" height="150" /></a></td>

<td><a href="http://vimeo.com/246043941?width=560&amp;height=315" rel="wp-video-lightbox"><img class="aligncenter" title="Тройная гарантия на кедровые фитобочки и ик-сауны" src=" /blog/htdocs/blog/wp-content/uploads/2016/10/Troynaya_garantiya_square.png" alt="Тройная гарантия на кедровые фитобочки и ик-сауны" width="100" height="150" /></a></td>

<td><a href="/blog/htdocs/blog/wp-content/uploads/2016/10/Soberem-i-ustanovim.jpg" rel="wp-video-lightbox"><img class="aligncenter" title="Соберем и установим кедровую фитобочку и инфракрасную сауну" src=" /blog/htdocs/blog/wp-content/uploads/2016/10/soberem_square.png" alt="Соберем и установим кедровую фитобочку и инфракрасную сауну" width="100" height="150" /></a></td>

</tr>

</tbody>

</table>
';
}
add_shortcode('utp', 'text_short');
//Конец шорткода таблицы УТПшек

Всё. Теперь, когда мне нужно поставить в статью УТП-табличку, просто вставляю в нужное место в теле статьи код [utp]

А если мне нужно внести изменения в таблицу, то я делаю это только в одном месте — в файле functions.php (в родительской теме).

Автоматически во всех статьях вид УТП-таблицы изменится. Не нужно будет руками вносить правки в +100 статьях.

P.S. Хотите получать уведомления о новых статьях этого блога? Нажмите на эту кнопку -

Хочу сразу узнавать о новых публикациях!