Пропустить

Как добавить интерфейс шорткод на WordPress

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

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

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

[url button = "http://example.com" title = "Узнать больше" color = "purple" target = "newwindow"]

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

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

первые шаги

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

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

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

Вот пример фрагмента кода, который можно использовать для регистрации шорткода в пользовательском интерфейсе 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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

colorui

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

Эта статья содержит комментарии 0

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
7 акции
доля7
чирикать
Регистрация