Что такое шорткоды?
Шорткоды — это удобный метод, который реализует WordPress, который предоставляет способ генерировать динамические и часто сложные функции из очень небольшого ввода.
В то время как разработчики часто создают функциональные возможности для предоставления дополнительных функций для веб-сайта; они выполняются путем вызова кода PHP. Однако пользователи часто не являются разработчиками, поэтому не рекомендуется напрямую взаимодействовать с PHP. Решение этой проблемы — для разработчиков создавать собственные шорткоды.
Шорткоды предоставляют пользователю уровень динамического контента, позволяя им создавать мощные функции на своем веб-сайте, используя псевдокод, который действует подобно макросам. При вызове шорткод принимает свои аргументы (если есть), а затем запускает функцию, которая определяет, какие пользовательские функции будут выполняться.
Например, у вас может быть основной шорткод, который обернут вокруг ваших ссылок, чтобы создать красивую кнопку: [pretty_button] Read More! [/pretty_button] [pretty_button] Read More! [/pretty_button]
Кто создает шорткоды?
Шорткоды должны быть зарегистрированы на вашем сайте, чтобы их можно было использовать. Есть несколько способов, которыми шорткоды могут быть добавлены на ваш сайт, вот несколько распространенных методов.
Добавил сам WordPress
WordPress на самом деле поставляется с серией уже определенных шорткодов. Эти шорткоды обычно используются для галерей, подписей, аудио и видео элементов и в основном относятся к медиа-части WordPress.
Например, вы можете отобразить встроенный видеоплеер на своей странице. Используя шорткод видео следующим образом
Есть несколько шорткодов, которые описаны на странице кодекса WordPress.
Встроенный в тему
Многие разработчики тем предоставят серию шорткодов, которые вы можете использовать для добавления множества дополнительных функций на ваш сайт. Эти шорткоды могут создавать интерактивные элементы, отображать контент визуально ошеломляющими способами или быть очень информативными.
Приобретая темы или используя популярные бесплатные темы, разработчик часто размещает на своем веб-сайте страницу с кратким описанием включенных в них шорткодов (вместе с тем, как их использовать и примерами). Кроме того, тема может даже включать кнопку шорткода в редакторе контента (которая позволяет простой способ вставить ваш шорткод)
Тем не менее, тема также может вообще не иметь лишних шорткодов.
Поставляется с плагином
Большинство плагинов, которые предлагают какой-либо контент (например, формы, ползунки, интерактивные элементы), поставляются с шорткодом, который либо настраивается для каждого конкретного случая (вы добавляете опции внутри шорткода на нужной странице), либо настраивается глобально. (например, внутри темы меню плагинов).
Эти шорткоды плагинов часто хорошо документированы на веб-сайте разработчиков или в хранилище плагинов для WordPress, что дает вам мгновенное представление о том, что именно вы можете делать с вашим шорткодом.
Например, вы можете захотеть показать свою корзину товаров на веб-сайте с поддержкой WooCommerce, вы можете сделать это, используя их [woocommerce_cart] корзины [woocommerce_cart] . Эти шорткоды указаны на их документированной странице.
Типы шорткодов
Теперь, когда вы знаете, что такое шорткоды и как их можно добавить на ваш сайт, мы можем обсудить два разных типа шорткодов и их различия.
Не вложенные шорткоды
Не вложенные шорткоды — это шорткоды, которые не содержат и не содержат другой контент. Эти шорткоды существуют как единая замкнутая единица.
Например, если вы хотите отобразить галерею в своем сообщении, вы должны использовать шорткод . Этот шорткод будет выполнен и отобразит галерею, которая будет выведена на страницу.
Посмотрите, как шорткод существует как единое целое, это не закрытый шорткод. Эти типы шорткодов похожи на самозакрывающиеся элементы HTML (например, тег <br/> ).
Закрытые шорткоды
Закрытые шорткоды — это шорткоды, которые содержат другие элементы или контент. Эти шорткоды выглядят аналогично множеству коротких кодов, но они будут иметь начальный и конечный элементы.
Например, скажем, что вы хотели, чтобы какой-то текст на вашей странице выделялся. Вы можете определить шорткод, который берет его обернутый контент и применяет установленный стиль (например, делает его более жирным или большим).
[big_and_bold] определенный как [big_and_bold] применительно к контенту, может выглядеть примерно так [big_and_bold] This is big and bold [/big_and_bold]
Обратите внимание, как у нас есть начальный тег и конечный тег? Весь контент между ними будет передан в шорткод и каким-то образом обработан.
В целом, когда вы имеете дело с короткими кодами, вы будете иметь дело с одним из этих двух типов.
Создание собственных шорткодов
Создание шорткодов для использования в WordPress довольно просто. Он включает функцию обратного вызова, которая определяет, что будет делать add_shortcode($name,$callback_function) и использование функции add_shortcode($name,$callback_function) которая регистрирует шорткод для использования.
Чтобы зарегистрировать свои собственные шорткоды, вам нужно будет поместить их в ваш файл functions.php внутри вашей дочерней темы (или, если у вас есть другой файл, имеющий доступ к PHP, вы также можете использовать это).
Не забудьте никогда не редактировать родительскую тему напрямую!
Определение функции обратного вызова шорткодов
Функциональность, которую выполняет шорткод, определяется внутри функции обратного вызова.
Функция обратного вызова возвращает значение, и это значение является тем, что отображается конечному пользователю при создании его страницы / публикации. Это возвращаемое значение может быть просто значением, помещенным в контейнер для стилизации, или может быть таким же сложным, как вывод динамического элемента формы или ползунка.
Структура функции обратного вызова в ее простейшем смысле — это просто функция, которая возвращает значение:
//defines the callback function used for our shortcode (does nothing) function my_shortcode_callback_function(){ return; }
Аргументы шорткодов в функции обратного вызова
В то время как шорткоды просто нуждаются в функции обратного вызова для работы; шорткоды могут принимать аргументы (параметры), которые можно использовать для динамического изменения функционирования шорткода.
В функцию, которая отображает шорткод, можно передать три основных аргумента. Эти переменные являются необязательными, но часто используются. Этими переменными являются $atts , $content и $name ; они вызываются последовательно в функции обратного вызова как таковые:
//defines the callback function used for our shortcode (does nothing). Takes in three arguments function my_shortcode_callback_function($atts, $content, $name){ return; }
$ atts (варианты)
Переменная $atts — это ассоциативный массив опций или настроек, к которым вы хотите, чтобы у вашего шорткода был доступ.
Шорткоды часто предоставляют пользователю серию настроек, которые они могут передать в шорткод, чтобы дать им возможность изменять вывод.
Например, рассмотрим встроенный аудио шорткод ,
Этот шорткод (начиная с WordPress 3.6) дает пользователю возможность встроить аудиоплеер HTML5 на страницу.
По умолчанию вы можете использовать шорткод как есть. Однако вы также можете настроить его параметры, передав такие аргументы , как , Это позволяет настроить предварительную загрузку звука при загрузке страницы, а также автоматически запускать звук (и по окончании воспроизведения звук будет зацикливаться). Эти параметры наряду с другими можно настроить, передав значения.
Давайте рассмотрим базовый пример, где нам нужен короткий код, который принимает опцию и выводит контент условно на основе его выбора:
//based on the passed in profession, return a statement //Shortcodes functions and information function display_my_profession_callback($atts,$content,$tag){ //collect values, combining passed in values and defaults $values = shortcode_atts(array( 'profession_type' => 'other' ),$atts); //based on input determine what to return $output = ''; if($values['profession_type'] == 'developer'){ $output = 'You are an amazing developer!'; } else if($values['profession_type'] == 'designer'){ $output = 'You are an epic designer!'; } else if($values['profession_type'] == 'other'){ $output = 'You are a great person'; } else{ $output = 'I am not sure what you are'; } return $output; } add_shortcode('display_profession','display_my_profession_callback');
Первое, что вы увидите, это то, что мы вызвали функцию с именем shortcode_atts() . Эта функция используется для возврата ассоциативного массива значений для использования. Эта функция принимает переменную $atts а также определяет хорошие параметры по умолчанию, которые вы можете использовать (это избавляет от необходимости объединять массивы и самостоятельно управлять данными).
В нашем примере $values будет иметь доступ к одному значению по имени profession_type , однако, если мы определим больше значений по умолчанию, мы также сможем получить к ним доступ.
Значение по умолчанию для profession_type - other . Это значение можно переопределить в самом шорткоде, просто указав значение, например [display_profession type='designer']
Как только мы определим значение для profession_type мы отформатируем строку и вернем ее для отображения конечному пользователю.
$ content (содержание)
Переменная $content используется для enclosed shortcodes и это значение представляет любой контент, который существует между открывающим и закрывающим тегом шорткода.
Например, если у вас есть [small_text] This text will be small [/small_text] который делает выделенный текст очень маленьким, например [small_text] This text will be small [/small_text] . Значение $content будет «Этот текст будет маленьким». Эта переменная предоставляет шорткод доступ к содержимому, и именно так шорткоды напрямую применяют стили и функциональность к выбранным областям.
Давайте рассмотрим пример кодирования, чтобы проиллюстрировать это.
Мы можем создать шорткод, который будет обернут вокруг содержимого и отформатирует его с помощью тега span:
//take the wrapped around content of the shortcode and style it function wrap_content_shortcode_callback($atts, $content, $tag){ $output = '<span style="font-size: 120%;">' . $content . '</span>'; return $output; } add_shortcode('wrap_shortcode','wrap_content_shortcode_callback');
Возвращенный контент будет оформлен по-другому, обернутый в промежуток.
Что касается примечания, если вы создаете шорткоды, в которых используется переменная $content , вы также можете использовать do_shortcode($content) . Эта функция берет содержимое и запускает любые другие шорткоды внутри него. Если вы не включите это и поместите шорткод в другой шорткод, внутренний шорткод будет просто отображать текст вместо преобразования.
$ tag (короткое имя)
Переменная $tag содержит имя самого шорткода. Это часто используется для коротких кодов, которые используют одну и ту же функцию обратного вызова.
Когда вы определяете несколько шорткодов и используете одну и ту же функцию для обработки всех из них, вы можете использовать переменную $tag чтобы определить, какой шорткод вызывается.
Давайте посмотрим на практический пример, где одна функция обратного вызова используется для двух шорткодов:
//this callback function performs many actions depending on which shortcode ($tag) calls it function display_my_shortcode($atts, $content, $tag){ //if called from the 'my_primary_shortcode' shortcode if($tag == 'my_primary_shortcode'){ return 'This is the primary shortcode'; } //if called from the 'my_secondary_shortcode' shortcode else if($tag == 'my_secondary_shortcode'){ return 'This is the secondary shortcode'; } //default else{ return 'This is something else'; } } add_shortcode('my_primary_shortcode','display_my_shortcode'); add_shortcode('my_secondary_shortcode','display_my_shortcode');
В зависимости от того, какой [my_primary_shortcode] вы вызываете (либо [my_primary_shortcode] либо [my_secondary_shortcode] содержимое будет отличаться.
Регистрация шорткода с помощью функции add_shortcode ()
Чтобы зарегистрировать шорткод, все, что вам нужно сделать, это вызвать add_shortcode($name, $callback_name) .
Эта функция принимает два параметра; имя шорткода (имя, которое будет использоваться в редакторе) и имя функции обратного вызова, которая возвращает вывод (который выполняет фактическую обработку)
В качестве примера рассмотрим следующее:
//callback function for the 'clear_content' shortcode function clear_content_callback_function($atts, $content, $tag){ return '<div style="clear: both; float: left">' . $content '</div>'; } //add the new 'clear_content' shortcode add_shortcode('clear_content','clear_content_callback_function');
Само название шорткода должно быть в нижнем регистре и содержать только цифры и подчеркивания.
Уже давно существуют проблемы с использованием дефисов в шорткодах, поэтому я бы просто определил ваши шорткоды без них, но вы можете это сделать, если вы чувствуете себя в авантюре.
В заключение
Теперь, когда у вас есть полное понимание того, как работают шорткоды и как их можно использовать для предоставления расширяемым возможностям не-разработчикам, вы можете создавать свои собственные шорткоды и реально расширять свои будущие веб-сайты WordPress.