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

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

Также покажу, как shortcodes правильно вставлять в файлы темы. Обязательно рассмотрим несколько примеров.

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

Шорткоды — это урезанная версия исполняемого кода. Предназначен для удобной реализации исполняемой функции на сайте.

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

[shortcode]

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

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

Вся необходимая информация про шорткоды WordPress

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

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

К примеру, вам нужно отредактировать код на всех этих страницах.

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

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

Если вы не так прописали shortcode WordPress, то никаких ошибок на сайте не появится. Исполняемый код просто не будет задействован.

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

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

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

Что такое шорткоды WordPress и для чего они нужны

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

А если захотите что-то выводить в записях, то делайте это через шорткоды.

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

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

Создаем свои шорткоды в WordPress

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

Как правильно создавать шорткоды в WordPress

Вы и сами замечали, что многие плагины выводят код с помощью специальных шорткодов.

Например, вставка рекламы, различные выделения текста, создание галерей и тому подобное.

Простой вывод без плагина

Чтобы было понятно, как все это работает, давайте создадим свой shortcode без плагина.

По сути, мы подключаем новую функцию. А подключать ее нужно через файл functions.php.

Это файл установленной темы.

Именно через него добавляется основной функционал. От сюда и соответствующее название.

Итак, в этот файл добавляем вот такую функцию:

function reklameasy() {
return'
Исполняемый код
';
}
add_shortcode('reklama', 'reklameasy');

Она состоит из двух частей.

Первое, это название функции и вывод содержимого. В качестве названия я использовал reklameasy. Вы можете придумать свое.

А выводить я буду простую фразу «Исполняемый код». Вам же рекомендую сюда вставить какой-нибудь код для вывода. Например, кнопки или реклама.

Вторая часть состоит из директивы add_shortcode().

В ней мы вписываем название шорткода, который потом заключается в квадратные скобки. У меня это reklama.

Затем указываем название своей функции. У меня это reklameasy.

Все названия прописываем в нижнем регистре!

Вот в принципе, и все!

Функцию мы добавили и привязали к определенному короткому коду.

Теперь идем в редактор статьи. Там в нужном месте прописываем этот шорткод WordPress.

[reklama]

Не забывайте про квадратные скобки!

Когда перейдете в статью и в редакторе добавите [reklama], то в нужном месте у вас будет работать тот скрипт, который вы прописали.

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

Создание таких элементов кода очень полезно при оптимизации сайта.

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

К примеру, нужно вывести блок рекламы только в определенных статьях и местах.

Можно автоматом вывести в определенных статьях рекламу. Но вывести ее красиво, и чтобы в разных местах – это затруднительно.

Да! Можно задать, чтобы выводилось только после определенного количества абзацев или предложений. Однако, не всегда такое подходит. Частенько объявление может просто по смыслу не вписываться в тему.

Реклама куда лучше будет работать, когда вы ее вписываете вручную и по смыслу. Вот как-раз в таких случаях и проставляйте вручную WP shortcode.

Как использовать shortcodes wordpress на своем сайте

Главное вначале вручную проставить их в нужных местах!

Потом если нужно будет поменять рекламу, то сделать вы это сможете в самой функции.

То есть вам не нужно заходить в каждую статью и править ее. Достаточно просто зайти в файл 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».

Плагин Shortcoder для создания шорткодов в WordPress

В поле «Content» вставляем исполняемый код. Например, вывод рекламы.

Чуть выше прописываем название латинскими буквами. Жмем на «Create Shortcode».

Затем переходим в визуальный редактор.

Там вы увидите новую кнопку для удобной вставки шорткода. Отмечаете курсор в нужном месте записи и нажимаете на эту кнопку.

Кнопка в редакторе для простой вставки шорткодов в Вордпресс
Кнопка плагина Shortcoder в визуальном редакторе

Во всплывающем окне выбираем подходящий вариант короткого кода и нажимаем на «Insert Shortcode».

Выбор шорткода для вставки в плагине Shortcoder
Выбираем подходящий короткий код

Выбираем подходящий короткий код

Плагин очень полезен. Особенно для новичков.

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

Как правильно вставить шорткод в тему 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 файлы темы.

Как вставить шорткоды wordPress в php файлы темы

Иногда и такое необходимо.

К примеру, вам нужно вывести шорткод во всех статьях.

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

Однако проблема в том, что shortcode WordPress – это не php код. Его так просто в файл темы не добавишь. А если так сделать, то это будет уже неизвестный и неправильный код. Он потом повлечет за собой ошибки в работе сайта.

Поэтому, чтобы этого избежать, свой шорткод нужно обрамлять в специальный php-контейнер:

<?php echo do_shortcode('[reklama]');?>

Короткий код [reklama] заменяем на свой. Только так система поймет исполняемый код и без ошибок запустит его в действие.

На этом у меня все!

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

Обязательно используйте их на своем проекте.

Сказать спасибо кнопками ниже:
Сергей Азаров

Увлекаюсь созданием и продвижением сайтов в интернете. Интересует SEO оптимизация и контент-маркетинг. Немного занимаюсь SMM и Email рассылкой. Также люблю читать интересные материалы по веб-аналитике и заработку в интернете.

Шорткоды Вордпресс - отзывы

  1. квезаль

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

    А в статье чисто якоришь на этот контейнер путем шорткода. Я правильно поняла?норм идея.

    Ответить
    1. Сергей Азаров автор

      Да, в принципе, так и работает.

      Ответить
      1. квезаль

        Как ты с этой темы убирал читать далее? Саму эту функцию, чтоб автоматом не отправляло под кат?или ты просто убрал кнопку и заменил на что-то?

        Я хочу вообще ,чтоб в редакторе вручную я ставила далее в нужном мне месте.

        Ответить
        1. Сергей Азаров автор

          Удалил саму функцию. В теме заходишь в папку inc и открываешь файл html-blocks.php. Там в самом верху удалил такую функцию:

          
          /**
           *
           * @since  1.1.7
           *
           */
          if ( ! function_exists( 'basic_the_more_link' ) ):
          	function basic_the_more_link() {
          
          		do_action( 'basic_before_more_link' );
          		?>
          		<p class="more-link-box">
          			<a class="more-link" href="<?php the_permalink() ?>#more-<?php the_ID(); ?>" title="<?php the_title_attribute(); ?>"><?php _e( 'Read more', 'basic' ); ?></a>
          		</p>
          		<?php
          		do_action( 'basic_after_more_link' );
          
          	}
          endif;
          add_action( 'basic_after_post_excerpt', 'basic_the_more_link' );

          По поводу анонса записей, то лучше заполнять поле Отрывок, а не ставить тег more (читать далее) прямо в тексте. Это полезно для продвижения сайта. Так у тебя текст не дублируется. Для статьи можно написать один текст, а для ленты анонсов и подписчиков по RSS другой более привлекательный.))

          Ответить
Adblock
detector