Как создать шорткод в WordPress

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

На практике шорткод – это специальная конструкция, которая заключается в квадратные скобки. Система, встречая где-либо ее, подставляет заданное значение. Шорткоды довольно популярны в темах и плагинах.

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

Шорткод выглядит следующим образом:

[wpschool-gallery]

Как создать шорткод в WordPress?

Инструменты “движка” позволяют не только пользоваться уже существующими шорткодами, но и создавать свои. Для этого необходимо иметь навыки программирования. Размещать всю нашу работу будем в основном конфигурационном файле активной WordPress-темы – functions.php.

Если Вы не знаете, как редактировать functions.php, то в этом случае Вам поможет плагин ProFunctions.

Для примера создадим шорткод, который будет выводить простой текст “Привет, WPSchool!”

Для этого в указанный выше файл следует добавить следующие строки:

function wpschool_text_shortcode() {
    return 'Привет, WPSchool!';
}
add_shortcode('textshortcode', 'wpschool_text_shortcode');

Наш код состоит из 2-х основных конструкций. Блок function wpschool_text_shortcode() является функцией, в которой собственно и происходит вывод необходимого значения шорткода. В нашем случае – это вывод текстовой строки “Привет, WPSchool!”

Директива add_shortcode() является служебной командой, которая создает сам шорткод. Она имеет два параметра. ‘textshortcode’ – это название шорткода, которое будет в итоге заключено в квадратные скобки. Во втором параметре мы указываем имя нашей функции с выводом текста.

В результате мы получим следующий шорткод, готовый к вставке:

[textshortcode]

Добавим его в контентную часть записи или страницы.

В итоге на сайте это будет выглядеть так:

В следующем примере создадим шорткод для вставки изображения с заданным размером.

function wpschool_picture_shortcode( $atts ) {
    extract( shortcode_atts( array(
        'width' => 100,
        'height' => 100,
    ), $atts ) );
    return '<img src="http://wpshop.loc/wp-content/uploads/2018/05/logotype_-150x68.png" width="' .$width .'" height="' .$height .'"/>';
}
add_shortcode( 'picture', 'wpschool_picture_shortcode' );

Наш шорткод теперь содержит параметры функции, а также присутствует аргумент $atts. Для того, чтобы использовать параметры шорткода, нам понадобятся две функции: shortcode_atts() и extract(). Первая является встроенной в ядро WordPress функцией, которая сопоставляет атрибуты шорткода с переданными и присваивает значения по-умолчанию (если это необходимо). extract() – это функция языка PHP, которая создает переменные из значений массива. Наша функция возвращает значение, которое нам необходимо (HTML-разметка нашего изображения с заданными значениями высоты и ширины).

Теперь, когда будет использован шорткод [picture], будет сгенерировано выбранное изображение с размерами 100 на 100. Если необходимо изменить его размеры, то шорткод будет иметь вид:

[picture width="150" height="100"]

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