Если вы разрабатываете WordPress сайта для клиента, то вполне вероятно, что вы будете создавать шорткоды для ваших клиентов, чтобы использовать их. Проблема заключается в том, что многие новички не знают, как добавить шорткоды и существуют сложные параметры, встроенные, что еще сложнее. Shortcake предоставляет решение путем добавления пользовательского интерфейса для шорткодов. В этой статье мы покажем вам, как добавить интерфейс пользователя для шорткодов WordPress с Shortcake.
Что такое Shortcake?
WordPress предлагает простой способ добавления исполнимого кода внутри постов и страниц с помощью шорткодов. Многие темы WordPress и плагины позволяют пользователям добавлять дополнительные функциональные возможности с помощью шорткодов. Тем не менее, иногда эти шорткоды могут быть сложными, тогда пользователю необходимо ввести параметры для настройки.
Например, в типичной теме WordPress, если есть шорткод добавить кнопку, то пользователю, вероятно, необходимо будет добавить по крайней мере от двух до пяти параметров. Как это выглядит:
[themebutton url=”http://вашсайт.ру” title=”Скачать сейчас” color=”purple” target=”newwindow”]
Shortcake является WordPress плагином, который призван решить эту проблему, предоставляя пользовательский интерфейс, чтобы ввести эти значения. Это сделает шорткоды намного проще в использовании.
Начало
Этот учебник предназначен для пользователей, которые являются новичками в WordPress. Начинающий пользователи, которые любят настроить их темы WordPress также найдут этот учебник полезным.
Сказав это, давайте начнем.
Первое, что вам нужно сделать , это установить и активировать плагин Shortcake (Shortcode UI).
Теперь, если вы будете нуждаться в шорткоде, который принимает несколько параметров, вводимых пользователем. Если вам нужно немного освежить память, вот как добавить шорткод в WordPress.
Ради этого урока мы будем использовать простой шорткод, который позволяет пользователям вставлять кнопки в свои посты WordPress или страницы. Вот пример кода для нашего шорткода, вы можете использовать эту функцию, добавив его в файл вашей темы functions.php или в специальном плагине.
add_shortcode( 'andreyex-button', 'andreyex_button_shortcode' );
function andreyex_button_shortcode( $atts ) {
extract( shortcode_atts(
array(
'title' => 'Title',
'url' => ''
),
$atts
));
return '<span class="andreyex-button"><a href="' . $url . '">' . $title . '</a></span>';
}
Вам также необходимо добавить некоторые CSS к стилю вашей кнопки. Вы можете использовать этот CSS в таблице стилей вашей темы.
.andreyex-button {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
background-color: #50A7EC;
}
Таким образом пользователь будет использовать шорткод на своих постах и страницах:
[andreyex-button title="Скачать сейчас" url="http://вашсайт.ру"]
Теперь, когда мы имеем шорткод, который может принимает параметры, давайте создадим пользовательский интерфейс для него.
Регистрация Вашего шорткод в пользовательском интерфейсе с Shortcake
Shortcake API позволяет зарегистрировать пользовательский интерфейс вашего шорткод. Вам нужно будет описать, какие атрибуты принимает ваш шорткод, типы полей ввода, и какие типы поста будет показывать шорткод UI.
Ниже приведен пример фрагмента кода, который мы будем использовать, чтобы зарегистрировать в пользовательском интерфейсе нашего шорткод. Мы попытались объяснить каждый шаг с встроенными комментариями. Вы можете вставить эту информацию в в файл вашей темы functions.php или в специальном плагине.
shortcode_ui_register_for_shortcode( /** Ваш shortcode handle */ 'cta-button', /** Ваш Shortcode label и icon */ array( /** Label для вашего пользовательского интерфейса шорткода. Это обязательная часть. */ 'label' => 'Добавить кнопку', /** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon. */ 'listItemImage' => 'dashicons-lightbulb', /** Атрибуты Shortcode*/ 'attrs' => array( /** * Each attribute that accepts user input will have its own array defined like this * Our shortcode accepts two parameters or attributes, title and URL * Lets first define the UI for title field. */ array( /** Эта метка будет отображаться в пользовательском интерфейсе */ 'label' => 'Заголовок', /** Это фактический attr, который используется используемый в шорткоде */ 'attr' => 'title', /** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */ 'type' => 'text', /** Add a helpful description for users 'description' => 'Пожалуйста введите текст кнопки', ), /** Now we will define UI for the URL field */ array( 'label' => 'URL', 'attr' => 'url', 'type' => 'text', 'description' => 'Full URL', ), ), ), /** You can select which post types will show shortcode UI */ 'post_type' => array( 'post', 'page' ), ) );
Вот и все, теперь вы можете видеть пользовательский интерфейс шорткода в действии путем редактирования поста. Просто нажмите на кнопку Add Media выше пост редактора. Появится медиа загрузчик, где вы увидите новый пункт “Insert Post Element” в левой колонке. При нажатии на нее вам покажут кнопку, чтобы вставить код.
При нажатии на картинку, содержащую лампочку и title Shortcake покажет вам шорткод UI.
Добавление шорткода с многими входами
В первом примере мы использовали очень простой шорткод. Теперь давайте сделать его немного более сложным и гораздо более полезным. Давайте добавим шорткод, который позволяет пользователям выбрать цвет кнопки.
Во-первых, мы добавим шорткод. Это почти то же шорткод, за исключением того, что теперь ввод данных пользователем будет менять цвет кнопки.
add_shortcode( 'my_andreyex_button', 'my_andreyex_button_shortcode' );
function my_andreyex_button_shortcode( $atts ) {
extract( shortcode_atts(
array(
'color' => 'blue',
'title' => 'Title',
'url' => ''
),
$atts
));
return '<span class="my_andreyex_button ' . $color . '-button"><a href="' . $url . '">' . $title . '</a></span>';
}
Так как наш шорткод будет показывать кнопки в разных цветах, поэтому мы должны обновить наш CSS тоже. Вы можете использовать этот CSS в таблице стилей вашей темы.
.my_andreyex_button {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
}
.blue-button {
background-color: #50A7EC;
}
.orange-button {
background-color:#FF7B00;
}
.green-button {
background-color:#29B577;
}
Кнопки будут выглядеть следующим образом:
Теперь, когда наш шорткод готов, следующим шагом является регистрация шорткода в UI. Мы будем использовать по существу один и тот же код, за исключением того, что на этот раз у нас есть еще один параметр для цвета, и мы предлагаем пользователям выбрать из синего, оранжевого или зеленого кнопок.
shortcode_ui_register_for_shortcode(
/** Ваш handle shortcode */
'mybutton',
/** Ваш заголовок и значок шорткода */
array(
/** Label для вашего пользовательского интерфейса в шорткоде. Это обязательная часть. */
'label' => 'Добавить цветную кнопку',
/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon. */
'listItemImage' => 'dashicons-flag',
/** Shortcode Attributes */
'attrs' => array(
/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field.
*/
array(
/** Эта метка будет отображаться в пользовательском интерфейсе */
'label' => 'Заголовок',
/** This is the actual attr used in the code used for shortcode */
'attr' => 'title',
/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type' => 'text',
/** Добавить полезные описание для пользователей */
'description' => 'Пожалуйста, введите текст кнопки',
),
/** Now we will define UI for the URL field */
array(
'label' => 'URL',
'attr' => 'url',
'type' => 'text',
'description' => 'Full URL',
),
/** Finally we will define the UI for Color Selection */
array(
'label' => 'Цвет',
'attr' => 'color',
/** Мы будем использовать поле select вместо текста */
'type' => 'select',
'options' => array(
'blue' => 'Blue',
'orange' => 'Orange',
'green' => 'Green',
),
),
),
/** Вы можете выбрать, какие типы постов будут показывать шорткод в UI */
'post_type' => array( 'post', 'page' ),
)
);
Вот и все, теперь вы можете при редактировании поста или страницы, нажать на кнопку Add Media. Вы заметите, ваш новый добавленный шорткод с заголовком поста “Insert Post Elements”.
При нажатии на вновь созданный шорткод, создастся шорткод в пользовательском интерфейсе, где вы можете просто ввести значения.
Вы можете скачать код, используемый в этом учебнике в качестве подключаемого модуля.
andreyex-shortcake-tutorial
Мы включили CSS, так что вы можете использовать его для изучения или использовать его, чтобы добавить свой собственный вызов к кнопкам в WordPress с помощью более простого пользовательского интерфейса. Не стесняйтесь изменять исходные тексты и играть с ними.
Мы надеемся , что эта статья помогла вам узнать, как добавить пользовательский интерфейс для шорткодов WordPress с Shortcake. Вы также можете захотеть взглянуть на эти 7 важных советов для использования шорткоды в WordPress .