В этом материале вы узнаете, что такое шорткоды WordPress. Как создавать и подключать их вывод в сайдбарах и описаниях рубрик.
Также покажу, как shortcodes правильно вставлять в файлы темы. Обязательно рассмотрим несколько примеров.
Что такое шорткоды WordPress
Выглядит она примерно так:
[shortcode]Для чего вообще, это нужно?
Во-первых, такой вариант значительно упрощает вставку громоздкого кода. Гораздо легче задавать короткие коды на страницах, чем прописывать громоздкие скрипты.
Также это полезно при дальнейшем редактировании кода.
Вы создаете функцию и прикрепляете нужный код к определенному шорткоду. Далее такие шорткоды проставляете на страницах в нужных местах.
К примеру, вам нужно отредактировать код на всех этих страницах.
В таком случае, не нужно редактировать каждую запись. Достаточно просто изменить код в самой функции, где создавали шорткод.
Это намного удобнее и экономит время. Да и к тому же безопаснее.
А вот если неправильно добавить сам код на страницу, то появятся ошибки. Сайт не будет работать должным образом.
Ну и во-вторых, по умолчанию, исполнение скриптов WordPress прямо в статьях запрещено. Это сделано для безопасности сайта.
То есть, если кто-то у вас в комментариях что-нибудь пропишет, то это не будет работать. Код не вступит в силу.
Конечно же, можно снять запрет на исполнение кода в статьях. Но я рекомендую это делать только в крайних случаях.
А если захотите что-то выводить в записях, то делайте это через шорткоды.
Либо добавляйте код непосредственно в файлы установленной темы. Например, вывод рекламы вначале всех статей.
Также можно подключать и дополнительные плагины для вставки кода в статьях.
Создаем свои шорткоды в WordPress
Как я говорил ранее, это урезанная версия исполняемого кода. Такие версии можно создавать самому и выводить в любых местах сайта.
Вы и сами замечали, что многие плагины выводят код с помощью специальных шорткодов.
Например, вставка рекламы, различные выделения текста, создание галерей и тому подобное.
Простой вывод без плагина
Чтобы было понятно, как все это работает, давайте создадим свой shortcode без плагина.
По сути, мы подключаем новую функцию. А подключать ее нужно через файл functions.php.
Это файл установленной темы.
Именно через него добавляется основной функционал. От сюда и соответствующее название.
Итак, в этот файл добавляем вот такую функцию:
function reklameasy() {
return'
Исполняемый код
';
}
add_shortcode('reklama', 'reklameasy');Она состоит из двух частей.
Первое, это название функции и вывод содержимого. В качестве названия я использовал reklameasy. Вы можете придумать свое.
А выводить я буду простую фразу «Исполняемый код». Вам же рекомендую сюда вставить какой-нибудь код для вывода. Например, кнопки или реклама.
Вторая часть состоит из директивы add_shortcode().
В ней мы вписываем название шорткода, который потом заключается в квадратные скобки. У меня это reklama.
Затем указываем название своей функции. У меня это reklameasy.
Вот в принципе, и все!
Функцию мы добавили и привязали к определенному короткому коду.
Теперь идем в редактор статьи. Там в нужном месте прописываем этот шорткод WordPress.
[reklama]Не забывайте про квадратные скобки!
Когда перейдете в статью и в редакторе добавите [reklama], то в нужном месте у вас будет работать тот скрипт, который вы прописали.
Как видите, не нужно постоянно добавлять громоздкий код и боятся ошибок при копировании. Достаточно поставить в нужных местах небольшой шорткод и дело сделано.
Создание таких элементов кода очень полезно при оптимизации сайта.
Вам не нужно дополнительно устанавливать плагины WordPress. Вы просто создаете новый функционал и в дальнейшем обрамляете его в такие метки.
К примеру, нужно вывести блок рекламы только в определенных статьях и местах.
Можно автоматом вывести в определенных статьях рекламу. Но вывести ее красиво, и чтобы в разных местах – это затруднительно.
Реклама куда лучше будет работать, когда вы ее вписываете вручную и по смыслу. Вот как-раз в таких случаях и проставляйте вручную WP shortcode.
Главное вначале вручную проставить их в нужных местах!
Потом если нужно будет поменять рекламу, то сделать вы это сможете в самой функции.
То есть вам не нужно заходить в каждую статью и править ее. Достаточно просто зайти в файл functions.php и заменить исполняемый код.
Помимо рекламы можно выводить и другие элементы на сайте.
Например, подписку на e-mail рассылку и ссылки. А также кнопки, текстовые или графические предложения.
Shortcode WordPress с параметрами
Давайте усложним пример и в shortcode WordPress добавим свои параметры. Они пригодятся если нужно выводить один и тот же элемент, но немного в измененном виде.
К примеру, мне нужно вывести одну и ту же ссылку с разными анкорами.
Чтобы не создавать под каждый анкор новый шорткод, мы просто при вставке зададим свои параметры.
function true_url_external( $atts ) {
$params = shortcode_atts( array(
'anchor' => 'Название анкора',
'url' => 'https://alpha-byte.ru/sozdanie-sajta',
), $atts );
return '
<a href='{$params['url']}' target='_blank'>{$params['anchor']}</a>
';
}
add_shortcode( 'trueurl', 'true_url_external' );В параметрах anchor и url прописываем свои значения.
В качестве исполняемого кода будет такая строка:
<a href='{$params['url']}' target='_blank'>{$params['anchor']}</a>Здесь потом будут выводиться наши параметры. Также я указал открытие ссылки в новой вкладке.
Далее можете указать свое название функции и шорткода.
Теперь при вставке ссылки с другими параметрами не нужно создавать новый wp шорткод. Достаточно в редакторе вставить такой же короткий код, но со своими параметрами.
Вот как нужно вставить шорткод в страницу WordPress:
[trueurl anchor="Заходи на мой сайт!" url="https://alpha-byte.ru"]Можно выводить и без своих параметров. Вот так:
[trueurl]Тогда будут использованы те параметры по умолчанию, что были указаны в функции.
Для разных размеров изображений можно использовать такой пример.
function logo_shortcode( $atts ) {
extract( shortcode_atts( array(
'width' => 100,
'height' => 100,
), $atts ) );
return '
<img src="https://alpha-byte.ru/wp-content/uploads/2018/05/logotype.png" width="' .$width .'" height="' .$height .'"/>
';
}
add_shortcode( 'logo', 'logo_shortcode' );В параметрах width и height задаем высоту и ширину картинки. У меня, это 100 px.
В качестве исполняемого кода прописываем такую строку, но уже со своим изображением:
<img src="https://alpha-byte.ru/wp-content/uploads/2018/05/logotype.png" width="' .$width .'" height="' .$height .'"/>Теперь, если нужно поменять размер картинки в определенных записях, то в шорткоде задаем свои параметры. Например:
[logo width="150" height="100"]Создаем двойной шорткод WordPress
Сейчас покажу, как создавать открывающий и закрывающий шорткод WordPress.
Это очень полезно при стилизации определенных элементов. Например, чтобы выделить текст и вставить его между двумя шорткодами.
function true_url_external( $atts, $shortcode_content = null ) {
$params = shortcode_atts( array(
'anchor' => 'Название анкора'
), $atts );
return '
<a href='" . do_shortcode($shortcode_content) . "' target='_blank'>{$params['anchor']}</a>
';
}
add_shortcode( 'trueurl', 'true_url_external' );Теперь в редакторе вставляем такой код со своим урлом ссылки:
[trueurl anchor="текст ссылки"]URL ссылки[/trueurl]Также можно вставить внутри дополнительный шорткод:
[trueurl anchor="текст ссылки"][logo][/trueurl]Если нужно выделить текст и задать определенный стиль, то можно использовать такой вариант:
function text_background($attr,$content= null){
return'
<style type="text/css">
.yellow_background{
border: 1px solid #d2d2d2;
background-color: #FFFF80;
padding:10px;
margin: 5px 10px;
}
</style>
<div class="yellow_background">'.$content.'</div>
';
}
add_shortcode('witext', 'text_background');Тогда в редакторе выделенный фрагмент обрамляем двумя шорткодами. Получится так:
[witext]Участок текста[/witext]Но я рекомендую подключать CSS отдельным файлом. Поэтому в примере лучше использовать так:
function text_background($attr,$content= null){
return'
<div class="yellow_background">'.$content.'</div>
';
}
add_shortcode('witext', 'text_background');Плагин для создания шорткодов в WordPress
Есть специальный плагин для создания шорткодов WordPress. Называется Shortcoder.
Он пригодится тем, кто не хочет вручную возиться с созданием пользовательских кодов.
Устанавливаете это расширение с бесплатного каталога Вордпресс. Переходите в меню «Настройки» —> «Shortcoder».
В поле «Content» вставляем исполняемый код. Например, вывод рекламы.
Чуть выше прописываем название латинскими буквами. Жмем на «Create Shortcode».
Затем переходим в визуальный редактор.
Там вы увидите новую кнопку для удобной вставки шорткода. Отмечаете курсор в нужном месте записи и нажимаете на эту кнопку.
Во всплывающем окне выбираем подходящий вариант короткого кода и нажимаем на «Insert Shortcode».
Выбираем подходящий короткий код
Плагин очень полезен. Особенно для новичков.
В нем есть еще и дополнительные опции. Например, можно выводить разные коды как для декстопных, так и для мобильных устройств.
Как правильно вставить шорткод в тему WordPress
Для начала начнем со вставки в сайдбар и описании таксономий.
Это очень важные функции.
К примеру, это очень хорошо поможет вам при оптимизации рубрик на сайте.
Можно вывести определенные элементы и оформить описание более красиво и читабельно.
Итак, чтобы включить такую поддержку в описании таксономий, в файл functions.php нужно добавить такой код:
add_filter( 'term_description', 'shortcode_unautop');
add_filter( 'term_description', 'do_shortcode' );Также я рекомендую добавить поддержку и в сайдбарах. Это тоже очень важные места на мой взгляд.
Чтобы это сделать, в файл functions.php добавляем следующий код:
add_filter('widget_text', 'do_shortcode');При желании можно прикрутить поддержку коротких кодов в комментариях:
add_filter( 'comment_text', 'do_shortcode' );Для использования в анонсах постов, вставьте такую строку:
add_filter( 'the_excerpt', 'do_shortcode');Теперь давайте рассмотрим, как можно добавить шорткоды WordPress в php файлы темы.
Иногда и такое необходимо.
К примеру, вам нужно вывести шорткод во всех статьях.
Вместо того, чтобы вручную насиловать каждую запись, просто добавляем этот фрагмент в файл single.php темы.
Поэтому, чтобы этого избежать, свой шорткод нужно обрамлять в специальный php-контейнер:
<?php echo do_shortcode('[reklama]');?>Короткий код [reklama] заменяем на свой. Только так система поймет исполняемый код и без ошибок запустит его в действие.
На этом у меня все!
Теперь вы знаете, что такое шорткоды в WordPress и для чего они нужны. Также мы рассмотрели разные варианты их создания и вставки на сайт.
Обязательно используйте их на своем проекте.
Добавить комментарий