Шорткоды в WordPress – создание, их использование и назначение

В этой статье я планирую собрать всю актуальную информацию по использованию шорткодов в Вордпресс – процесс создания, дополнительные параметры, хаки и т.п. Однако наполнять заметку буду постепенно (по мере изучения новой инфы). Сегодня рассмотрю вставку произвольного простого HTML-кода на страницу с помощью данного механизма. Также советую глянуть подборку лучших плагинов шорткодов в WordPress на данный момент – вполне вероятно, что искомая вами функциональность уже реализована там.

Что это и зачем нужно?

Вообще шорткод – это некая конструкция (заключенная в квадратные скобки), которую можно добавлять в текст постов/страниц и которая при просмотре вебсайта (т.е. во фронтенде) выполняет определенную функцию.

Самый простой пример – обычная галерея WP для статьи – в админке пишете [gallery], а на сайте увидите группу фотографий. Либо можете внедрить свой элемент [adsense], подставляющий ваш код Google Adsense прямо посреди контента.

То есть при создании шаблонов/модулей разработчики могут с помощью директивы add_shortcode определять некие шорткоды, которые позже обычный пользователь будет вставлять в текст. При этом редактору контента не требуется разбираться в программировании, HTML и др., а только выбрать нужную функцию и указать для нее параметры (если они есть).

В CMS допускается 3 типа данных конструкций:

• [primer] – базовый вариант;
• [primer id=’555′] – с использованием параметров;
• [primer] текст [/primer] – с текстом внутри.

Создание нового шорткода в WordPress

Изначально у меня стояла задача добавить посреди страницы «псевдораспорку» clearfix. Теоретически, существует сразу несколько вариантов ее решения:

• Можно было переключиться в HTML режим, но это бы мешало дальнейшему комфортному редактированию.
• Установить плагин добавления виджета на страницу Amr Shortcode Any Widget? – ради 1-2 строк кода решение слишком громоздкое.
• Новый редактор Gutenberg, кстати, содержит нужный мне элемент, но для того конкретного сайта пришлось его отключить.

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

function clearfix_block( $atts ) {
	 return '<div class="clearfix"></div>';
}
add_shortcode('clearfix', 'clearfix_block');

Здесь в последней строке вы присваиваете конкретному имени шорткода специальную функцию, определенную ранее. Теперь при вставке конструкции [clearfix] система будет вызывать функцию clearfix_block(), которая через return возвращает обычный HTML код (в моем случае).

Если вам требуется передавать параметры, дополнительно используем shortcode_atts() – она позволяет не просто задать ряд допустимых переменных, но и указать для них значения по умолчанию. Например:

function mynew_shortcode( $atts ) {
	$myparams = shortcode_atts( array( 
		'class' => 'first', 
		'id' => 'second', 
	), $atts );
	return "<div class='{$myparams['class']}' id='{$myparams['id']}'></div>";
}
add_shortcode( 'add-mydiv', 'mynew_shortcode' );

После добавления в текст страницы шорткодов:

[add-mydiv class="qwe1" id="asd2"]
[add-mydiv]

Получим следующий результат:

<div class="qwe1" id="asd2"></div>
<div class="first" id="second"></div>

Надеюсь, логику работы вы уловили. Если будут какие-то вопросы по теме – пишем, добавлю ответы в пост.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 23, средний балл: 3,96 из 7)

Загрузка...

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