Шорткоды в WordPress — правильное создание и вставка

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

Что такое шорткоды WordPress

Выглядит она примерно так:

[shortcode]

Для чего вообще, это нужно?

Во-первых, такой вариант значительно упрощает вставку громоздкого кода. Гораздо легче задавать короткие коды на страницах, чем прописывать громоздкие скрипты.

Также это полезно при дальнейшем редактировании кода.

Вы создаете функцию и прикрепляете нужный код к определенному шорткоду. Далее такие шорткоды проставляете на страницах в нужных местах.

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

Это намного удобнее и экономит время. Да и к тому же безопаснее.

А вот если неправильно добавить сам код на страницу, то появятся ошибки. Сайт не будет работать должным образом.

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

То есть, если кто-то у вас в комментариях что-нибудь пропишет, то это не будет работать. Код не вступит в силу.

Конечно же, можно снять запрет на исполнение кода в статьях. Но я рекомендую это делать только в крайних случаях.

А если захотите что-то выводить в записях, то делайте это через шорткоды. Либо добавляйте код непосредственно в файлы установленной темы. Например, вывод рекламы вначале всех статей.

Также можно подключать и дополнительные плагины для вставки кода в статьях.

Создаем шорткоды в 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="/wp-content/uploads/2018/05/logotype.png" width="' .$width .'" height="' .$height .'"/>
';
}
add_shortcode( 'logo', 'logo_shortcode' );

В параметрах width и height задаем высоту и ширину картинки. У меня, это 100 px.

В качестве исполняемого кода прописываем такую строку, но уже со своим изображением:

<img src="/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

Теперь поговорим о том, как правильно вставить шорткод в тему 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 и для чего они нужны. Также мы рассмотрели разные варианты их создания и вставки на сайт. Обязательно используйте их на своем проекте. В общем, изучайте и внедряйте!