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

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

Что такое песочное печенье?

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

Например, в базовой теме WordPress, если есть шорткод для вставки кнопки, то пользователю, вероятно, потребуется заполнить около пяти параметров шорткода следующим образом:

[url button = "http://example.com" title = "Подробнее" color = "purple" target = "newwindow"]

Здесь на помощь приходит Shortcake, поскольку он позволяет лучше управлять своими короткими кодами.

песочная-пекарня-плагин

первые шаги

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

Что вам нужно сделать в первую очередь, это установить и активировать расширение. Shortcace (Сокращенный МЕ).

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

add_shortcode ('cta-button', 'cta_button_shortcode'); функция cta_button_shortcode ($ atts) {extract (shortcode_atts (array ('title' => 'Title', 'url' => ''), $ atts)); вернуться ' '. $ title. ' '; }

Возможно, вам также понадобится CSS-код для кнопки.

.cta кнопки {обивка: 10px; Размер шрифта: 18px; границы: твердый 1px #FFF; границы радиус: 7px; цвет: #FFF; цвет фона: #50A7EC; }

Вот как отобразить соответствующую кнопку, пользователь должен ввести следующий шорткод:

[cta-button title = »Загрузить сейчас» url = »http://example.com»]

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

Как зарегистрировать интерфейс шорткод с ShortCacke

API Shortcake позволяет регистрировать короткие коды в пользовательском интерфейсе. Тебе следуетзапись какие атрибуты принимает шорткод, тип полей и какой формат записи будет отображать пользовательский интерфейс (пользовательский интерфейс).

Вот пример фрагмента кода, который можно использовать для регистрации шорткода в пользовательском интерфейсе Shortcake.

shortcode_ui_register_for_shortcode (/ ** Ваш шорткод * / 'cta-button', / ** Метка вашего шорткода и его значок * / array (/ ** Метка обязательна. * / 'label' => 'Добавить кнопку', / ** Icone. Src или dashicons- $ icon. * / 'ListItemImage' => 'dashicons-lightbulb', / ** Атрибуты шорткода * / 'attrs' => array (/ ** * Все поля, которые будут принимать значения у пользователей будет свой собственный массив, определенный следующим образом. * Этот шорткод принимает два параметра: URL и заголовок * Мы определим пользовательский интерфейс для заголовка. * / array (/ ** Эта метка будет отображаться в пользовательском интерфейсе * / 'label' => 'Title', / ** это атрибут, используемый для шорткода * / 'attr' => 'title', / ** Определить тип поля, поддерживаются: текст , флажок, текстовое поле, радио, выбор, электронная почта, URL, номер и дата. * / 'type' => 'text', / ** Добавить описание 'description' => 'Description',), / ** Мы давайте теперь определим пользовательский интерфейс для поля ссылки * / array ('label' => 'URL', 'attr' => 'url', 'type' = > 'text', 'description' => 'Full URL',),),), / ** Формат сообщения, в котором отображается пользовательский интерфейс * / 'post_type' => array ('post', 'page' ),));

Это все, что вам нужно сделать, чтобы отобразить шорткод в пользовательском интерфейсе. Теперь вы можете начать редактирование статьи, чтобы иметь возможность использовать шорткод. Все, что вам нужно сделать, это нажать кнопку добавления мультимедиа. Вы увидите новый раздел под названием " Вставка элемента Post". Нажав на нее, вы увидите различные созданные вами шорткоды.

insertpostelement

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

shortcodeui

Как добавить шорткод с несколькими полями

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

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

add_shortcode ('mybutton', 'my_button_shortcode'); function my_button_shortcode ($ atts) {extract (shortcode_atts (array ('color' => 'blue', 'title' => 'Заголовок', 'url' => ''), $ atts)); вернуться ' '. $ title. ' '; }

Поскольку наш шорткод отображает кнопки разных цветов, нам также необходимо обновить наш CSS-код.

.mybutton {обивка: 10px; Размер шрифта: 18px; границы: твердый 1px #FFF; границы радиус: 7px; цвет: #FFF; } .blue кнопки {фонового цвета: #50A7EC; } .orange кнопки {фонового цвета: #FF7B00; } .green кнопки {фонового цвета: #29B577; }

Вот как будет выглядеть эта кнопка.

красочная-кнопка-шорткод

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

shortcode_ui_register_for_shortcode (/ ** Ваш дескриптор шорткода * / 'mybutton', / ** Метка и значок вашего шорткода * / array (/ ** Метка для пользовательского интерфейса шорткода. Эта часть обязательна. * / 'label' => 'Добавить красочная кнопка ', / ** значок или вложение изображения для шорткода. Необязательно. src или dashicons- $ icon. * /' listItemImage '=>' dashicons-flag ', / ** Атрибуты шорткода * /' attrs '=> array (/ ** * Каждый атрибут, принимающий ввод данных пользователем, будет иметь свой собственный массив, определенный следующим образом * Наш шорткод принимает два параметра или атрибута, заголовок и URL * Давайте сначала определим пользовательский интерфейс для поля заголовка. * / array (/ ** This метка появится в пользовательском интерфейсе * / 'label' => 'Title', / ** Это фактический атрибут, используемый в коде, используемом для шорткода * / 'attr' => 'title', / ** Определить тип ввода. Поддерживаемые типы: текст, флажок, текстовое поле, радио, выбор, электронная почта, URL-адрес, номер и дата. * / 'Type' => 'text', / ** Добавить полезное описание для пользователей * / 'description' => ' Пожалуйста, введите текст кнопки ',), / ** Теперь мы определит пользовательский интерфейс для поля URL * / array ('label' => 'URL', 'attr' => 'url', 'type' => 'text', 'description' => 'Full URL',), / ** Наконец, мы определим пользовательский интерфейс для выбора цвета * / array ('label' => 'Color', 'attr' => 'color', / ** Мы будем использовать поле выбора вместо текста * / 'type' => 'select', 'options' => array ('blue' => 'Blue', 'orange' => 'Orange', 'green' => 'Green',),),), / ** Вы можно выбрать, какие типы сообщений будут отображать шорткод пользовательского интерфейса * / 'post_type' => array ('post', 'page'),));

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

postelements

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

colorui

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