В этом уроке мы поговорим о шорткодах WordPress и о том, что я думаю о недостающей части с шорткодами в WordPress.
Сначала я скажу, что мне действительно нравятся шорткоды, они позволяют предоставить автору сайта полный контроль над содержимым сайта и его позиционированием.
Что такое шорткод?
Шорткод позволяет пользователю запускать функцию PHP в любой точке содержимого. Шорткод по умолчанию, который вы получаете с WordPress, это шорткод галереи , чтобы добавить галерею на ваш сайт, все что вам нужно сделать, это добавить в область контента вашего сайта.
Имя в квадратных скобках — это имя шорткода, который вы хотите использовать в этой позиции содержимого. Затем WordPress будет искать шорткоды в фильтре the_content и с помощью функции do_shortcode () будет запускать функции в этой точке содержимого, а затем возврат этих функций будет выводиться в остальную часть содержимого.
Шорткоды позволяют отправлять дополнительные параметры функции с помощью атрибутов.
[shortcode_example attribute1="stuff" attribute2="things"/]
В функции шорткода разработчик теперь может искать эти атрибуты и использовать эти значения для изменения вывода. Вы также можете добавить контент в шорткод вместе с атрибутами.
[shortcode_example attribute1="stuff" attribute2="things"]Shortcode Content Can Go Here[/shortcode_example]
Это отлично подходит для автора, так как теперь они имеют полный контроль над любыми функциями, которые могут помочь добавить динамические элементы управления на сайт.
Проблема с шорткодами
Хотя мне нравится использовать шорткоды при создании веб-сайтов WordPress из-за гибкости, которую вы получаете, я чувствую, что нам по-прежнему не хватает фрагмента в WordPress, чтобы улучшить удобство использования шорткодов для автора контента.
Проблема с шорткодами состоит в том, что разметка для них похожа на HTML, если вы разработчик или ранее использовали HTML, то это не проблема, вы понимаете это и знаете синтаксис, который вам нужно использовать. Но если вы никогда не делали HTML раньше (как большинство пользователей CMS), то использование шорткодов может быть немного сложным, не зная, какие атрибуты / как их использовать / что вы можете поместить в шорткод, есть много причин, почему авторы не не люблю их использовать.
Другая проблема с шорткодами — это атрибуты. Единственный способ, которым автор узнает, какие атрибуты и какие значения они могут использовать, — это чтение документации. Это означает, что всякий раз, когда вы хотите попробовать что-то новое с помощью шорткода, вам всегда нужна документация для внесения изменений, которые могут занять некоторое время. Вы также зависите от разработчика, который предоставит вам хорошую документацию о шорткоде, о том, как вы можете его использовать, какие атрибуты использовать, значения, которые вы можете отправлять, значения по умолчанию для атрибутов и т. Д.
Как мы можем улучшить это?
При рассмотрении вопроса об улучшении юзабилити шорткодов первое, на что нужно обратить внимание — это интерфейс виджетов , на простом уровне эта функциональность точно такая же, как использование шорткодов в контенте. Вы можете разбить свою область контента на блоки и ввести функциональность для каждого блока.
Преимущество использования виджетов заключается в том, что когда они добавляются на страницу, вам предоставляется форма, в которую вы можете ввести атрибуты и контент для использования в виджете. Именно то, что хочет автор контента, добавьте что-нибудь на страницу, заполните параметры и перейдите. Это действительно то, чего не хватает в шорткодах: когда они добавляются в область контента, вам нужна форма, которую пользователь должен заполнить, с текстовыми полями, флажками, выберите выпадающие списки, мы можем затем взять значения формы и использовать их в атрибуты шорткода.
Как улучшить шорткоды
В предыдущем уроке мы исследовали, как создать кнопку в редакторе TinyMce, чтобы добавить наши шорткоды в область содержимого. Мы будем использовать эту же технику для создания области, в которой пользователь будет выбирать, какой шорткод он хочет использовать, а затем использовать встроенный скрипт WordPress для пользовательского интерфейса jQuery, чтобы отобразить диалоговое окно, заполненное формой для выбора атрибутов.
Из изображений ниже вы можете увидеть, что мы собираемся создать
Сначала выберите шорткод из выпадающего списка.
Затем заполните форму с параметрами шорткода.
Отправьте форму, шорткод появится в области содержимого, заполненной необходимыми атрибутами.
Добавить кнопку в TinyMce
Сначала нам нужно создать способ добавления выпадающего списка в редактор контента TinyMce, чтобы отобразить список всех шорткодов, для которых мы хотим отобразить форму.
Чтобы добавить новую кнопку в редактор TinyMce, вам нужно использовать фильтр WordPress mce_buttons , этот фильтр передаст один параметр, который является массивом существующих кнопок, для добавления новых кнопок вам нужно просто добавить новые элементы в конец массив $ buttons и вернуть весь массив.
add_filter( 'mce_buttons', 'pu_register_buttons' );
function pu_register_buttons( $buttons )
{
array_push( $buttons, 'separator', 'puhortcodes' );
return $buttons;
}
Включить файл JavaScript для формы
Поскольку мы используем jQuery UI для создания формы, нам нужно добавить новый файл Javascript, который мы будем использовать для добавления скрипта, создающего форму. Для этого нам нужно использовать фильтр mce_external_plugins, к которому можно добавить дополнительные файлы Javascript в точке сценариев TinyMce.
add_filter( 'mce_external_plugins', 'pu_add_buttons' );
function pu_add_buttons( $plugin_array )
{
$plugin_array['pushortcodes'] = plugin_dir_url( dirname(__FILE__) ) . 'js/shortcode-tinymce-button.js';
return $plugin_array;
}
Создать новый фильтр для включения определенных шорткодов
В WordPress есть два способа расширить функциональность кода, это либо действия, либо фильтры.
Действия позволяют добавлять дополнительные функции кода для запуска в определенное время в коде.
Фильтры позволяют передавать параметры, изменять содержимое и возвращать новое значение.
Во всем внутреннем коде WordPress есть повсюду действия и фильтры, позволяющие вам изменять функциональность кода, это то, что вы будете использовать в любой разработке плагинов для добавления новых вещей в WordPress. Но вам не нужно просто использовать внутренние действия и фильтры WordPress, которые вы можете определить свои собственные для повторного использования в другом месте.
В приведенном ниже коде мы собираемся использовать наш собственный фильтр для добавления новых тегов в раскрывающийся список шорткодов. Обратите внимание, что в коде ниже функции apply_filters () это говорит WordPress запускать функции, которые уже были добавлены в этот фильтр. Этот фильтр принимает один параметр, который представляет собой массив тегов шорткода, которые мы собираемся использовать в раскрывающемся списке шорткода. Фильтр позволяет нам добавлять дополнительные элементы в этот массив тегов шорткода, которые будут использоваться для создания раскрывающегося списка.
add_action('admin_footer', 'pu_get_shortcodes');
function pu_get_shortcodes()
{
echo '<script type="text/javascript">
var shortcodes_button = new Object();';
$shortcode_button_tags = array();
$shortcode_button_tags = apply_filters('pu_shortcode_button', $shortcode_button_tags);
if(!empty($shortcode_button_tags))
{
foreach($shortcode_button_tags as $tag => $code)
{
echo "shortcodes_button['{$tag}'] = '{$code}';";
}
}
echo '</script>';
}
Чтобы добавить шорткоды в этот выпадающий список, нам нужно добавить новые фильтры в фильтр pu_shortcode_button .
Здесь мы используем фильтр pu_shortcode_button для добавления нового шорткода Facebook, внутри функции все, что мы делаем, это добавляем новый элемент в массив. Ключом будет имя шорткода, значение — это заголовок, который мы представляем пользователю, тогда мы просто возвращаем весь массив.
add_filter('pu_shortcode_button', 'add_facebook_shortcode', 10, 1);
function add_facebook_shortcode( $shortcode_tags )
{
$shortcode_tags['facebook_like_box'] = 'Facebook Like Box';
return $shortcode_tags;
}
Создание формы пользовательского интерфейса jQuery
Чтобы создать форму, которая будет появляться при выборе шорткода, мы можем использовать диалоговое окно jQueryUI, а затем добавить HTML-код для создания формы. JQueryUI встроен в WordPress со скриптами, необходимыми для диалогового окна, чтобы использовать их, нам просто нужно запустить функцию wp_enqueue_script () с параметром jquery-ui-dialog .
Но WordPress не поставляется с таблицами стилей для диалогового окна jQueryUI, поэтому мы должны включить эти стили в область администрирования WordPress . Мы можем использовать Google CDN для получения таблиц стилей jQueryUI по умолчанию, используя wp_enqueue_style () и URL для Google CDN.
add_action('admin_enqueue_scripts', 'add_dialog_box_scripts');
function add_dialog_box_scripts()
{
wp_enqueue_script( 'jquery-ui-dialog', false, array('jquery') );
wp_enqueue_style( 'jquery-style', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css' );
}
С этими сценариями, включенными в страницу, мы можем теперь создать диалоговое окно с элементами формы, заполненными для атрибутов шорткода.
Добавить форму в диалоговое окно
При создании формы мы будем использовать другой пользовательский фильтр WordPress для добавления элементов формы в диалоговое окно. Код ниже будет HTML в нижнем колонтитуле области администратора, этот HTML — то, что нам нужно для создания диалогового окна, которое будет отображаться, когда пользователь выбирает шорткод.
Поскольку элементы формы будут добавляться при выборе шорткода, это необходимо сделать с помощью Javascript, поэтому мы собираемся создать переменную JavaScript и добавить все элементы формы в этот объект, чтобы мы могли использовать это в Javascript для создания форма.
add_action('admin_footer', 'pu_shortcode_dialog');
function pu_shortcode_dialog()
{
echo '<div id="shortcode-dialog" title="Shortcode Form">
<form class="shortcode-dialog-form"></form></div>';
echo '<script type="text/javascript">
var shortcodes_form = new Object();';
$shortcode_form = array();
$shortcode_form = apply_filters('pu_shortcode_form', $shortcode_form);
if(!empty($shortcode_form))
{
foreach($shortcode_form as $tag => $form)
{
echo "shortcodes_form['{$tag}'] = '{$form}';";
}
}
echo '</script>';
}
Теперь у нас есть переменная объекта JavaScript shortcodes_form, которая заполняется всеми элементами формы для каждого шорткода. Поскольку шорткод является ключом для объекта, мы используем его при выборе шорткода для получения всех элементов формы, затем мы возьмем эти элементы формы и добавим их в пустое диалоговое окно.
Короткая кнопка JavaScript
Следующий код является файлом Javascript, который мы будем использовать для создания нашей кнопки шорткода в редакторе TinyMce.
По событию click пользователя, выбирающего шорткод, мы создадим форму путем извлечения элементов формы из переменной shortcodes_form , очистки диалогового окна и повторного добавления всего для выбранного шорткода в форму.
Поскольку мы используем диалоговое окно jQueryUI, мы можем создать кнопку отправки формы и сообщить ей, что именно мы хотим сделать после отправки формы. Используя функцию jQuery serializeArray (), он получит массив всех полей в форме шорткода, затем все, что нам нужно сделать, — это перебрать этот массив и создать атрибуты для шорткода. После создания шорткода вы можете вывести этот контент в редактор TinyMce.
(function() {
tinymce.PluginManager.add('pushortcodes', function( editor )
{
var shortcodeValues = [];
jQuery.each(shortcodes_button, function(i)
{
shortcodeValues.push({text: shortcodes_button[i], value:i});
});
editor.addButton('pushortcodes', {
type: 'listbox',
text: 'Shortcodes',
onselect: function(e) {
var v = e.control._value;
var content = '';
var dialogForm = '<table>';
if(shortcodes_form[v] != undefined)
{
dialogForm += shortcodes_form[v];
if(dialogForm != '<table>')
{
dialogForm += '</table>';
jQuery('.shortcode-dialog-form').empty();
jQuery('.shortcode-dialog-form').append(dialogForm);
jQuery("#shortcode-dialog").dialog({
width: 700,
resizable: false,
buttons: {
"Add Shortcode": function(){
var formArray = jQuery('.shortcode-dialog-form').serializeArray();
if(formArray.length > 0)
{
content = '[' + v + ' ';
jQuery(formArray).each(function(i){
content += jQuery(this)[0].name + '="'+ jQuery(this)[0].value +'" ';
});
content += '][/'+v+']';
}
tinyMCE.activeEditor.selection.setContent( content );
jQuery( this ).dialog( "close" );
}
}
});
}
} else {
tinyMCE.activeEditor.selection.setContent( '[' + v + '][/' + v + ']' );
}
},
values: shortcodeValues
});
});
})();
Это все файлы, которые нам нужны для создания плагина кнопки формы шорткода, но как вы будете использовать это для повышения удобства использования ваших шорткодов.
Использование фильтров для добавления шорткода
В начале этой статьи вы увидели, как можно легко создавать новые фильтры, чтобы использовать их для добавления дополнительного содержимого в массив. Преимущество использования фильтров для этого заключается в том, что каждый из наших шорткодов может добавлять новую функцию для добавления в массив.
Первый фильтр, который мы собираемся использовать, это фильтр pu_shortcode_button , который добавит контент в выпадающий список шорткодов. Это принимает один параметр, который является массивом шорткодов, и возвращает тот же массив с добавленным к нему новым содержимым. Это тот же фильтр, который вы будете использовать во всех ваших шорткодах, чтобы добавить их в это раскрывающееся меню для выбора шорткода, так как это массив, для которого важна пара ключ-значение, ключ массива должен совпадать с тегом шорткода, значение — это текст, который будет отображаться в раскрывающемся списке шорткодов.
add_filter('pu_shortcode_button', 'pu_add_facebook_shortcode', 10, 1);
function pu_add_facebook_shortcode( $shortcode_tags )
{
$shortcode_tags['facebook_like_box'] = 'Facebook Like Box';
return $shortcode_tags;
}
Следующий фильтр, который нам нужно использовать, — это фильтр, который создаст массив элементов формы внутри диалогового окна. Фильтр, который нам нужно использовать, это pu_shortcode_form , который снова принимает один параметр и возвращает тот же параметр с содержимым формы внутри.
Опять же, пара «ключ-значение» этого массива важна, так как он помогает определить, какой контент получить для каждого шорткода, ключ — это тег шорткода, а значение — это все элементы формы, используемые для этого шорткода.
add_filter('pu_shortcode_form', 'pu_add_facebook_form', 10, 1);
function pu_add_facebook_form( $shortcode_tags )
{
$shortcode_tags['facebook_like_box'] = apply_filters('pu_shortcode_form_add_text', null, 'page_name', 'Page Name');
$shortcode_tags['facebook_like_box'] .= apply_filters('pu_shortcode_form_add_text', null, 'width', 'Width', 300);
$shortcode_tags['facebook_like_box'] .= apply_filters('pu_shortcode_form_add_checkbox', null, 'show_faces', 'Show Faces');
$shortcode_tags['facebook_like_box'] .= apply_filters('pu_shortcode_form_add_checkbox', null, 'show_stream', 'Show Stream');
$shortcode_tags['facebook_like_box'] .= apply_filters('pu_shortcode_form_add_checkbox', null, 'show_header', 'Show Header', true);
$shortcode_tags['facebook_like_box'] .= apply_filters('pu_shortcode_form_add_checkbox', null, 'show_border', 'Show Border');
$shortcode_tags['facebook_like_box'] .= apply_filters('pu_shortcode_form_add_select', null, 'color_scheme', 'Color Scheme', array('light' => 'Light', 'dark' => 'Dark'));
return $shortcode_tags;
}
Как видно из этого примера, я снова использую пользовательские фильтры для получения содержимого каждого из элементов формы, поэтому мы делаем это по нескольким причинам:
- Мы всегда будем получать вывод данных из этих функций, поэтому элемент формы всегда будет иметь одинаковую разметку.
- К ним можно получить доступ из любого места в коде, если шорткоды в темах или плагинах, вы все равно можете получить доступ к этим фильтрам.
- Это позволяет другим разработчикам изменять вывод этих фильтров.
Создание фильтра элемента формы текстового поля
Следующий код покажет поведение фильтра текстовых элементов по умолчанию, всего 4 параметра, и мы будем использовать их для определения атрибутов элемента формы.
Возвращение этого фильтра будет использоваться для добавления элемента в форму, поэтому мы собираемся вернуть строку таблицы просто с типом ввода текста.
add_filter('pu_shortcode_form_add_text', 'pu_add_text_form_element', 10, 4);
function pu_add_text_form_element( $content, $name, $title, $value = '' )
{
return sprintf('<tr><td>%s</td><td><input type="text" id="%s" name="%s" value="%s" /></td></tr>',
$title,
$name,
$name,
$value);
}
Затем мы можем продолжить это и создать фильтр для других элементов формы.
Скачать плагин Shortcode Menu
Вы могли заметить, что я не включил весь код в этот учебник, потому что я сделал этот плагин доступным как премиальный плагин, который я продаю на Coveloping. Если вам нравится идея этого плагина, весь приведенный выше код достаточно для того, чтобы вы воссоздали плагин, но вы не получаете его в полной мере.
Добавленные функции плагина включают страницу настроек для автора контента для редактирования атрибутов и шорткодов, которые появляются в меню.
Этот плагин был создан с целью помочь разработчикам шорткода создать лучшее и удобное решение для своих шорткодов, в то же время позволяя авторам контента настраивать использование шорткодов самостоятельно. Позволяя пользователям легко использовать эти шорткоды на своих сайтах WordPress для улучшения контента сайта.
Это премиальный плагин, который может помочь улучшить ваши уже существующие шорткоды, вы можете скачать этот плагин в магазине Coveloping за $ 16.
Для читателей Paulund вы можете получить этот плагин со скидкой 50%, используя следующий код скидки paulundshortcodemenu .