X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Как сделать шорткоды для WordPress

Приклад
  • 2024-03-28
  • 14320 переглядів

  • Дизайн та розробка сайту

Доброго времени суток. 🙂

Иногда авторам блога нужно подключить тот или иной элемент внутри своих записей. Каждый раз прописывать что-то, что постоянно нужно выводить внутри записи поле определенных абзацев, не вариант. особенно если код большой. С версии WordPress 2.5, разработчики добавили такую прекрасную возможность как шорткоды.

Шорткоды WordPress

Шорткоды - это разный текст, который заключается в квадратные скобки. В WordPress они являются самым эффективным способом вставить внутрь записи определенный текст, блок или другой элемент. Давайте рассмотрим как создать простейшие шорткоды для своего сайта.

Создать свой шорткод очень просто, если вы хоть немного разбираетесь в правилах написания функций для WordPress. Дело в том, что сначала нужно прописать функцию, присвоить ей название и действие, а потом назначить шорткод и привязать его к этой функции. Давайте попробуем создать простейший шорткод, который будет вызывать текст. Даже такой простой код может понадобится, если вам надо внутри записи постоянно вставлять какой-то длинный текст.

Как и со всеми функциями, добавление осуществляется в файл functions.php, в самый его конец, но перед закрывающим тегом ?>. Назовем функцию text_short. Внутри нее добавим нужный текст, который потом выведем вызовом.

function text_short() {
return 'Любой нужный текст. который нужно выводить внутри текста Вашей записи.';
}

Это еще не конец. Это просто функция и ее нужно еще превратить в шорткод. Для этого, сразу после нашей функции, нужно добавить функцию add_shortcode, в которой мы и создадим наш шорткод. Готовая строка будет иметь такой вид:

add_shortcode('ts', 'text_short');

Внутри функции add_shortcode, два названия. ts - это название шорткода, который будем вызывать. Название может быть любым, каким Вы его придумаете. text_short - это название функции, которую мы придумали для вывода текста. Готовый код целиком выглядит следующим образом:

function text_short() {
return 'Любой нужный текст. который нужно выводить внутри текста Вашей записи.';
}
add_shortcode('ts', 'text_short');

Шорткод создан, теперь нужно его вызвать для вывода. Когда будете писать текст записи просто добавьте вот такой вот вызов.

[ts]

Вот так все просто.

  1. Создаем функцию
  2. Делаем ее шорткодом
  3. Вызываем внутри записи

Таким способом можно вывести например рекламу от Google или любую другую, которую Вы хотите вставлять внутрь записей.

function reklama() {
return '
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-ххххххххххххх"
     data-ad-slot="хххххххххххх"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>';
}
 add_shortcode('rek_sh', 'reklama');

И шорткод

 
[rek_sh]

Это легкие шорткоды и суть их проста. Можно создавать и по сложнее. Например сделать шорткод, который будет задавать стили, например для выделения какого-нибудь текста или отдельного слова. Довольно удобная вещь, если постоянно нужно выделять что-то, а стандартного редактора мало.

Создаем шорткод

function gb_bgrnd($attr,$content= null){
return'
<style type="text/css">
.redbg{
	background-color: #f00;
    padding:3px 5px;}
</style>
<span class="redbg">'.$content.'</span>';
}
add_shortcode('gbb_sh', 'gb_bgrnd');

Данный шорткод будет выделять заключенный в него текст. Он будет иметь красный фон. Можете задать свои стили. Чтобы все работало, заключите нужный текст в шорткод, например так:

[gbb_sh]текст что будет выделяться[/gbb_sh]

Можно сделать ссылки в виде кнопок, например для того, чтобы сделать кнопку - Твитнуть. Добавьте код расположенный ниже, изменяя стили под себя, если это нужно.

function gb_twit() {
return '
<style type="text/css">
a.bttn{
background: #00B1F4;
padding: 5px 10px;
font-size: 13px;
font-weight: bold;
color: #fff;
text-align:center;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
a.bttn:hover,a.bttn:active {
background: #f30;
}
</style>
<a class="bttn"title="Поделиться в Твиттере" href="http://twitter.com/home?status=Интересная статья '.get_permalink($post->ID).'">Твитнуть</a>';
}
add_shortcode('twit', 'gb_twit');

Для вызова шорткода нужно просто написать в нужном месте записи:

[twit]

Как вставить шорткод в виджет WordPress

Иногда бывают такие случаи, что шорткод нужно вывести не в тексте записи а в других местах Вашей темы. таким местом может оказаться, например, текстовый виджет. По умолчанию этого сделать нельзя, но добавив фильтр, этот вопрос можно решить. Добавьте в functions.php такую строку:

add_filter('widget_text', 'do_shortcode');

Как вывести шорткод в любом месте темы WordPress

Как и с виджетами, обычным способом это не сделать. Так что нужно применять маленькую хитрость. В нужном месте темы, нужно вставить вот такой код, внутри которого вставлять название шорткода.

<?php echo do_shortcode('[Название шорткода]');?>

Еще встречаются шорткоды немного иного вида от плагинов. Все они выводятся в записи, но вдруг нужно сделать это вне ее. это касается шорткодов типа:

<!--название шорткода-->

У них вид как у закомментированного текста. поэтому стандартные методы не подойдут. Такие шорткоды использует, например, плагин - WpShop. Для вывода таких шорткодов от плагина, нужно использовать такой способ с фильтром:

<?php echo apply_filters('the_content', "<!--название шорткода-->"); ?>

В принципе все, что я хотел показать. Если применить фантазию и определенные навыки, можно сделать нужные Вам шорткоды и вывести там где захотите. Это полезный функционал, который может облегчить Вам работу с блогом WordPress.

Используете ли Вы шорткоды у себя на сайте?

На этом все, спасибо за внимание. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 31, в среднем: 5 из 5
Читайте також