Chcete do vizuálneho editora WordPress pridať vlastné štýly? Pridanie vlastných štýlov vám umožní rýchlo použiť formátovanie bez použitia textového editora. V tomto článku si ukážeme, ako pridať vlastné štýly do vizuálneho editora WordPress.
Poznámka: Tento tutoriál vyžaduje základné znalosti CSS.
keď budete potrebujete do vizuálneho editora WordPress pridať vlastný štýl?
V predvolenom nastavení vizuálny editor WordPress ponúka základné možnosti formátovania a štýlu. Niekedy však budete musieť mať po ruke vlastné štýly, ktoré vám umožnia napríklad pridať tlačidlá CSS, obsah, háčiky atď.
Vždy môžete prepnúť z vizuálneho editora do textového editora a pridať vlastný kód HTML a CSS. Ak ale určité štýly používate pravidelne, bolo by lepšie pridať ich do vizuálneho editora, aby ste ich mohli ľahko znova použiť.
To vám ušetrí obrovské množstvo času a tiež vám umožní používať všade rovnaké štýly webové stránky.
Čo je dôležitejšie, môžete ľahko upravovať alebo aktualizovať štýly bez toho, aby ste museli upravovať články na svojich stránkach.
Teraz zistíme, ako to urobiť na WordPress.
Metóda 1: Pridajte vlastný štýl pomocou doplnku
Prvá vec, ktorú musíte urobiť, je nainštalovať a aktivovať doplnok “ Vlastné štýly TinyMCE ". Ďalšie podrobnosti nájdete v našej príručke krok za krokom, ako nainštalovať a WordPress Plugin.
Po aktivácii musíte navštíviť stránku „ Nastavenia> Nastavenia »TinyMCE vlastné štýly Konfigurácia nastavení doplnku.
Doplnok vám umožňuje vybrať umiestnenie súborov so štýlmi. Môže použiť váš motív alebo štýl podriadeného motívu, prípadne si môžete vybrať vlastné umiestnenie.
Potom musíte kliknúť na tlačidlo „ uložte všetky nastavenia Uloženie nastavení.
Teraz môžete pridať svoje vlastné štýly. Musíte prejsť do sekcie štýlu a kliknúť na tlačidlo Pridať nový štýl ".
Najprv musíte zadať názov štýlu. Tento nadpis sa zobrazí v rozbaľovacej ponuke. Potom musíte definovať. Či už ide o riadok, blok alebo výberový prvok.
Potom pridajte triedu CSS a potom pridajte svoje pravidlá CSS, ako je znázornené na obrázku nižšie.
Po pridaní štýlu CSS zmeny uložte kliknutím na tlačidlo „uložiť všetky nastavenia“.
Teraz môžete upraviť existujúci článok alebo vytvoriť nový. Formát si všimnete v rozbaľovacej ponuke v druhom riadku vizuálneho editora WordPress.
Stačí vybrať text v editore a potom z rozbaľovacej ponuky zvoliť svoj vlastný štýl, ktorý chcete použiť.
Teraz si môžete zobraziť ukážku svojho článku a zistiť, či sa vaše vlastné štýly uplatňujú správne.
Metóda 2: Ručné pridanie štýlov do vizuálneho editora
Táto metóda vyžaduje, aby ste manuálne pridali kód do svojich súborov WordPress. Ak to robíte prvýkrát, pozrite si náš návod, ako pridať a WordPress Plugin.
Krok 1: Pridajte vlastný štýl z rozbaľovacej ponuky vizuálneho editora WordPress.
Najskôr pridáme rozbaľovaciu ponuku vizuálneho editora WordPress. Táto rozbaľovacia ponuka nám potom umožní zvoliť a použiť naše vlastné štýly.
Musíte pridať nasledujúci kód do súboru functions.php alebo do vášho pluginu.
function wpb_mce_buttons_2 ($ buttons) {array_unshift ($ buttons, 'styleselect'); vrátiť $ tlačidlá; } add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');
Krok 2: Ako pridať možnosti v rozbaľovacej ponuke
Teraz budete musieť do rozbaľovacej ponuky, ktorú ste práve vytvorili, pridať niektoré možnosti. Tieto možnosti potom budete môcť zvoliť a použiť z formátov v rozbaľovacej ponuke.
Pre tento tutoriál pridáme tri vlastné štýly na vytvorenie obsah blok a tlačidlá.
Budete musieť pridať nasledujúci kód do súboru "functions.php" vášho functions.php alebo do konkrétneho pluginu.
/ * * Funkcia spätného volania na filtrovanie nastavení MCE * / function my_mce_before_init_insert_formats ($ init_array) {// definujte pole style_formats $ style_formats = pole (/ * * každé dieťa potomka je formát s vlastnými nastaveniami * všimnite si, že každé pole má názov , argumenty bloku, triedy a wrapper * Nadpis je štítok, ktorý bude viditeľný v ponuke Formáty * Blok definuje, či sa jedná o rozpätie, div, selektor alebo vložený štýl * Triedy umožňujú definovať triedy CSS * Obálka, či pridať nový prvok na úrovni bloku okolo všetkých vybraných prvkov * / array ('title' => 'Content Block', 'block' => 'span', 'classes' => 'content-block', 'wrapper' => true,), pole ('title' => 'Modré tlačidlo', 'blok' => 'rozpätie', 'triedy' => 'modré tlačidlo', 'obal' => true,), pole ('title' => 'Červené tlačidlo', 'blok' => 'rozpätie', 'triedy' => 'červené tlačidlo', 'obal' => pravda,),); // Vložte pole, JSON ENCODED, do 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); vrátiť $ init_array; } // Pripojiť spätné volanie k 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');
Teraz môžete pridať nový príspevok na WordPress a kliknúť na formáty z rozbaľovacej ponuky vizuálneho editora. Všimnete si, že vaše vlastné štýly sú teraz viditeľné.
Ich výber však nijako nezmení vizuálny editor WordPress.
Krok 3: Pridanie štýlu CSS
Posledným krokom je pridanie pravidiel štýlov CSS pre vaše vlastné štýly.
Tento CSS budete musieť pridať do súboru style.css svojej témy alebo do podradenej témy.
.content-block {border: 1px solid #eee; výplň: 3px; pozadie: #ccc; maximálna šírka: 250px; plavák: vpravo; zarovnanie textu: na stred; } .obsah-blok: po {clear: both; } .modre-tlacidlo {farba pozadia: # 33bdef; -moz-border-radius: 6px; -webkit-border-radius: 6px; polomer okraja: 6px; orámovanie: 1px plná # 057fd0; display: inline-block; kurzor: bod; farba: #ffffff; výplň: 6px 24px; dekorácia textu: žiadny; } .červené tlačidlo {farba pozadia: # bc3315; -moz-border-radius: 6px; -webkit-border-radius: 6px; polomer okraja: 6px; orámovanie: 1px plná # 942911; display: inline-block; kurzor: bod; farba: #ffffff; výplň: 6px 24px; dekorácia textu: žiadny; }
Šablóna štýlov editora riadi vzhľad vášho obsah vo vizuálnom editore. Pozrite si dokumentáciu a zistite, ako nájsť umiestnenie tohto súboru.
Ak váš motív nemá súbor so štýlmi, môžete si ho kedykoľvek vytvoriť. Stačí vytvoriť nový súbor CSS a pomenovať ho " Custom-editor-style.css ".
Tento súbor musíte nahrať do koreňového adresára témy a potom tento kód pridať do súboru „functions.php“ témy.
funkcia my_theme_add_editor_styles () {add_editor_style ('custom-editor-style.css'); } add_action ('init', 'my_theme_add_editor_styles');
To je všetko. Práve ste pridali svoje vlastné štýly do vizuálneho editora WordPress. Teraz môžete vykonať úpravy, ktoré považujete za správne.
Neváhajte a zdieľajte tento tutoriál so svojimi priateľmi na obľúbených sociálnych sieťach.
