Если вы разрабатываете сайт WordPress для клиента, то, скорее всего, у вас есть шорткоды, которые могут использовать ваши клиенты. Проблема в том, что многие новички не знают, как добавлять шорткоды, а если при этом используются сложные параметры, то это еще сложнее. Shortcake предлагает решение, добавляя пользовательский интерфейс для шорткодов. В этой статье мы покажем вам, как добавить пользовательский интерфейс для шорткодов в WordPress с помощью Shortcake.
Что такое Shortcake?
WordPress предлагает более простой способ добавления исполняемого кода внутри постов и страниц с помощью шорткодов. Многие темы и плагины WordPress позволяют пользователям добавлять дополнительную функциональность с помощью шорткодов. Однако иногда эти шорткоды могут стать сложными, когда пользователю необходимо ввести параметры для настройки.
Например, в типичной теме WordPress, если есть шорткод для ввода кнопки, то пользователю, вероятно, потребуется добавить по меньшей мере от двух до пяти параметров. Например:
[themebutton url=»http://example.com» title=»Download Now» color=»purple» target=»newwindow»]
Shortcake — это плагин WordPress и предлагаемая будущая функция WordPress. Он призван решить эту проблему, предоставляя пользовательский интерфейс для ввода этих значений. Это значительно упростит использование шорткодов.
Начало работы
Этот учебник предназначен для пользователей, которые только начинают разрабатывать WordPress. Начинающим пользователям, которые любят настраивать свои темы WordPress, также будет полезен этот учебник.
Сказав это, давайте начнем.
Первое, что вам нужно сделать, это установить и активировать плагин Shortcake (Shortcode UI).
Теперь вам понадобится шорткод, который принимает несколько параметров пользовательского ввода. Если вам нужно немного освежить информацию, вот как добавить шорткод в WordPress.
В данном руководстве мы будем использовать простой шорткод, который позволяет пользователям вставлять кнопку в посты или страницы WordPress. Вот пример кода для нашего шорткода, который вы можете использовать, добавив его в файл функций вашей темы или в плагин для конкретного сайта.
Вам также потребуется добавить несколько CSS для стиля вашей кнопки. Вы можете использовать этот CSS в таблице стилей вашей темы.
.cta-button
Вот как пользователь будет использовать шорткод в своих постах и страницах:
[cta-button title=»Download Now» url=»http://example.com»]
Теперь, когда у нас есть шорткод, принимающий параметры, давайте создадим для него пользовательский интерфейс.
Регистрация пользовательского интерфейса вашего шорткода в Shortcake
Shortcake API позволяет вам зарегистрировать пользовательский интерфейс вашего шорткода. Вам необходимо описать, какие атрибуты принимает ваш шорткод, типы полей ввода и какие типы постов будут отображать пользовательский интерфейс шорткода.
Вот пример фрагмента кода, который мы будем использовать для регистрации пользовательского интерфейса нашего шорткода. Мы постарались объяснить каждый шаг с помощью встроенных комментариев. Вы можете вставить это в файл функций вашей темы или в плагин для конкретного сайта.
shortcode_ui_register_for_shortcode( /** Ручка вашего шорткода */ 'cta-button', /** Метка и иконка вашего шорткода */ array( /** Метка для пользовательского интерфейса вашего шорткода. Эта часть является обязательной. */ 'label' => 'Add Button', /** Иконка или изображение для шорткода. Дополнительно. src или dashicons-$icon. */ 'listItemImage' => 'dashicons-lightbulb', /** Атрибуты шорткода */ 'attrs' => array( /** * Каждый атрибут, принимающий пользовательский ввод, будет иметь свой собственный массив, определенный следующим образом * Наш шорткод принимает два параметра или атрибута, title и URL * Сначала определим пользовательский интерфейс для поля title. */ array( /** Эта метка будет отображаться в пользовательском интерфейсе */ 'label' => 'Title', /** Это фактический атрибут, используемый в коде шорткода */ 'attr' => 'title', /** Определите тип ввода. Поддерживаемые типы: текст, чекбокс, textarea, radio, select, email, url, число и дата. */ 'type' => 'text', /** Добавить полезное описание для пользователей 'description' => 'Пожалуйста, введите текст кнопки', ), /** Теперь мы определим UI для поля URL */ array( 'label' => 'URL', 'attr' => 'url', 'type' => 'text', 'description' => 'Full URL', ), ), ), /** Вы можете выбрать, какие типы постов будут показывать UI шорткода */ 'post_type' => array( 'post', 'page' ), ));
Вот и все, теперь вы можете увидеть пользовательский интерфейс шорткода в действии, отредактировав пост. Просто нажмите на кнопку Добавить медиа над редактором поста. Это вызовет загрузчик медиафайлов, где вы заметите новый пункт «Вставить элемент поста» в левой колонке. Щелкнув по нему, вы увидите кнопку для вставки кода.
Щелкнув по миниатюре, содержащей значок лампочки и ярлык вашего шорткода, вы увидите пользовательский интерфейс шорткода.
Добавление шорткода с несколькими входами
В первом примере мы использовали очень простой шорткод. Теперь давайте сделаем его немного сложнее и намного полезнее. Давайте добавим шорткод, который позволяет пользователям выбирать цвет кнопки.
Сначала мы добавим шорткод. Это почти тот же шорткод, за исключением того, что теперь для цвета используется пользовательский ввод.
Так как наш шорткод будет отображать кнопки разных цветов, нам нужно будет обновить и CSS. Вы можете использовать этот CSS в таблице стилей вашей темы.
.mybutton < padding: 10px; font-size: 18px; border: 1px solid #FFF; border-radius: 7px; color: #FFF; >.синяя кнопка < background-color: #50A7EC; >.оранжевая кнопка < background-color:#FF7B00; >.зеленая кнопка
Вот как будут выглядеть кнопки:
Теперь, когда наш шорткод готов, следующим шагом будет регистрация шорткода UI. Мы будем использовать практически тот же код, за исключением того, что на этот раз у нас есть еще один параметр для цвета, и мы предлагаем пользователям выбрать синюю, оранжевую или зеленую кнопку.
shortcode_ui_register_for_shortcode( /** Ручка вашего шорткода */ 'mybutton', /** Ярлык и иконка вашего шорткода */ array( /** Ярлык для пользовательского интерфейса вашего шорткода. Эта часть обязательна. */ 'label' => 'Добавить цветную кнопку', /** Иконка или вложение изображения для шорткода. Дополнительно. src или dashicons-$icon. */ 'listItemImage' => 'dashicons-flag', /** Атрибуты шорткода */ 'attrs' => array( /** * Каждый атрибут, принимающий пользовательский ввод, будет иметь свой собственный массив, определенный следующим образом * Наш шорткод принимает два параметра или атрибута, title и URL * Давайте сначала определим пользовательский интерфейс для поля title. */ array( /** Эта метка будет отображаться в пользовательском интерфейсе */ 'label' => 'Title', /** Это фактический attr, используемый в коде шорткода */ 'attr' => 'title', /** Определяем тип ввода. Поддерживаемые типы: текст, чекбокс, textarea, radio, select, email, url, число и дата. */ 'type' => 'text', /** Добавьте полезное описание для пользователей */ 'description' => 'Пожалуйста, введите текст кнопки', ), /** Теперь мы определим UI для поля URL */ array( 'label' => 'URL', 'attr' => 'url', 'type' => 'text', 'description' => 'Полный URL', ), /** Наконец, мы определим UI для выбора цвета */ array( 'label' => 'Color', 'attr' => 'color', /** Мы будем использовать поле select вместо текста */ 'type' => 'select', 'options' => array( 'blue' => 'Blue', 'orange' => 'Orange', 'green' => 'Green', ), ), ), /** Вы можете выбрать, какие типы постов будут показывать UI шорткода */ 'post_type' => array( 'post', 'page' ), ));
Вот и все, теперь вы можете редактировать пост или страницу и нажать на кнопку Добавить медиа. Вы заметите недавно добавленный шорткод в разделе «Вставка элементов поста.
Нажав на только что созданный шорткод, вы откроете пользовательский интерфейс шорткода, где вы можете просто ввести значения.
Вы можете загрузить код, используемый в этом руководстве, в виде плагина.
Мы включили CSS, так что вы можете использовать его для изучения или для добавления собственных кнопок призыва к действию в WordPress с помощью более простого пользовательского интерфейса. Не стесняйтесь изменять исходный текст и играть с ним.
Надеемся, что эта статья помогла вам узнать, как добавить пользовательский интерфейс для шорткодов в WordPress с помощью Shortcake. Возможно, вы также захотите взглянуть на эти 7 важных советов по использованию шорткодов в WordPress.
Источник: www.wpbeginner.com