Статьи

Как создать собственные шорткоды WordPress для ваших редакторов

Октябрь 13, 2018

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

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

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

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

Шорткоды WordPress идеально подходят для таких ситуаций. Шорткод позволяет автору использовать фрагменты текста, такие как [mywidget]

Где создавать шорткоды

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

 include('shortcodes.php');

Ваш первый шорткод «Hello World»

Определение шорткода состоит из:

  1. функция, которая возвращает строку кода HTML, и
  2. вызов add_shortcode() которая связывает определение текста шорткода с этой функцией.

Самый простой пример: 

 <?php
// "Hello World" shortcode
function shortcode_HelloWorld() {
  return '<p>Hello World!</p>';
}
add_shortcode('helloworld', 'shortcode_HelloWorld');

(Вы можете опустить строку <?php

Сохраните файл, затем введите [helloworld] Посетите эту страницу, и вы увидите, что она была заменена абзацем «Hello World!».

Параметры шорткода

Короткие коды могут иметь дополнительные параметры, например 

 [sitemap title='Web pages', depth=3]

Параметры передаются как массив функции шорткода в качестве первого аргумента. Полный код для генерации карты сайта с иерархией страниц: 

 // sitemap shortcode
function shortcode_GenerateSitemap($params = array()) {

  // default parameters
  extract(shortcode_atts(array(
    'title' => 'Site map',
    'id'    => 'sitemap',
    'depth' => 2
  ), $params));

  // create sitemap
  $sitemap = wp_list_pages("title_li=&depth=$depth&sort_column=menu_order&echo=0");
  if ($sitemap) {
    $sitemap =
      ($title ? "<h2>$title</h2>" : '') .
      '<ul' . ($id? '' : " id="$id"") . ">$sitemap</ul>";
  }

  return $sitemap;
}
add_shortcode('sitemap', 'shortcode_GenerateSitemap');

Функция shortcode_atts() назначает значения по умолчанию параметрам при необходимости. Затем PHP extract() преобразует каждое значение массива в реальные переменные $title$id$depth

(Примечание: array(...)[...]

Добавьте [sitemap][sitemap depth=5]

Вложенные короткие коды BBCode

BBCode (код доски объявлений) — это легкий формат разметки, который, как и стандартные шорткоды, использует [квадратные скобки] для обозначения команд. Это позволяет шорткодам содержать текстовое содержимое или быть вложенными друг в друга.

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

 <blockquote>
  <p>Everything we do is amazing!</p>
  <p><a href="/contact-us/" class="cta button main">Call us today</a></p>
</blockquote>

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

 [quote]
  Everything we do is amazing!
  [cta type='main']Call us today[/cta]
[/quote]

Содержимое между тегами передается функции шорткода в качестве второго аргумента. Мы можем создать две функции шорткодов: 

 // [quote] shortcode
function shortcode_Quote($params = array(), $content) {

  // default parameters
  extract(shortcode_atts(array(
    'type' => ''
  ), $params));

  // create quote
  return
    '<blockquote' .
    ($type ? " class=\"$type\"" : '') .
    '>' .
    do_shortcode($content) .
    '</blockquote>';
}
add_shortcode('quote', 'shortcode_Quote');


// [cta] shortcode
function shortcode_CallToAction($params = array(), $content) {

  // default parameters
  extract(shortcode_atts(array(
    'href' => '/contact-us/',
    'type' => ''
  ), $params));

  // create link in button style
  return
    '<a class="cta button' .
    ($type ? " $type" : '') .
    '">' .
    do_shortcode($content) .
    '</a>';
}
add_shortcode('cta', 'shortcode_CallToAction');

Обратите внимание на использование функции do_shortcode($content) которая применяет дополнительные шорткоды к контенту, когда они существуют.

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

Если вы ищете место для размещения своего сайта WordPress после того, как все ваши шорткоды уже определены, взгляните на нашего партнера SiteGround . Они предлагают управляемый хостинг WordPress с установкой в ​​один клик, промежуточными средами, интерфейсом WP-CLI, предустановленным Git, автообновлениями и многим другим!

34
Share: