При створенні нового сайту 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