Полное руководство по шорткодам WordPress

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

Что это означает с переходом к редактору блоков для большинства старых плагинов и веб-сайтов, которые все еще полны шорткодов? Будут ли шорткоды WordPress работать? Есть ли способ легко перейти от использования шорткодов WordPress к блокам WordPress?

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

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

Шорткод WordPress - это многократно используемый динамический фрагмент кода, заключенный в [скобки] . Шорткоды позволяют легко вставлять определенные функции самого WordPress или плагина или темы в любую запись, страницу, пользовательский тип сообщения или виджет. Думайте о шорткодах WordPress как о «ярлыках» или как о макросах на вашем веб-сайте.

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

Формат шорткода

Когда дело доходит до вставки шорткодов, основной формат [скобки] может быть «расширен» несколькими способами, что позволяет настраивать или добавлять дополнительную информацию о настройках, называемую атрибутами . Кроме того, ярлыки могут переносить текст (или HTML) или даже быть вложенными в другой короткий код.

Например, шорткод может иметь следующие форматы:

[shortcode]

[shortcode]Some text[/shortcode]

[shortcode]<a href="http://mysite.com/">HTML content</a>[/shortcode]

[shortcode]Some text [another-shotcode] more text [/shortcode]

[shortcode icon="icon: star" background="#eeeeee" color="#F73F43" text_color="#F73F43" size="32" shape_size="16" radius="256" text_size="16" url="#" target="self" margin="0"] This is a custom icon [/shortcode]

Атрибуты шорткода

Шорткоды также гибки, потому что они могут быть расширены с помощью атрибутов . С атрибутами шорткоды предлагают дополнительную настройку, просто добавляя дополнительные фрагменты кода в шорткод.

Плагины и темы предлагают дополнительные руководства и рубрики, чтобы помочь пользователям использовать правильные фрагменты шорткода для добавления или удаления определенных элементов в выводе.

Вот несколько примеров шорткодов с атрибутами.

[[gallery id="123" size="medium"]]

[recent-posts posts="5"]

[recent-posts posts="5"]Posts Heading[/recent-posts]

Встроенные шорткоды WordPress

WordPress поставляется с несколькими встроенными шорткодами для рендеринга определенных типов контента.

[[audio]]

Шорткод аудио позволяет вставлять аудиофайлы и воспроизводить их.

[[caption]]

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

[[gallery]]

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

[[embed]]

Шорткод для встраивания позволяет обернуть встроенные элементы максимальной (но не фиксированной) шириной и высотой.

[[playlist]]

Шорткод плейлиста реализует функциональность отображения коллекции аудио- или видеофайлов WordPress в записи.

[[video]]

Шорткод видео позволяет вставлять видеофайлы и воспроизводить их.

Шорткоды плагинов и тем

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

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

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

Пользовательские шорткоды

Большинство опытных разработчиков предпочитают создавать свои собственные шорткоды, существенно сокращая время, необходимое для написания повторяющегося кода. Для создания файла custom-shortcodes.php требуется всего лишь простой дополнительный файл в каталоге файлов . Если вы хотите изучить множество пользовательских шорткодов, вот руководство по созданию пользовательских шорткодов.

API шорткода WordPress

Для разработчиков, создающих свои собственные шорткоды, WordPress Shortcode API предоставляет простой набор функций для создания шорткодов WordPress для использования в сообщениях и на страницах.

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

Разработчики могут ознакомиться с документацией WordPress Shortcode API, чтобы узнать больше о:

• Обработка атрибутов
• Выход
• Закрытые и самозакрывающиеся шорткоды
• Справочник по функциям
• Ограничения
• Формальный синтаксис

Шорткоды в классическом редакторе

Раньше шорткоды вставлялись в классический редактор любой публикации или страницы, например:

Что такое блоки WordPress?

Сначала были шорткоды ... но затем пришло блочное редактирование. С появлением WordPress 5.0 появилась реализация давно запланированного редактора Гутенберга или редактора блоков WordPress в качестве главной страницы и редактора сообщений для WordPress, заменив классический текстовый редактор WordPress, который существовал уже много лет.

Взгляните на редактор контента до WordPress 5.5 (ах, это были времена!)

Редактор Gutenberg был впервые анонсирован в предыдущих версиях WordPress, но оставался необязательным до WordPress 5.0, когда он стал редактором по умолчанию.

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

Но с редактором блоков WordPress появились блоки WordPress. Исчезли параметры форматирования вверху, напоминающие текстовые редакторы, такие как Microsoft Word. Вместо этого параметры форматирования были заменены параметрами правой боковой панели с вкладками для каждого блока.

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

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

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

Редактор блоков стал проще, быстрее и удобнее. Кроме того, разработчики тем и плагинов также создают свои собственные блоки, которые добавляют дополнительные параметры блоков к блокам WordPress по умолчанию.

Многоразовые блоки против шорткодов

Старый способ сохранить набор предопределенных выходных данных в классическом редакторе WordPress заключался в создании собственных коротких кодов. Теперь этот метод заменен многоразовыми блоками .

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

Например, если вы добавляете блок кнопок и стилизуете его с определенным цветом, эффектами наведения и т. Д., Вы не захотите продолжать делать это на каждой странице, на которую добавляете эту кнопку. Если вы измените его на блок многократного использования, кнопка сохраняется на вашем сайте WordPress и становится отдельным блоком, который вы можете использовать на других страницах или в сообщениях.

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

Групповые блоки

В WordPress 5.3 также появились групповые блоки и шаблоны.

По сути, вам дается возможность группировать определенные блоки вместе и перемещать или обновлять их все вместе. В конечном итоге это привело к появлению блочных шаблонов. Шаблоны блоков упростили редактирование содержимого, поскольку пользователи предпочли бы выбрать шаблон и обновить содержимое, а не начинать с пустого холста.

Параметры стиля блока

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

С помощью редактора блоков у вас есть возможность обновить стиль каждого блока индивидуально, чтобы выделиться или сделать их более заметными.

Блоки и полное редактирование сайта

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

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

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

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

Забегая вперед, разработчики плагинов и тем должны будут использовать другой подход при разработке своего программного обеспечения, чтобы адаптироваться к новому полному редактированию сайта и созданию страниц редактора блоков WordPress. Хотя полное применение этого все еще на горизонте, это положительное изменение, которое мы, скорее всего, увидим раньше, чем позже.

Новый блок шорткода

До редактора блоков шорткоды вставлялись непосредственно в страницу или редактор страниц. Теперь редактор блоков WordPress включает новый блок шорткода .

Блок шорткода позволяет легко продолжать использовать унаследованные шорткоды в сообщении или на странице и поддерживает целостность вывода шорткода.

Блок шорткода можно добавить на страницу или в публикацию, нажав кнопку «Добавить блок». Кроме того, вы можете ввести / шорткод и нажать ввод.

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

Что означает редактор блоков для шорткодов WordPress?

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

1. Редактор блоков WordPress в корне меняет потребность и назначение коротких кодов для большинства плагинов и тем. В блочной системе редактирования каждый «элемент» на странице имеет свой собственный блок, а не содержится в одном редактируемом редакторе WYSIWYG.

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

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

Например, возьмем плагин Gravity Forms. До редактора блоков процесс вставки формы в сообщение или страницу был другим. В классическом редакторе вам нужно было использовать кнопку, чтобы вставить форму в ваш контент.

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

Теперь плагин Gravity Forms предлагает блок встраивания блоков форм . В редакторе блоков выберите блок Forms.

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

3. Разработчикам тем и плагинов нужно будет определиться с будущими реализациями своих шорткодов и преобразованием своих шорткодов в блоки. Как упоминалось выше, сотни тем, плагинов и разработчиков по-прежнему используют шорткоды на своих веб-сайтах и ​​в приложениях. Принятие блока может быть медленным, но по мере того, как пользователи ближе знакомятся с новым редактором блоков, пользователи, скорее всего, запросят вариант блокировки.

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

4. Шорткоды никуда не денутся в ближайшее время. Вероятно, поэтому редактор блоков WordPress предлагает блок шорткода, чтобы помочь поддерживать использование шорткода. Поскольку шорткоды широко использовались и реализовывались до WordPress 5.0 и редактора блоков, важно, чтобы будущие версии WordPress по-прежнему поддерживали шорткоды.

5. Шорткоды можно преобразовать в блок . У вас есть любимая тема или плагин, использующий шорткоды? Вполне вероятно, что в какой-то момент эти шорткоды будут преобразованы в блок. Если вы разработчик плагина или темы или создаете веб-сайты WordPress и используете шорткоды в настраиваемой теме, можно переосмыслить шорткоды как блоки.

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

Как конвертировать короткие коды WordPress в блоки WordPress

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

Следуйте первым шагам из этого руководства по пользовательскому шорткоду.

Возьмите этот базовый пример из Caldera Forms:

 <?php /** * Handler for [cl_post_title] shortcode * * @param $atts * * @return string */ function caldera_learn_basic_blocks_post_title_shortcode_handler($atts) { $atts = shortcode_atts([ 'id' => 0, 'heading' => 'h3', ], $atts, 'cl_post_title'); return caldera_learn_basic_blocks_post_title($atts[ 'id' ], $atts[ 'heading' ]); } /** * Output the post title wrapped in a heading * * @param int $post_id The post ID * @param string $heading Allows : h2,h3,h4 only * * @return string */ function caldera_learn_basic_blocks_post_title($post_id, $heading) { if (!in_array($heading, ['h2', 'h3', 'h4'])) { $heading = 'h2'; } $title = get_the_title(absint($post_id)); return "<$heading>$title</$heading>"; } /** * Register Shortcode */ add_shortcode('cl_post_title', 'caldera_learn_basic_blocks_post_title_shortcode_handler');

Этот код принимает идентификатор сообщения и уровень заголовка (h2, h3, he) и выводит заголовок сообщения в формате HTML для заголовка.

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

Дополнительные ресурсы по созданию блоков WordPress

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

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

Вердикт для шорткодов WordPress

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

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

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

Кристен Райт

Кристен пишет учебные пособия, чтобы помочь пользователям WordPress с 2011 года. Обычно вы можете увидеть, что она работает над новыми статьями для блога iThemes или разрабатывает ресурсы для #WPprosper. Вне работы Кристен любит вести дневник (она написала две книги!), Ходить в походы и кемпинги, готовить и ежедневные приключения с семьей, надеясь жить более настоящей жизнью.