Jak přidat vlastní styly do editoru WordPress

Jak přidat vlastní styly do editoru WordPress

Podívejte se na vizuální editor WordPress. Existuje několik standardních možností formátování a stylingu obsahu, ale ne z hlediska přizpůsobení, aby vaše příspěvky a stránky vypadaly trochu opravdu fantasticky.


Editor WordPress

Nyní možná víte, že máte možnost přeskočit tam a zpět mezi textovými a vizuálními editory v WordPress a hodit nějaké CSS pro vytváření věcí, jako jsou tlačítka a textové bloky, ale je to bolest, a pokud nemáte mnoho zkušeností s úpravou kódu, textový editor se zdá trochu zastrašující.

Nebylo by jednodušší, kdybyste si mohli vytvořit své vlastní styly, umístit je do rozbalovací nabídky v editoru WordPress a rozhodnout se je použít kdykoli je potřebujete? Ano, je to mnohem snazší, takže zde chceme nastínit, jak to udělat. Mějte na paměti, že ačkoli se snažíme tento proces co nejjednodušší, pomůže vám získat trochu znalostí CSS, pokud chcete objevit všechny výhody vlastních stylů.

Pojďme se podívat, jak přidat vlastní styly do vizuálního editoru WordPress.

Přidání vlastních stylů do WordPress Visual Editoru přidáním kódu

Tato první možnost vyžaduje, abyste se dozvěděli něco o tom, jak začlenit a upravit CSS, ale dám vám malou procházku, která vám pomůže naučit se základy, abyste tyto znalosti mohli v budoucnu využít. Je to skvělá volba, pokud nechcete svůj web vážit pomocí pluginu.

Smyslem je přidání nové rozbalovací nabídky, která obsahuje vlastní styly ve vašem vizuálním editoru WordPress, který vám dává možnost vybrat prvky v editoru a poté na ně použít vlastní styly. Pokud vyvíjíte nové téma, vyhledejte svůj function.php soubor a umístěte kód níže do tohoto souboru, nebo pokud pracujete s již zabudovaným motivem, vložte tento kód do souboru funkcí podřízeného motivu .php.

function myprefix_mce_buttons_1 ($ buttons) {
array_unshift ($ buttons, 'styleselect');
tlačítka návratu $;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Vraťte se do editoru na jednom z vašich příspěvků WordPress a nyní byste měli vidět nové tlačítko „Formáty“ v horním řádku editoru. Všimněte si, jak jsme se zapojili do „mce_buttons_1? Tím umístíte tlačítko nabídky formátů do prvního řádku editoru mce. Můžete také použít filtr „mce_buttons_2“ a umístit jej do druhého řádku nebo „mce_buttons_3“ a umístit jej do 3. řádku.

Nyní, když jste povolili položku nabídky, je na čase přidat vlastní styly, které chcete použít ve svých příspěvcích. Vezměte níže uvedený kód a vložte jej do svého function.php soubor, který do rozbalovací nabídky Formáty přidá 2 nové styly – „Theme Button“ a „Highlight“.

/ **
* Přidejte vlastní styly do rozbalovací nabídky formátů mce
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
function myprefix_add_format_styles ($ init_array) {
$ style_formats = array (
// Každé dítě pole je formát s vlastním nastavením - přidejte tolik, kolik chcete
pole (
'title' => __ ('Theme Button', 'text-domain'), // Title for dropdown
'selector' => 'a', // Prvek, na který se má cílit v editoru
'classes' => 'theme-button' // Název třídy používaný pro CSS
),
pole (
'title' => __ ('Highlight', 'text-domain'), // Title for dropdown
'inline' => 'span', // Omotejte rozpětí kolem vybraného obsahu
'classes' => 'text-highlight' // Název třídy používaný pro CSS
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
return $ init_array;
}
add_filter ('tiny_mce_before_init', 'myprefix_add_format_styles');

V rozbalovací nabídce můžete změnit názvy tak, aby se v rozbalovací nabídce zobrazovaly různé názvy, přidávat / odebírat položky z pole atd. V tomto kódu můžete upravit téměř cokoli a odhalit tak své vlastní styly formátu. Nezapomeňte si vyzkoušet WordPress Codex pro podrobnější vysvětlení přijatých parametrů a návratových hodnot.

Nyní, když máte nové styly, můžete zvýraznit obsah v editoru a použít styly. Všimněte si, jak formát „Téma tlačítka“ má parametr selektoru? To znamená, že styl lze použít pouze na tento konkrétní selektor (v tomto případě značku „a“ nebo „link“). Druhý formát, který jsme přidali „Highlight“, nemá parametr selektoru, ale spíše „inline“ parametr, který mu říká, aby aplikoval styl na jakýkoli text, který jste zvýraznili v editoru, a zalomil jej do rozpětí s vaším jedinečným názvem třídy. Můžete vidět příklad z našeho tématu Total WordPress o tom, jak jsme používali formáty, takže uživatelé mohou snadno použít vzhled kontrolního seznamu na všechny odrážky v editoru.

kontrolní seznam

Nyní můžete používat vlastní formáty, ale nebudou vypadat jinak, dokud na svůj web nepřidáte nějaké vlastní CSS, abyste je upravili. Měli byste najít šablonu stylů pro své téma (pokud si sestavujete vlastní) nebo podřízené téma a do souboru vložte následující kód CSS..

.button-button {
display: inline-block;
čalounění: 10 15px;
barva: #fff;
pozadí: # 1796c6;
textové dekorace: žádné;
}
.theme-button: hover {
textové dekorace: žádné;
krytí: 0,8;
}
.text-highlight {
pozadí: # FFFF00;
}

Nyní to bude přidávat styl do vašich nových formátů pro front-end, takže při použití je můžete vidět naživo. Yay! Nebylo by však hezké vidět vaše styly v aktuálním editoru, když se používají? Chcete-li to provést, budete muset v aplikaci WordPress využít funkci editoru stylů editorů. Pokud vytváříte vlastní motiv, budete chtít vytvořit nový soubor css v motivu nazvaný „editor-style.css“ (můžete pojmenovat, co chcete, nezapomeňte odpovídajícím způsobem upravit úryvek níže) pomocí vlastního CSS přidán pro vaše formáty a poté přidejte níže uvedenou funkci a načtěte ji do backendu.

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

Pokud pracujete s tématem někoho jiného, ​​budete ho muset přidat do svého podřízeného tématu. Ujistěte se, že mu dáte jedinečný název, aby nebyl v rozporu s vaším nadřazeným motivem, nebo pokud vaše nadřazené téma již obsahuje soubor CSS pro editor, který můžete ve skutečnosti zkopírovat a vložit do svého podřízeného motivu (bez přidání kódu PHP výše), pak přidejte nový CSS, protože WordPress nejprve zkontroluje podřízené téma před načtením souboru CSS editoru rodičovského motivu a pokud jej najde, bude místo toho ho načtěte z podřízeného motivu.

Přidejte vlastní styly do editoru WordPress pomocí pěkného pluginu

Pokud nemáte čas si pohrávat s kódem, nebo si to nedokážete představit sami, je tu dobrá zpráva. K dispozici je plugin, který vám umožní dokončit přesně to, co jsme právě udělali výše, aniž byste se museli obcházet kódem.

Plugin uživatelských stylů TinyMCE

Jednoduše vyhledejte, nainstalujte a aktivujte Plugin TinyMCE Custom Styles a aktivujte ji na svém webu WordPress.

Nastavení uživatelských stylů TinyMCE

Jít do Nastavení> TinyMCE prof.styles na levé straně panelu WordPress. Zde upravíte nastavení pluginu.

Nastavení uživatelských stylů TinyMCE

Plugin vám umožní vybrat, kde jsou vaše stylové listy nebo kam je chcete umístit. Doporučujeme vytvořit nový vlastní adresář. Vyberte třetí možnost a pojmenujte svůj adresář, poté přesuňte stránku dolů a klikněte na Uložit nastavení před pokračováním k dalšímu kroku.

Vlastní styly TinyMCE Přidat nové

Po uložení nastavení přejděte dolů a vyberte tlačítko Přidat nový styl.

Možnosti vlastních stylů TinyMCE

Zde si můžete upravit, jak mají vypadat vaše vlastní styly. Jde v podstatě o jednoduchý webový editor, který pro vás vygeneruje kód CSS. Do rozbalovací nabídky zadejte název, co chcete zobrazit. Zvolte, zda chcete zvolit typ selektoru, vloženého bloku nebo bloku. Neváhejte použít výše uvedený snímek obrazovky k vyplnění tříd a stylů CSS nebo si vytvořte vlastní podle toho, na co se chystáte pomocí rozbalovací nabídky. Po dokončení klikněte na tlačítko Uložit nastavení v dolní části stránky.

Formát vlastních stylů TinyMCE

Nyní je čas zjistit, jak nový vlastní styl vypadá v editoru. Otevřete nový příspěvek nebo stránku a najděte rozbalovací nabídku Formáty na levé straně Visual Editoru. Ukazuje se ve druhém řádku. Jakmile kliknete na rozbalovací nabídku, objeví se nový styl, který jste právě vytvořili.

Používá se formát vlastních stylů TinyMCE

Kliknutím na možnost Velké modré tlačítko nebo na cokoli, co jste vytvořili, se zobrazí v editoru. Chcete-li jej použít, jednoduše zvýrazněte text, který chcete naformátovat, poté klikněte na vaši volbu a voila!

Závěr

To je prozatím vše! Vždy se můžete dozvědět více o tom, jak používat nové styly, podívejte se na Stránka WordPress codex věnované tomuto tématu.

Pokud máte nějaké dotazy ohledně přidání vlastních stylů do vizuálního editoru WordPress, dejte nám vědět v sekci komentářů. A klidně se podělte o všechny neobvyklé styly, které jste vytvořili, aby vaše stránky vypadaly trochu hezčí!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map