Як додати спеціальні стилі у візуальний редактор WordPress

Як додати спеціальні стилі у візуальний редактор WordPress

Погляньте на свій візуальний редактор WordPress. Існує кілька стандартних варіантів форматування та стилізації вмісту, але не дуже з точки зору налаштування, щоб ваші публікації та сторінки виглядали трохи по-справжньому фантастичними.


WordPress Editor

Тепер ви можете знати, що у вас є можливість стрибати вперед і назад між текстовими та візуальними редакторами в WordPress, щоб вписати деякі CSS для створення таких речей, як кнопки та текстові блоки, але це біль, і якщо у вас немає багато досвіду редагування коду редактор тексту здається трохи залякуючим.

Чи не було б просто простіше, якби ви могли створити власні власні стилі, розмістити їх у спадному меню в редакторі WordPress та вибрати, коли ними потрібно? Так, це набагато простіше, тому ми хочемо окреслити, як це зробити тут. Майте на увазі, що хоча ми намагаємось зробити цей процес максимально простим, це допомагає мати трохи знань CSS, якщо ви хочете розкрити всі переваги користувацьких стилів.

Давайте розглянемо, як додати спеціальні стилі у візуальний редактор WordPress.

Додайте власні стилі у візуальний редактор WordPress, додавши код

Цей перший варіант вимагає, щоб ви трохи дізналися про те, як включити та змінити CSS, але я розповім вам трохи, щоб допомогти вам засвоїти основи, щоб ви могли використовувати ці знання в майбутньому. Це хороший варіант, якщо ви не хочете зважувати свій сайт за допомогою плагіна.

Сенс цього полягає в тому, щоб додати нове спадне меню, яке включає власні стилі у вашому візуальному редакторі WordPress, що дає вам можливість вибирати елементи у своєму редакторі, а потім застосовувати до них власні стилі. Якщо ви розробляєте нову тему, знайдіть своє function.php напишіть і введіть код нижче у цей файл або якщо ви працюєте з уже вбудованою темою, вставте цей код у функцію дочірньої теми.php.

функція myprefix_mce_buttons_1 ($ кнопки) {
array_unshift ($ кнопки, 'styleselect');
повернути $ кнопки;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Поверніться до редактора в одному зі своїх публікацій WordPress, і тепер ви побачите нову кнопку “Формати” у верхньому рядку редактора. Зауважте, як ми підключились до “mce_buttons_1? Це розміщує кнопку меню форматів у першому рядку редактора mce. Ви також можете використовувати фільтр “mce_buttons_2”, щоб розмістити його у другому ряду, або “mce_buttons_3”, щоб розмістити його у 3-му рядку.

Отже, тепер, коли ви ввімкнули пункт меню, саме час додати свої власні стилі, якими ви користуєтеся у своїх публікаціях. Візьміть наведений нижче код і вставте його у свій function.php файл, який додасть 2 нових стилю до випадаючого меню “Формати” – “Кнопка теми” та “Виділити”.

/ **
* Додайте власні стилі у спадне меню форматів mce
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
функція myprefix_add_format_styles ($ init_array) {
$ style_formats = масив (
// Кожен дочірній масив має формат із власними налаштуваннями - додайте стільки, скільки вам потрібно
масив (
'title' => __ ('Кнопка теми', 'text-domain'), // Заголовок для спадного меню
'selector' => 'a', // Елемент для націлювання в редакторі
'class' => 'кнопка теми' // Назва класу, що використовується для CSS
),
масив (
'title' => __ ('Highlight', 'text-domain'), // Заголовок для випадаючого
'inline' => 'span', // Оберніть проміжок навколо вибраного вмісту
'class' => 'text -light' // Назва класу, що використовується для CSS
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
повернути $ init_array;
}
add_filter ('tiny_mce_before_init', 'myprefix_add_format_styles');

Ви можете змінити заголовки, щоб відображати різні імена у спадному меню, додавати / видаляти елементи з масиву тощо. Ви можете змінити майже все, що в цьому коді, щоб виявити власні власні стилі формату, не забудьте перевірити WordPress Codex для більш поглибленого пояснення прийнятих параметрів та повернених значень.

Тепер, коли у вас є нові стилі, ви можете виділити вміст у своєму редакторі та застосувати стилі. Зверніть увагу, як у форматі “Кнопка теми” є параметр вибору? Це означає, що стиль можна застосувати лише до конкретного селектора (у цьому випадку тег “a” або “link”). У другому форматі, який ми додали “Виділити”, немає параметра селектора, а параметр “вбудований”, який дозволяє йому застосовувати стиль до будь-якого тексту, який ви виділили у своєму редакторі, і загорнув його в проміжок зі своїм унікальним іменем класу. Ви можете побачити приклад з нашої теми WordPress про те, як ми використовували формати, щоб користувачі могли легко застосувати вигляд контрольного списку до будь-яких куль у редакторі.

контрольний список

Тепер ви можете використовувати свої власні формати, але вони не виглядатимуть інакше, поки ви не додасте на свій сайт якийсь спеціальний CSS для їх стилізації. Вам слід знайти таблицю стилів для вашої теми (якщо ви створюєте власну) або дочірню тему та вставити наступний CSS-код у файл.

.кнопка теми {
дисплей: вбудований блок;
підкладка: 10 15px;
колір: #fff;
фон: # 1796c6;
оформлення тексту: немає;
}
.кнопка теми: наведіть курсор {
оформлення тексту: немає;
непрозорість: 0,8;
}
.підсвітка тексту {
фон: # FFFF00;
}

Тепер це додасть стилізацію до ваших нових форматів для передньої частини, тому при застосуванні ви можете бачити їх у прямому ефірі. Так! Але хіба не добре було б бачити ваші стилі у фактичному редакторі під час їх застосування? Для цього вам потрібно буде скористатися функцією «редактор стилів таблиці» в WordPress. Якщо ви будуєте власну тему, то вам захочеться створити новий файл css у вашій темі під назвою “editor-style.css” (ви можете назвати його як завгодно, просто обов’язково відредагуйте фрагмент нижче відповідно) за допомогою спеціального CSS додано для ваших форматів, а потім додайте функцію нижче, щоб завантажити її в бекенд.

функція myprefix_theme_add_editor_styles () {
add_editor_style ('editor-style.css');
}
добавлення ('init', 'myprefix_theme_add_editor_styles');

Якщо ви працюєте з чужою темою, тоді вам потрібно буде додати це в дочірню тему, просто не забудьте вказати це унікальне ім’я, щоб воно не суперечило вашій батьківській темі або якщо у вашої батьківської теми вже є файл CSS для редакторі ви можете фактично його скопіювати та вставити у дочірню тему (без додавання коду PHP вище), а потім додати новий CSS, оскільки WordPress спочатку перевірить дочірню тему перед завантаженням CSS-файлу редактора батьківської теми, і якщо він знайде її, завантажити замість цього дочірню тему.

Додайте власні стилі у візуальний редактор WordPress із хорошим плагіном

Якщо у вас немає часу пограти з кодом або ви не можете зрозуміти його самостійно, є хороші новини. Існує плагін, який дозволяє виконати саме те, що ми зробили вище, без необхідності вкручувати код.

Плагін користувальницьких стилів TinyMCE

Просто шукайте, встановлюйте та активуйте Плагін користувальницьких стилів TinyMCE і активувати його на своєму сайті WordPress.

Налаштування спеціальних стилів TinyMCE

Йти до Налаштування> prof.styles TinyMCE ліворуч на інформаційній панелі WordPress. Тут ви змінюєте свої налаштування для плагіна.

Налаштування спеціальних стилів TinyMCE

Плагін дозволяє вам вибрати, де перебувають ваші таблиці стилів або де ви хочете розмістити їх. Рекомендується створити новий спеціальний каталог. Виберіть третій варіант і вкажіть ім’я свого каталогу, а потім перейдіть на сторінку, щоб натиснути свою Збережіть налаштування варіант, перш ніж перейти до наступного кроку.

Спеціальні стилі TinyMCE Додати нове

Після збереження налаштувань прокрутіть вниз, щоб вибрати кнопку Додати новий стиль.

Параметри користувальницьких стилів TinyMCE

Тут ви налаштовуєте те, як ви хочете, щоб виглядали власні стилі. Це в основному простий веб-редактор, який генерує CSS-код для вас. Введіть заголовок для того, що ви хочете відобразити у спадному меню. Виберіть, чи потрібно вибирати, вбудовувати чи блокувати тип. Сміливо використовуйте знімок екрана для заповнення класів і стилів CSS або створіть свій власний, залежно від того, для чого ви плануєте використовувати спадне меню. Після завершення натисніть кнопку “Зберегти налаштування” внизу сторінки.

Формат користувальницьких стилів TinyMCE

Тепер саме час побачити, як виглядає новий користувацький стиль у вашому редакторі. Відкрийте нову публікацію чи сторінку та знайдіть спадне меню Формати з лівого боку редактора Visual. Він відображається у другому рядку. Після натискання на спадне меню відкриється новий стиль, який ви тільки що створили.

Формат користувальницьких стилів TinyMCE у використанні

Клацніть на опцію “Велика синя кнопка” або все, що ви створили, щоб побачити, як вона з’явилася у вашому редакторі. Щоб використовувати його, просто виділіть текст, який ви хочете відформатувати, а потім натисніть на свій варіант і голосуйте!

Висновок

Це все, що на даний момент! Ви завжди можете дізнатися більше про те, як використовувати нові стилі, перевіривши Сторінка кодексу WordPress присвячена цій темі.

Повідомте нас у розділі коментарів, якщо у вас є питання щодо того, як додати користувацькі стилі до візуального редактора WordPress. І сміливо діліться будь-якими незвичайними стилями, які ви створили, щоб ваш сайт виглядав трохи приємніше!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map