Июн
21
0

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

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

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

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

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

Шорткоды в WordPress

То есть при создании шаблонов/модулей разработчики могут с помощью директивы 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>

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 23, средний балл: 3,96 из 7)
Загрузка...

категория Категории: Возможности; Начинающим;
теги Теги: , , , , , .
Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости