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 позволяет создавать Легко и бесплатно любой дизайн веб-сайта или блога с профессиональным видом. Перестаньте платить много за веб-сайт, который вы можете сделать сами.

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

l’API de Shortcake vous permet d’enregistrer les shortcodes dans l’interface utilsiateur. Vous avez besoin de dзапись quels attributs le shortcode accepte, le type des champs et quel format de publication affichera l’UI (interface utilisateur).

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

Вы хотите продавать свою продукцию в Интернете?

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

Это все, что вам нужно сделать, чтобы отобразить шорткод в пользовательском интерфейсе. Теперь вы можете начать редактирование статьи, чтобы иметь возможность использовать шорткод. Все, что вам нужно сделать, это нажать кнопку добавления мультимедиа. Вы увидите новый раздел под названием " Вставка элемента 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. Счастливого тебе нового года!

%d блоггеры, как этой странице: