При разработке нового сайта WordPress вам часто нужно добавлять в свои посты и страницы какой-то фиктивный текст, чтобы вы могли видеть, как будет выглядеть сайт до публикации контента. В этом уроке вы узнаете, как ускорить этот процесс, разработав плагин, который генерирует фиктивный текст для вас.
Плагин, который вы создадите, добавит кнопку в редактор WYSIWYG, которая при нажатии откроет окно и запросит количество параграфов фиктивного текста для создания. Пользователь введет номер, и контент будет вставлен!
Обратите внимание, что этот плагин использует библиотеку TinyMCE 4.0, которая была недавно интегрирована в WordPress 3.9, что означает, что этот плагин будет работать только в 3.9 и новее.
Инициализация плагина
Шаг 1
Для начала создайте новую папку в каталоге wp-content/plugins вашего сайта и присвойте ей название. В этом уроке я буду использовать «dummy-text-generator» в качестве заголовка, хотя, поскольку вы будете использовать относительные ссылки в файлах плагинов, это может быть что угодно.
Шаг 2
Затем добавьте новый файл PHP в новый каталог с названием вашего каталога, а затем с расширением .php . Например, dummy-text-generator.php .
Шаг 3
Теперь вам нужно уведомить WordPress о том, что вы добавили новый плагин на свой сайт, и для этого вам нужно добавить следующий код в начало вашего нового файла.
|
01
02
03
04
05
06
07
08
09
10
|
<?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
Последний шаг — активировать новый плагин, что можно сделать на странице плагинов в серверной части вашего сайта. Как только вы активировали свой плагин, вы готовы перейти к кодированию самого плагина.
Добавление функций
Этот плагин использует несколько основных функций: одну для проверки типа поста и включения функциональности плагина на посте или странице, одну для добавления кнопки в редактор WYSIWYG, одну для включения файла JavaScript, необходимого для работы плагина, и один инициализирует действия кнопки.
Шаг 1
Первая функция, которую мы должны включить, — это проверка того, с каким постом мы имеем дело, и сообщение WordPress, что, если это пост или страница, плагин должен начать свою работу.
Эта функция также добавляет кнопку в редактор. Это может быть достигнуто с помощью следующего кода и должно быть добавлено непосредственно после нашей информации заголовка.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
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, который вы создали ранее, и сообщает плагину, где его можно найти.
|
1
2
3
4
5
6
7
|
// 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
Последняя функция, которую вы будете включать, инициализирует вашу новую фиктивную текстовую кнопку в редакторе WYSIWYG, а затем заставляет ее распечатать ее в редакторе записей.
|
1
2
3
4
5
6
7
8
|
// 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-файл должен теперь содержать информацию заголовка и все три функции, которые вы только что создали.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<?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;
}
|
Генерация фиктивного текста
Фиктивный текст, который вы будете создавать, находится в файле JavaScript, который вы создали ранее, и называется tinymce-plugin.js в каталоге js .
Шаг 1
Давайте начнем с сообщения WordPress о том, что мы добавляем функцию, и что dummyContent равно абзацу HTML, содержащему некоторый фиктивный текст «Lorem ipsum».
|
1
2
|
( function() {
dummyContent = ‘<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
Шаг 2
Теперь вы собираетесь инициализировать функцию ‘dummytext_plugin’ в редакторе, который вы сделали ранее в файле PHP.
|
1
|
tinymce.PluginManager.add( ‘dummytext_plugin’, function( editor, url ) {
|
Шаг 3
Теперь вы скажете плагину инициализировать кнопку, чтобы иметь возможность добавлять фиктивный текст в сообщение и определять его поля и свойства.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
// 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
Давайте скажем плагину, что делать, если введен неверный номер, и вставлять содержимое при отправке информации из формы окна.
|
1
2
3
4
5
6
7
8
|
onsubmit: function( e ) {
if(isNaN(e.data.number)) { alert(‘Please enter a valid number’);
// Insert content when the window form is submitted
for (var i = 0; i < e.data.number; i++) {
editor.insertContent( dummyContent );
}
}
|
Шаг 5
Последний шаг — закрыть все скобки, которые были открыты во время создания файла JavaScript, и после того, как вы это сделаете, сохраните свои изменения в файлах PHP и JS.
|
1
2
3
4
5
|
} );
}
} );
} );
} )();
|
Шаг 6
Наконец, ваш файл JavaScript будет выглядеть примерно так, как показано ниже, и теперь вы можете протестировать и наслаждаться с помощью созданного вами плагина!
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
( function() {
dummyContent = ‘<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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’);
// Insert content when the window form is submitted
for (var i = 0; i < e.data.number; i++) {
editor.insertContent( dummyContent );
}
}
} );
}
} );
} );
} )();
|
В итоге
Вот и все — теперь вы успешно создали свой собственный текстовый плагин в WordPress, используя PHP и JavaScript!
Если у вас есть какие-либо вопросы по поводу этого плагина, пожалуйста, не стесняйтесь оставлять комментарии ниже, и я обязательно вернусь к вам.