Пропустить

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

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

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

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

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

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

Что песочное?

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

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

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

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

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

первые шаги

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

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

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

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

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

add_shortcode ( 'CTA-кнопки', 'cta_button_shortcode'); Функция cta_button_shortcode ($ ДТО) {экстракт (shortcode_atts (массив ( 'название' => 'Title', 'URL' => ''), $ ДТО)); <Класс = "СТО-кнопка" SPAN> возвращение»<a href="'. $url.'">. $ Title. '</a> </ SPAN>'; }

Вы, вероятно, также потребуется код CSS для кнопки.

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

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

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

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

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

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

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

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

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

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

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

insertpostelement

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

shortcodeui

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

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

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

add_shortcode ( 'MyButton', 'my_button_shortcode'); Функция my_button_shortcode ($ ДТО) {экстракт (shortcode_atts (массив ( 'цвет' => 'синий', 'название' => 'Title', 'URL' => ''), $ ДТО)); возвращение '<пролет класс = «MyButton. $ цвет. -кнопка"> <a href="'. $url.'">. $ Title. '</a> </ SPAN>'; }

Поскольку наш шорткод отображает кнопки разных цветов, нам также необходимо обновить наш 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'),));

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

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

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

postelements

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

colorui

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

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

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

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

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

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