Тренування роботи з редактором TinyMCE – урок 32
Мені дуже подобаються можливості CMS WordPress для роботи з візуальним редактором TinyMCE, дані можливості були представлені для тих, хто користується версією WP вище 3,9. Не обіцяю дати вам повну інформацію щодо TinyMCE API, але дам приклади коду, який ви зможете використовувати у своїй роботі.
Почнемо наш довгий та цікавий урок!
Додаємо поле вибору сімейства шрифтів та розміру шрифту
Для додавання елементів для роботи зі шрифтами та їх розмірів використовуйте код нижче.
// Enable font size & font family selects in the editor if ( ! функція_існує( 'wpex_mce_buttons' ) ) { function wpex_mce_buttons( $Кнопки ) { array_unshift( $Кнопки, 'fontselect' ); // Add Font Select array_unshift( $Кнопки, 'fontsizeselect' ); // Add Font Size Select return $buttons; } } add_filter( 'mce_buttons_2', 'wpex_mce_buttons' );
Ось що в нас вийшло:
Ми можемо змінювати mce_buttons_2 на mce_buttons_3 або mce_buttons_1, це дасть можливість переміщати нові елементи між першою, другою та третьою панеллю.
Додавання розмірів користувача шрифту
За замовчуванням розміри шрифту не завжди підходять для оформлення тексту на сайті. Ще одна проблема шрифтів за замовчуванням, це те що вони налаштовуються у пунктах, а не пікселях, як ми до цього звикли. Я волію використовувати піксельні значення (10px, 12px, 13px, 14px..). Нижче я даю приклад функції, яка змінить розміри шрифту та одиниці вказані в WordPress за замовчуванням.
Додавання шрифтів користувача
За промовчанням у движку не можна використовувати свої імена шрифтів, хоча вони часто потрібні. Якщо ви створили свій шаблон і хочете настроїти вибір шрифту для користувача, то вам знадобиться наступна функція.
// Add custom Fonts to the Fonts list
if ( ! функція_існує( 'wpex_mce_google_fonts_array' ) ) {
функція wpex_mce_google_fonts_array( $initArray ) {
$initArray['font_formats'] = 'Лато=Лато;Andale Mono=andale mono,Разів;Arial=arial,Гельветика,sans-serif;Аріал Чорний = аріальний чорний,авангард;Книга Антиква=книжка антиква,Палатіно;Комічний Sans MS=comic sans ms,sans-serif;Кур'єр Новий=кур'єр новий,кур'єр;Грузія=Грузія,Палатіно;Гельветика=гельветика;Вплив=вплив,Чикаго;Символ=символ;Тахома=тахома,аріал,Гельветика,sans-serif;Термінал=термінал,Монако;Times New Roman=times new roman,Разів;Trebuchet MS=trebuchet ms,женева;Вердана=Вердана,женева;Webdings=webdings;Wingdings=wingdings,Zapf dingbats';
повернення $initArray;
}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );
Оскільки деякі шрифти можуть не опинитися на комп'ютері користувача, нам потрібно не лише надати вибір цих шрифтів, але і підключити їх до WordPress? щоб вони коректно відображалися в адмінці. Наприклад, можна підключити шрифт Лато який я використовую вище.
if ( ! функція_існує( 'wpex_mce_google_fonts_styles' ) ) {
функція wpex_mce_google_fonts_styles() {
$font_url = 'https://fonts.googleapis.com/css?сім'я=Лато:300,400,700';
add_editor_style( str_replace( ',', '%2C', $font_url ) );
}
}
add_action( 'init', 'wpex_mce_google_fonts_styles' );Якщо ви ще не користувалися цією функцією, то раджу спробувати її у дії, а результатом цієї функції буде меню, показане на малюнку нижче.
Додати нові пункти в меню дуже просто і перше що необхідно знати це надбудову, яку ми будемо використовувати в коді який буде нижче $налаштування[‘style_formats_merge’] = правда; ця надбудова допоможе не створювати окреме меню, але доповнити вже існуюче меню формати.
// Add new styles to the TinyMCE "formats" menu dropdown if ( ! функція_існує( 'wpex_styles_dropdown' ) ) { function wpex_styles_dropdown( $налаштування ) { // Create array of new styles $new_styles = array( array( 'title' => __( 'Custom Styles', 'wpex' ), 'items' => array( array( 'title' => __('Theme Button','wpex'), 'selector' => 'a', 'classes' => 'theme-button' ), array( 'title' => __('Highlight','wpex'), 'inline' => 'span', 'classes' => 'text-highlight', ), ), ), ); // Merge old & new styles $settings['style_formats_merge'] = правда; // Add new styles $settings['style_formats'] = json_encode( $new_styles ); // Return New Settings return $settings; } } add_filter( 'tiny_mce_before_init', 'wpex_styles_dropdown' );
Під номером (2) є активний пункт, який укладає виділений текст у тег проліт з класом виділення тексту.
Під номером (1) неактивний пункт, тому що цей пункт буде працювати тільки в тому випадку, якщо текст укладено в тег <a> і виділено. Я показав це на малюнку нижче. Уважно досліджуйте код, щоб розібратися чому так відбувається, тут я даю ви самі розберетеся, а ми підемо далі.
Створення кнопки у редакторі TinyMCE
Створення кнопок особливо для нас корисне, так як створюючи тему для wordpress ми часто створюємо шорткоди, а користувачеві необов'язково знати всі шорткоди напам'ять. Створюючи кнопку користувачеві, достатньо буде на неї натиснути, щоб додати шорткод або певний текст.. Створення кнопки буде поділено на дві частини.
- Код для оголошення нового плагіна у functions.php.
- Скрипт JS для додавання кнопки до редактора;
Перший скрипт буде тісно пов'язаний із файлом JS. Отже давайте я представлю вам 2 коду:
Додаємо скрипт у файл functions.php
// Hooks your functions into the correct filters function my_add_mce_button() { // check user permissions if ( !поточний_користувач_може( 'edit_posts' ) && !поточний_користувач_може( 'edit_pages' ) ) { повернення; } // check if WYSIWYG is enabled if ( 'true' == get_user_option( 'rich_editing' ) ) { add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' ); add_filter( 'mce_buttons', 'my_register_mce_button' ); } } add_action('admin_head', 'my_add_mce_button'); // Declare script for new button function my_add_tinymce_plugin( $plugin_array ) { $plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/mce-button.js'; Повернення $plugin_масиву; } // Register new button in the editor function my_register_mce_button( $Кнопки ) { array_push( $Кнопки, 'my_mce_button' ); повернення $buttons; }
Додаємо javascript за адресою /wp-content/themes/intrepidity/js/mce-button.js
(функція() {
тинімс. ПлагінManager.add('my_mce_button', функція( Редактор, url ) {
editor.addButton('my_mce_button', {
text: 'Нова кнопка',
ікона: false,
onclick: функція() {
editor.insertContent('wp-admin.com.ua - уроки wordpress!');
}
});
});
})();Кнопка створена та вставляє текст.
Єдиний мінус такої кнопочки в тому, що вона займає багато місця в редакторі., тому я пропоную зробити кнопочку з іконкою.
Для налаштування іконок можна використовувати нові підключені стилі, для панелі адміністратора, додайте їх у файл functions.php:
функція my_shortcodes_mce_css() {
wp_enqueue_style('symple_shortcodes-tc', get_bloginfo('template_url').'/css/my-mce-style.css' );
}
add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' );Якщо стилі треба вантажити з плагіна, можна використовувати наступний код:
функція my_shortcodes_mce_css() {
wp_enqueue_style('symple_shortcodes-tc', plugins_url('/css/my-mce-style.css', __ФАЙЛ__) );
}
add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' );Створіть папку images у папці теми, якщо її там ще немає. До створеної папки додайте іконку з назвою check.png.
Далі додаємо стиль для майбутньої іконки у файл css/my-mce-style.css.
i.mce-i-my-mce-icon {
фон-зображення: url('.. /зображення/перевірка.png');
}Переробте раніше створений скрипт у папці js/mce-button.js, коментуйте напис для кнопки text: «Нова кнопка» і значок: false.
Додати новий параметр icon: «mce-i-my-mce-icon», який додасть до нової кнопки створений раніше клас у файлі стилів панелі адміністратора.
Якщо все зроблено правильно, то у вас з'явиться кнопка з іконкою, яка при натисканні буде додавати напис.
Ми з вами створили кнопку з іконкою, але при необхідності створити складний функціонал шаблону та безліч кнопок цей спосіб буде скрутним. До того ж незручно працювати коли багато кнопок на панелі. Зараз ми з вами постараємося розібратися у питанні “як додати більше вільного місця на панелі редактора?». Змініть код кнопки у файлі js/mce-button.js на який бачите нижче.
(функція() {
тинімс. ПлагінManager.add('my_mce_button', функція( Редактор, url ) {
editor.addButton('my_mce_button', {
/*text: 'Нова кнопка',
ікона: false,*/
ікона: 'my-mce-icon',
тип: 'menubutton',
Меню: [
{
text: 'Пункт 1',
Меню: [
{
text: "Підпункт 1",
onclick: функція() {
editor.insertContent('wp-admin.com.ua - уроки wordpress!');
}
},
{
text: "Підпункт 2",
onclick: функція() {
editor.insertContent('wp-admin.com.ua - уроки wordpress!');
}
}
]
},
{
text: 'Пункт 2',
Меню: [
{
text: "Підпункт 1",
onclick: функція() {
editor.insertContent('wp-admin.com.ua - уроки wordpress!!');
}
},
{
text: "Підпункт 2",
onclick: функція() {
editor.insertContent('wp-admin.com.ua - уроки wordpress!');
}
}
]
}
]
});
});
})();Якщо ви уважно придивіться до структури коду, то зрозумієте що в ньому немає нічого складного і переробити його не складе великої праці. Ось результат, який ми отримаємо:
Якщо ви до цього зробили все правильно, то побачите, що при виборі одного з підпунктів меню в полі для тексту з'явиться напис “wp-admin.com.ua – уроки wordpress!».
Найчастіше вставка тексту без зміни не дуже корисна, оскільки при вставці шорткоду необхідно вказувати додаткові опції, які керуватимуть роботою шорткоду. Для вказівки опцій у шорткоді можна використовувати спливаюче вікно, давайте розберемося разом як його створити.
Спливне вікно tinymce WordPress
Для створення спливаючого вікна необхідно змінити код у файлі js/mce-button.js на вказаний нижче. Впевнений, якщо до цього ви читали уважно і все у вас виходило, то проблем розібратися в коді нижче у вас не виникне.
(функція() {
тинімс. ПлагінManager.add('my_mce_button', функція( Редактор, url ) {
editor.addButton('my_mce_button', {
/*text: 'Нова кнопка',
ікона: false,*/
ікона: 'my-mce-icon',
тип: 'menubutton',
Меню: [
{
text: 'Пункт 1',
Меню: [
{
text: "Підпункт 1",
onclick: функція() {
editor.insertContent('wp-admin.com.ua - уроки wordpress!');
}
},
{
text: "Підпункт 2",
onclick: функція() {
editor.insertContent('wp-admin.com.ua - уроки wordpress!');
}
}
]
},
{
text: 'Пункт 2',
Меню: [
{
text: "Підпункт 1",
onclick: функція() {
editor.insertContent('wp-admin.com.ua - уроки wordpress!!');
}
},
{
text: 'Спливаюче вікно',
onclick: функція() {
editor.windowManager.open( {
title: "Вставити довільний шорткод",
body: [
{
тип: "текстове поле",
name: 'textboxName',
label: 'Текстове поле',
value: '30'
},
{
тип: "текстове поле",
name: 'багаторядкове ім'я',
label: "Багаторядкове текстове поле",
value: "Тут можна сказати багато речей",
багаторядковий: true,
minWidth: 300,
minHeight: 100
},
{
тип: 'listbox',
name: 'listboxName',
label: 'Поле списку',
'Цінності': [
{text: 'Варіант 1', value: '1'},
{text: 'Варіант 2', value: '2'},
{text: 'Варіант 3', value: '3'}
]
}
],
onsubmit: функція( д ) {
editor.insertContent( '[random_shortcode текстове поле="' + e.data.textboxName + '" багаторядковий="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
})();Ось що вийшло в результаті виконаної роботи зі спливаючою вікном.
Висновки уроку
Що далі? Далі все у ваших руках, ви можете самі придумати яким чином будете використовувати шорткод і панель інструментів редактора tinymce. Урок вийшов непростий і трохи плутаний, але ми і не на першому уроці., час вчитися розбиратися в коді, якщо не вийде, але захочете розібратися як вбудовувати код у вашу тему можу виділити час і провести платне заняття.
Джерело ідей та натхнення до уроку:
https://www.wpexplorer.com/wordpress-tinymce-tweaks/
/*
- Базовий курс з веб-дизайну;
- Верстка сайтів;
- Загальний курс CMS WordPress та продовження курсу з розробки шаблонів;
- Розробка сайтів на PHP.
