Погледнете вашия визуален редактор на WordPress. Има някои стандартни опции за форматиране и стилизиране на съдържанието ви, но не много по отношение на персонализирането, за да направите вашите публикации и страници изглеждат малко наистина фантастични.
Сега може да знаете, че имате възможност да прескачате напред и назад между редакторите Text и Visual в WordPress, за да хвърлите CSS за създаване на неща като бутони и текстови блокове, но това е болка и ако нямате много опит за редактиране на код Текстовият редактор изглежда малко смущаващ.
Няма ли да е по-лесно, ако можете да създадете свои собствени персонализирани стилове, да ги поставите в падащо меню в редактора на WordPress и да изберете да ги използвате винаги, когато имате нужда от тях? Да, много по-лесно е, затова искаме да очертаем как да направим това тук. Имайте предвид, че въпреки че се опитваме да направим този процес възможно най-прост, помага да имате малко CSS знания, ако искате да откриете пълните предимства на персонализираните стилове.
Нека разгледаме как да добавяме персонализирани стилове към визуалния редактор на WordPress.
Contents
Добавете персонализирани стилове към визуален редактор на WordPress, като добавите код
Тази първа опция изисква да знаете малко за това как да включите и модифицирате CSS, но ще ви разгледам малко, за да ви помогна да научите основите, за да можете да използвате тези знания в бъдеще. Това е хубав вариант, ако не искате да претегляте сайта си с плъгин.
Смисълът на това е да добавите ново падащо меню, което включва персонализирани стилове във вашия визуален редактор на WordPress, което ви дава възможност да избирате елементи в редактора си и след това да прилагате персонализирани стилове към тях. Ако разработвате нова тема, намерете своето functions.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-ти ред.
И така, сега, когато сте активирали елемента от менюто, е време да добавите свои персонализирани стилове, които да използвате в своите публикации. Вземете посочения по-долу код и го поставете във вашия functions.php файл, който ще добави 2 нови стила към падащото меню „Формати“ – „Темен бутон“ и „Маркирай“.
/ **
* Добавете персонализирани стилове към падащото меню формати mce
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
функция myprefix_add_format_styles ($ init_array) {
$ style_formats = масив (
// Всяко дете на масива е формат със собствени настройки - добавете толкова, колкото искате
масив (
'title' => __ ('Тематичен бутон', 'text-domain'), // Заглавие за падащото меню
'selector' => 'a', // Елемент за насочване в редактора
'класове' => 'бутон за тема' // Име на клас, използвано за 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”). Вторият формат, който добавихме „Highlight“, няма параметър за избор, а по-скоро параметър „вграден“, който му казва да прилага стила към какъвто и да е текст, който сте маркирали в редактора си, и да го увие в педя с вашето уникално име на клас. Можете да видите пример от темата ни Total 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 и го активирайте на вашия WordPress сайт.
Отидете на Настройки> prof.styles на TinyMCE от лявата страна на вашето табло за управление на WordPress. Тук променяте настройките си за приставката.
Плъгинът ви позволява да изберете къде са вашите таблици стилове или къде искате да ги поставите. Препоръчва се да създадете нова персонализирана директория. Изберете третата опция и дайте име на вашата директория, след което се придвижете надолу по страницата, за да щракнете върху вашата Запазване на настройките опция, преди да преминете към следващата стъпка.
След като запазите настройките, превъртете надолу, за да изберете бутона Добавяне на нов стил.
Това е мястото, където персонализирате това, което искате да изглеждат вашите персонализирани стилове. Това всъщност е прост уеб-базиран редактор, който генерира CSS кода за вас. Въведете заглавие за всичко, което искате да се покаже в падащото меню. Изберете дали искате селектор, вграден или блоков тип. Чувствайте се свободни да използвате екрана по-горе, за да попълните CSS класовете и стиловете, или да създадете свой собствен, в зависимост от това, което планирате да използвате падащото меню. След като сте готови, кликнете върху Запазване на настройките в долната част на страницата.
Сега е време да видим как изглежда новият персонализиран стил във вашия редактор. Отворете нова публикация или страница и намерете падащото меню Формати в лявата част на редактора Visual. Показва се във втория ред. След като щракнете върху падащото меню, той ще разкрие новия стил, който току-що сте създали.
Кликнете върху опцията Big Blue Button или каквото и да сте създали, за да видите как се разкрива в редактора ви. За да го използвате, просто маркирайте текста, който искате да форматирате, след това кликнете върху опцията и voila!
заключение
Това е всичко за сега! Винаги можете да научите повече за това как да използвате нови стилове, като проверите Страница с кодекс на WordPress посветена на тази тема.
Уведомете ни в секцията за коментари, ако имате въпроси относно добавянето на персонализирани стилове към визуалния редактор на WordPress. И не се колебайте да споделяте всички необичайни стилове, които сте създали, за да изглежда сайтът ви малко по-хубав!
