Редакторът за публикации в WordPress, както подсказва и името му, има за цел да ви позволи да редактирате публикации и съдържание. По подразбиране той не ви позволява да добавяте персонализирани класове по CSS. Ако искате да добавите персонализирани стилове или класове на CSS, единственият начин е да превключите към режим "Text" и да го добавите към HTML кода.

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

Има няколко начина, по които можете да добавяте опции за персонализиран стил в WordPress редактора за публикации. Първата е да използвате безплатна приставка, а втората - да добавите кодов фрагмент. И двата метода работят много по подобен начин, така че следвайте този, с който се чувствате добре.

Забележка : Преди да продължите, предполагам, че знаете основни HTML и CSS и разбирате неща като CSS класове, елементи на ниво блок, HTML елементи, атрибути и т.н.

1. Използване на приставка

Най-лесният начин да добавите опции за персонализиран стил в редактора на WordPress пост е да използвате плъгин, наречен TinyMCE Custom Styles.

Доброто нещо за тази приставка е, че автоматично създава редактор на стилове, където можете да добавяте персонализирани стилове на CSS. Това е много полезно, когато искате да видите стилове от предния край, свързани с връзки, изображения, формуляри, бутони и т.н., приложени в редактора на публикациите.

1. За да започнете, изтеглете, инсталирайте и активирайте TinyMCE Custom Styles като всяка друга WordPress плъгин. След активирането отворете страницата за настройки на приставките, като отворите "Настройки -> Потребителски стилове TinyMCE".

2. Веднага след прилепа приставката ще покаже съобщение за грешка с искане да избере къде искате да поставите файла със стилове на редактора. В зависимост от темата, можете да избирате между три варианта. Прочетете внимателно тези опции и изберете този, който е подходящ за вас. В моя случай избрах втория вариант, защото използвам персонализирана тема на Genesis. Кликнете върху бутона "Запазване на всички настройки", за да запазите промените.

3. Превъртете надолу и кликнете върху бутона "Добавяне на нов стил". Сега въведете името на стила, изберете тип (т.е. инлайн, блок или селектор), въведете стойността на типа и след това класа CSS.

4. От дясната страна не забравяйте да изберете дали елементът е "Wrapper" или не. Ако изберете тази опция, стилът ще създаде нов елемент на ниво блок около избрания елемент на ниво блок в редактора на публикациите.

5. Ако искате, можете дори директно да добавите персонализирани стилове на CSS, като кликнете върху "Добавяне на нов стил", който се показва в категорията "Стилове на CSS". Препоръчваме ви обаче да добавите тези стилове в файла "editor-style.css", намиращ се в директорията ви с теми (ако сте избрали втората опция като мен във втората стъпка). Улеснява управлението.

6. Щом приключите, кликнете върху бутона "Запазване на всички настройки", който се появява в края на страницата.

7. Това е всичко. От сега нататък ще видите ново падащо меню, наречено "Формати" в редактора на публикациите. В това падащо меню можете да намерите новата добавена опция за персонализиран стил заедно с други предварително конфигурирани такива. За да използвате стил, просто кликнете върху него и необходимия CSS код ще бъде автоматично добавен към редактора на публикациите. Виждате този код в текстовия режим.

8. Ако сте добавили необходимите стилове към файла editor-style.css, тези стилове ще бъдат отразени в редактора за публикации, когато използвате опцията за стил от падащото меню.

В бъдеще, ако деактивирате или премахнете приставката, стиловата таблица на редакторите няма да бъде изтрита. Въпреки това, вече нямате достъп до персонализираните опции в редактора на публикациите.

Свързани : Как да изтриете неизползвани таблици в WordPress

2. Ръчен метод

Ако не искате да използвате приставка, можете да постигнете едно и също нещо, като добавите прост кодов фрагмент към файла "functions.php". Има две части към това: едната е за добавяне на бутона към лентата с инструменти за вмъкване на CSS код, а втората е да се направи CSS стил на живо в редактора за публикации.

Добавете персонализирани стилови бутони за CSS към лентата с инструменти

Добавете следното в края на файла "functions.php". Този код всъщност се осигурява от самия WordPress.

 // Функция за обратно извикване за вмъкване на "styleselect" в функцията $ array function my_mce_buttons_2 ($ buttons) {array_unshift ($ buttons, 'styleselect'); връщане на $ бутони; } // Регистрирайте обратно повикването си до съответния филтър add_filter ('mce_buttons_2', 'my_mce_buttons_2'); // Функция за обратно извикване за филтриране на функцията MCE settings my_mce_before_init_insert_formats ($ init_array) {// Дефиниране на style_formats array $ style_formats = array (// Всяко детето от масива е формат с неговия собствен масив за настройки ('title' => '.translation', 'block' => 'blockquote', 'classes' => 'превод', 'wrapper' => true, ) array ('title' => ' 'classes' => 'rtl', 'wrapper' => true, ) array ('title' => '.ltr⇢', 'block' => 'blockquote', 'classes' => wrapper '=> true, );); // Поставете масива, JSON ENCODED, в 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); връщане $ init_array; } / / Прикачи обратно обратно към 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');

Трябва да персонализирате кода, за да отразите опциите за вашия стил. Във горния код всеки масив е отделна опция за стил. Въведете заглавието на стила до "заглавие", тип блок до "блок", CSS класа до "класове" и ако елементът е обвивка, въведете "true" до "wrapper". Ако не е, въведете "фалшиво".

Всеки път, когато искате да добавите нова опция за стил, просто дублирайте масива и променете полетата. В моя случай аз запълних първия масив, за да отразя опцията "Синя Бутон".

Щом приключите с персонализирането, запазете и качете променения файл "functions.php" на вашия сървър.

Създайте стиловата таблица на редактора

Създайте файл с името "editor-style.css". Сега добавете съответните CSS стилове, които искате да видите в редактора на публикациите. Не забравяйте, че класовете CSS, които създавате в файла "редактор-style.css", трябва да съвпадат с класовете CSS в горния код на опциите за стилове.

Сега отворете файла "functions.php" на темата си и добавете следния код.

 // Добавяне на персонализирана функция за stylesheet editor mte_add_editor_styles () {add_editor_style ('editor-style.css'); } add_action ("init", "mte_add_editor_styles");

Качвайте файловете "editor-style.css" и "functions.php" на вашия сървър. Това е всичко, което трябва да направите. Отсега нататък можете да използвате опциите за персонализиран стил от редактора на публикациите на WordPress.

Можете да видите стиловете, прилагани в реално време.

Коментирайте по-долу споделяйки вашите мисли и опит относно използването на горепосочените методи, за да добавите опции за персонализиран стил в редактора на публикациите на WordPress.