При создании нового сайта на WordPress очень часто возникает желание добавить пример текста к записям или страницам, чтоб предварительно посмотреть, как будет выглядеть контент на вашем сайте. Из сегодняшнего руководства вы узнаете, как ускорить этот процесс путем создания элементарного плагина, который будет генерировать тестовый контент для вашего сайта на WordPress.
| Скачать готовый плагин |
Плагин, который вы будете создавать, добавит кнопку во встроенный редактор TinyMCE, при нажатии которой откроется окно с запрашиваемой информацией для будущего тестового контента. Пользователь введет, сколько абзацев тестового текста нужно будет генерировать, и контент будет добавлен!
Смотрите также:
Учтите, что в этом плагине используется библиотека TinyMCE 4.0, которая совсем недавно была интегрирована в версию WordPress 3.9. Это значит, что этот плагин будет работать только в версии 3.9 и в более новых.
Инициализация плагина
Шаг 1.
Для начала создайте новую папку в директории wp-content/plugins на вашем сайте и дайте ей название. В этом уроке будет использоваться имя 'dummy-text-generator', но если вы будете использовать относительные ссылки в файлах внутри плагина, то названия могут быть другими.
Шаг 2.
Затем добавьте новый PHP-файл в этой папке. Например, dummy-text-generator.php.
Шаг 3.
Теперь вам нужно уведомить WordPress о том, что вы добавили новый плагин на ваш сайт, и для того, чтоб это сделать, необходимо добавить следующий код в файле, который вы только что создали:
<?php /* Plugin Name: Dummy Text Generator Plugin URI: http://code.tutsplus.com Description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Version: 1.0 Author: Sam Berson Author URI: http://www.samberson.com License: GPLv2 or later */
Проще говоря, этот текст говорит WordPress, как называется добавленный вами плагин, его назначение, номер версии, автора, прочее. Эту информацию можно увидеть в админке WordPress на странице Плагины.
Шаг 4.
Также нужно создать новую директорию в папке плагина под названием "js" и новый файл, именуемый tinymce-plugin.js. Вам он понадобится позже, а сейчас просто оставьте его пустым.
Шаг 5.
И последнее – активируйте ваш новый плагин через страницу Плагины в консоли вашего сайта. После этого можно начинать кодировать сам плагин.
Добавление функций
Этот плагин использует несколько главных функций:
- одна проверяет тип поста и включает в себя нужную функциональность плагина в зависимости от того, запись это или страница,
- вторая добавляет кнопку к редактору постов,
- третья включает файл JavaScript, который нужен для работы плагина,
- четвертая инициализирует действия кнопки.
Шаг 1.
Первая функция, которую нам необходимо включить, отвечает за проверку типа поста, с которым мы имеем дело. И с ее помощью WordPress узнает что это – запись или страница.
Функция также добавляет кнопку к редактору. Это можно сделать с помощью приведенного ниже кода и нужно добавить сразу же после информации в шапке.
add_action( 'admin_head', 'add_tinymce_dummytext' );
function add_tinymce_dummytext() {
global $typenow;
// only on Post Type: post and page
if( ! in_array( $typenow, array( 'post', 'page' ) ) ) {
return ;
}
add_filter( 'mce_external_plugins', 'add_tinymce_dummytext_plugin' );
// Add to line 1 form WP TinyMCE
add_filter( 'mce_buttons', 'add_tinymce_dummytext_button' );
}
Шаг 2.
Вторая функция вызывает файл JavaScript, который вы создали ранее, и уведомляет плагин, где его можно найти.
// include the js for tinymce
function add_tinymce_dummytext_plugin( $plugin_array ) {
$plugin_array['dummytext_plugin'] = plugins_url( '/js/tinymce-plugin.js', __FILE__ );
return $plugin_array;
}
Шаг 3.
Последняя функция, которую вам нужно будет добавить, инициализирует кнопку в редакторе постов для генерации тестового контента, а затем функция отображает кнопку на экране редактора записи.
// Add the button key for address via JS
function add_tinymce_dummytext_button( $buttons ) {
array_push( $buttons, 'dummytext_button' );
// Print all buttons
//var_dump( $buttons );
return $buttons;
}
Шаг 4.
Теперь вы инициализировали все функции и действия, которые вам нужны для работы плагина. Созданный вами PHP-файл должен теперь содержать информацию с шапки и все три вышеупомянутые функции, которые вы только что создали.
<?php
/*
Plugin Name: Dummy Text Generator
Plugin URI: http://code.tutsplus.com
Description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Version: 1.0
Author: Sam Berson
Author URI: http://www.samberson.com
License: GPLv2 or later
*/
add_action( 'admin_head', 'add_tinymce_dummytext' );
function add_tinymce_dummytext() {
global $typenow;
// only on Post Type: post and page
if( ! in_array( $typenow, array( 'post', 'page' ) ) ) {
return;
}
add_filter( 'mce_external_plugins', 'add_tinymce_dummytext_plugin' );
// Add to line 1 form WP TinyMCE
add_filter( 'mce_buttons', 'add_tinymce_dummytext_button' );
}
// inlcude the js for tinymce
function add_tinymce_dummytext_plugin( $plugin_array ) {
$plugin_array['dummytext_plugin'] = plugins_url( '/js/tinymce-plugin.js', __FILE__ );
return $plugin_array;
}
// Add the button key for address via JS
function add_tinymce_dummytext_button( $buttons ) {
array_push( $buttons, 'dummytext_button' );
return $buttons;
}
Генерирование тестового текста
Пример текста, который вы будете создавать, будет находиться в ранее созданном вами файле под названием tinymce-plugin.js в директории js.
Шаг 1.
Давайте начнем с того, что уведомим WordPress о добавлении функции, и что 'dummyContent' соответствует абзацу HTML, содержащего пример текста "Lorem ipsum".
( function() {
dummyContent = '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';
Шаг 2.
Сейчас нужно инициализировать функцию 'dummytext_plugin' в редакторе, которую вы создали ранее в файле PHP.
tinymce.PluginManager.add( 'dummytext_plugin', function( editor, url ) {
Шаг 3.
В этом шаге мы собираемся сказать плагину, что нужно инициализировать кнопку для добавления примера текста в запись, и определить его поля и свойства.
// Add a button that opens a window
editor.addButton( 'dummytext_button', {
text: 'Dummy Text Generator',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open( {
title: 'Dummy Text Generator',
body: [{
type: 'textbox',
name: 'number',
label: 'Number of Paragraphs'
}],
Шаг 4.
Теперь давайте скажем плагину, что нужно делать при неправильном указании числа абзацев тестового текста, и как добавить контент, если информация поступила из формы окна.
onsubmit: function( e ) {
if(isNaN(e.data.number)) { alert('Please enter a valid number'); return;}
// Insert content when the window form is submitted
for (var i = 0; i < e.data.number; i++) {
editor.insertContent( dummyContent );
}
}
Шаг 5.
В последнем шаге мы закрываем все скобки, которые были открыты при создании файла JavaScript. После этого сохраните изменения двух файлов: PHP и JS.
} );
}
} );
} );
} )();
Шаг 6.
И наконец, ваш файл JavaScript будет выглядеть так, как в примере кода ниже. Теперь можно протестировать и оценить плагин, который вы сами только что создали!
( function() {
dummyContent = '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';
tinymce.PluginManager.add( 'dummytext_plugin', function( editor, url ) {
// Add a button that opens a window
editor.addButton( 'dummytext_button', {
text: 'Dummy Text Generator',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open( {
title: 'Dummy Text Generator',
body: [{
type: 'textbox',
name: 'number',
label: 'Number of Paragraphs'
}],
onsubmit: function( e ) {
if(isNaN(e.data.number)) { alert('Please enter a valid number'); return;}
// Insert content when the window form is submitted
for (var i = 0; i < e.data.number; i++) {
editor.insertContent( dummyContent );
}
}
} );
}
} );
} );
} )();
Источник: code.tutsplus.com
Комментарии к записи: 0