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

З причини того, що ви будете редагувати файли вашої теми, не забудьте зробити бекап вашої теми.

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

Цей код додати меню, що випадає styleselect у другому рядку кнопок. Якщо другий рядок у вас не видно, клікніть відповідну кнопку, щоб її відобразити.

У цьому коді ми додали три настройки в меню, що випадає. Блок контенту, синю і червону кнопки.

Блок - це назва блоку елемента для обробки виділеного тексту. Ми використовували span. ви ж можете вказати будь-який інший елемент на ваш розсуд. Клас додасть CSS клас елементу.

Нижче CSS код, який ми використовували в прикладі.

Наступний спосіб працює точно так само, як ми показали вище, однак у нього в арсеналі є веб-інтерфейс, тому вам не доведеться правити файли теми вручну.

Для початку вам необхідно встановити і активувати плагін TinyMCE Advanced Professsional Formats and Styles. Після установки, перейдіть в Налаштування »TinyMCE prof. Styles для конфігурації плагіна.

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

Для додавання нових опцій стилів, необхідно прокрутити сторінку налаштувань до секції стилів і натиснути на кнопку Add new style.

Спочатку вкажіть заголовок для стилю. Цей заголовок буде відображатися в випадаючому меню. Потім виберіть типу елемента: inline, block, або selector. Після цього додайте CSS клас, а потім - власні CSS правила як показано на скріншоті нижче.

Після того, як ви додали стилі CSS, просто клікніть на кнопку Save Settings.

Не забувайте, по можливості, оцінювати сподобалися записи кількістю зірочок на ваш розсуд.