Ako pridať vlastné štýly do vizuálneho editora WordPress

Ako pridať vlastné štýly do vizuálneho editora WordPress

Prezrite si vizuálny editor WordPress. Existujú niektoré štandardné možnosti formátovania a úpravy obsahu, ale nie príliš veľa z hľadiska prispôsobenia, aby vaše príspevky a stránky vyzerali trochu skutočne fantázie.


Editor WordPress

Teraz možno viete, že máte možnosť preskočiť tam a späť medzi textovými a vizuálnymi editormi v WordPress a hádzať niektoré CSS na vytváranie vecí, ako sú tlačidlá a textové bloky, ale je to bolesť, a ak nemáte veľa skúseností s úpravou kódu, textový editor sa zdá trochu zastrašujúci.

Nebolo by to jednoduchšie, keby ste si mohli vytvoriť svoje vlastné štýly, umiestniť ich do rozbaľovacej ponuky v editore WordPress a vybrať si ich, kedykoľvek ich budete potrebovať? Áno, je to omnoho jednoduchšie, takže tu chceme načrtnúť, ako to urobiť. Nezabúdajte, že aj keď sa snažíme tento proces čo najjednoduchší, pomôže vám to trochu poznať CSS, ak chcete objaviť všetky výhody vlastných štýlov.

Poďme sa pozrieť, ako pridať vlastné štýly do vizuálneho editora WordPress.

Pridajte vlastné štýly do vizuálneho editora WordPress pridaním kódu

Táto prvá možnosť vyžaduje, aby ste sa dozvedeli niečo o tom, ako začleniť a upraviť CSS, ale urobím si malý návod, ktorý vám pomôže naučiť sa základy, aby ste ich mohli v budúcnosti využiť. Toto je pekná voľba, ak nechcete svoj web vážiť pomocou doplnku.

Zmyslom tohto je pridať novú rozbaľovaciu ponuku, ktorá obsahuje vlastné štýly vo vašom vizuálnom editore WordPress, ktorý vám dáva možnosť vybrať prvky v editore a potom na ne aplikovať vlastné štýly. Ak vyvíjate novú tému, nájdite si svoju functions.php súbor a umiestnite ho do tohto súboru alebo ak pracujete s už zabudovanou témou, vložte tento kód do súboru funkcie child.php.

function myprefix_mce_buttons_1 ($ buttons) {
array_unshift ($ buttons, 'styleselect');
návratové tlačidlá $;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Vráťte sa späť do editora na jednom z vašich príspevkov WordPress a teraz by ste mali vidieť nové tlačidlo „Formáty“ v hornom riadku editora. Všimnite si, ako sme sa pripojili k „mce_buttons_1“? Toto umiestni tlačidlo ponuky formátov do prvého riadku editora mce. Môžete tiež použiť filter „mce_buttons_2“ a umiestniť ho do druhého riadku alebo „mce_buttons_3“ a umiestniť ho do 3. riadka..

Teraz, keď ste povolili položku ponuky, je čas pridať vlastné štýly, ktoré sa majú použiť v rámci vašich príspevkov. Vezmite kód uvedený nižšie a vložte ho do svojho functions.php súbor, ktorý do rozbaľovacej ponuky Formáty pridá 2 nové štýly – „Tlačidlo Téma“ a „Zvýrazniť“.

/ **
* Pridajte vlastné štýly do rozbaľovacej ponuky formátov mce
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
function myprefix_add_format_styles ($ init_array) {
$ style_formats = array (
// Každé dieťa poľa je formát s vlastnými nastaveniami - pridajte toľko, koľko chcete
pole (
'title' => __ ('Button Theme', 'text-domain'), // Názov pre rozbaľovaciu ponuku
'selector' => 'a', // Element, na ktorý sa má editor zamerať
'classes' => 'theme-button' // Názov triedy používaný pre CSS
),
pole (
'title' => __ ('Highlight', 'text-domain'), // Názov pre rozbaľovaciu ponuku
'inline' => 'span', // Zabalte rozpätie okolo vybratého obsahu
'classes' => 'text-highlight' // Názov triedy používaný pre CSS
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
return $ init_array;
}
add_filter ('tiny_mce_before_init', 'myprefix_add_format_styles');

Názvy môžete zmeniť tak, aby sa v rozbaľovacej ponuke zobrazovali rôzne názvy, pridávať alebo odoberať položky z poľa atď. V tomto kóde môžete upraviť takmer všetko, aby ste odhalili svoje vlastné štýly formátovania. WordPress Codex pre podrobnejšie vysvetlenie akceptovaných parametrov a návratových hodnôt.

Teraz, keď máte nové štýly, môžete zvýrazniť obsah v editore a použiť štýly. Všimnite si, ako formát „Tlačidlo témy“ obsahuje parameter selektora? To znamená, že štýl možno použiť iba na konkrétny selektor (v tomto prípade na značku „a“ alebo „link“). Druhý formát, ktorý sme pridali „Zvýrazniť“, nemá parameter selektora, ale skôr „inline“ parameter, ktorý mu povie, aby použil štýl na akýkoľvek text, ktorý ste zvýraznili v editore, a zalomil ho do rozpätia s vaším jedinečným názvom triedy. Môžete vidieť príklad z našej témy Total WordPress o tom, ako sme používali formáty, aby používatelia mohli ľahko použiť vzhľad kontrolného zoznamu na všetky guľky v editore..

check-list

Teraz môžete používať svoje vlastné formáty, ale nebudú vyzerať inak, kým na svoje stránky nepridáte nejaké vlastné CSS, aby ste ich upravili. Mali by ste vyhľadať šablónu štýlov pre svoju tému (ak si vytvoríte vlastnú) alebo podradenú tému a do súboru vložte nasledujúci kód CSS..

.tlačidlo témy {
displej: vložený blok;
čalúnenie: 10 15px;
farba: #fff;
pozadie: # 1796c6;
dekorácia textu: žiadna;
}
.theme-button: hover {
dekorácia textu: žiadna;
nepriehľadnosť: 0,8;
}
.text-highlight {
pozadie: # FFFF00;
}

Teraz to bude pridávať štýl k vašim novým formátom pre front-end, takže keď sa používa, môžete ich vidieť naživo. Jéj! Nebolo by však pekné vidieť vaše štýly v skutočnom editore, keď sa používajú? Aby ste to dosiahli, budete musieť vo WordPressu využiť funkciu „editor štýlov“. Ak vytvárate svoju vlastnú tému, budete chcieť vo svojej téme vytvoriť nový súbor css s názvom „editor-style.css“ (môžete pomenovať čokoľvek, čo chcete, uistite sa, že úryvok nižšie zodpovedajúcim spôsobom upravíte) pomocou vlastného CSS pridané pre vaše formáty a potom pridajte nižšie uvedenú funkciu a načítať ju do koncového rozhrania.

function myprefix_theme_add_editor_styles () {
add_editor_style ('editor-style.css');
}
add_action ('init', 'myprefix_theme_add_editor_styles');

Ak pracujete s témou niekoho iného, ​​budete ju musieť pridať do svojej podradenej témy. Nezabudnite jej dať jedinečný názov, aby nebol v rozpore s vašou nadradenou témou alebo ak už vaša nadradená téma už obsahuje súbor CSS pre editor, ktorý môžete skutočne skopírovať a vložiť do svojej podradenej témy (bez pridania kódu PHP vyššie), potom pridajte nový CSS, pretože WordPress najskôr skontroluje podradenú tému pred načítaním súboru editora CSS rodičovskej témy a ak ho nájde, namiesto toho ho načítať z podradenej témy.

Pridajte vlastné štýly do vizuálneho editora WordPress pomocou pekného doplnku

Ak nemáte čas hrať sa s kódom alebo si neviete rady prísť na svoje, je tu dobrá správa. Existuje doplnok, ktorý vám umožní dokončiť presne to, čo sme práve urobili vyššie, bez toho, aby ste sa museli obchádzať s kódom.

Doplnok TinyMCE Custom Styles

Jednoducho vyhľadajte, nainštalujte a aktivujte Doplnok TinyMCE Custom Styles a aktivujte ho na svojom webe WordPress.

Nastavenia vlastných štýlov TinyMCE

Ísť do Nastavenia> Profily TinyMCE na ľavej strane panela WordPress. Tu upravíte nastavenia doplnku.

Nastavenia vlastných štýlov TinyMCE

Doplnok vám umožňuje vybrať si, kde sa nachádzajú vaše štýly šablón alebo kam ich chcete umiestniť. Odporúča sa vytvoriť nový vlastný adresár. Vyberte tretiu možnosť a pomenujte adresár, potom prejdite nadol na stránku a kliknite na ikonu Uložiť nastavenia pred ďalším krokom.

Vlastné štýly TinyMCE Pridať nové

Po uložení nastavení prejdite nadol a vyberte tlačidlo Pridať nový štýl.

Možnosti vlastných štýlov TinyMCE

Tu si môžete prispôsobiť vzhľad svojich vlastných štýlov. Je to v podstate jednoduchý webový editor, ktorý pre vás vygeneruje kód CSS. V rozbaľovacej ponuke zadajte názov pre všetko, čo chcete zobraziť. Vyberte, či chcete zvoliť selektor, vložený alebo blok. Neváhajte použiť vyššie uvedenú snímku obrazovky na vyplnenie tried a štýlov CSS alebo si vytvorte vlastné v závislosti od toho, na čo plánujete použiť rozbaľovaciu ponuku. Po dokončení kliknite na tlačidlo Uložiť nastavenia v dolnej časti stránky.

Formát vlastných štýlov TinyMCE

Teraz je čas zistiť, ako nový vlastný štýl vyzerá v editore. Otvorte nový príspevok alebo stránku a vyhľadajte rozbaľovaciu ponuku Formáty na ľavej strane vizuálneho editora. Zobrazí sa v druhom riadku. Po kliknutí na rozbaľovaciu ponuku sa zobrazí nový štýl, ktorý ste práve vytvorili.

Používaný formát vlastných štýlov TinyMCE

Kliknutím na možnosť Veľkého modrého tlačidla alebo na čokoľvek, čo ste vytvorili, sa zobrazí v editori. Ak ju chcete použiť, jednoducho zvýraznite text, ktorý chcete naformátovať, potom kliknite na požadovanú možnosť a voila!

záver

To je zatiaľ všetko! Vždy sa môžete dozvedieť viac o tom, ako používať nové štýly, vyskúšaním WordPress kódová stránka venované tejto téme.

Ak máte nejaké otázky týkajúce sa pridania vlastných štýlov do vizuálneho editora WordPress, dajte nám vedieť v sekcii komentárov. Môžete tiež zdieľať akékoľvek neobvyklé štýly, ktoré ste vytvorili, aby vaše stránky vyzerali trochu krajšie!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me