Az egyedi stílusok hozzáadása a WordPress Visual Editor-hoz

Az egyedi stílusok hozzáadása a WordPress Visual Editor-hoz

Vessen egy pillantást a WordPress vizuális szerkesztőjére. Van néhány szabványos lehetőség a tartalom formázására és formázására, de a testreszabás szempontjából nem sokkal inkább, hogy a bejegyzésed és az oldalad valóban nagyon divatosnak tűnjenek.


WordPress szerkesztő

Most már tudhatja, hogy lehetősége van oda-vissza ugrani a WordPress Szöveg és Visual szerkesztõi között, hogy beillesszen néhány CSS-t olyan dolgok létrehozására, mint a gombok és a szövegblokkok, de ez fájdalom, és ha nincs sok tapasztalat a szövegszerkesztő kicsit félelmetesnek tűnik.

Nem lenne egyszerűbb, ha elkészítheti saját egyéni stílusait, elhelyezheti azokat a WordPress szerkesztő legördülő menüjében, és bármikor használhatja őket? Igen, ez sokkal könnyebb, ezért itt szeretnénk felvázolni, hogyan kell ezt megtenni. Ne feledje, hogy bár megpróbáljuk ezt a folyamatot a lehető legegyszerűbbé tenni, elősegíti a CSS ismereteit, ha fel szeretné fedezni az egyéni stílusok előnyeit.

Nézzük meg, hogyan adhatunk hozzá egyedi stílusokat a WordPress vizuális szerkesztőhöz.

Kód hozzáadásával adjon hozzá egyéni stílusokat a WordPress Visual Editor-hoz

Az első lehetőség megköveteli, hogy tudjon egy kicsit a CSS beépítéséről és módosításáról, de bemutatok egy kis lépést, hogy segítsen megtanulni az alapokat, így ezeket a tudást a jövőben is felhasználhatja. Ez egy szép lehetőség, ha nem akarja leolvasni a webhelyét egy pluginnal.

Ennek lényege egy új legördülő menü hozzáadása, amely egyéni stílusokat tartalmaz a WordPress vizuális szerkesztőjében, amely lehetőséget ad arra, hogy kiválassza az elemeket a szerkesztőben, majd az egyedi stílusokat alkalmazza rájuk. Ha új témát dolgoz ki, keresse meg a functions.php fájlt, és helyezze be az alábbi kódot ebbe a fájlba, vagy ha egy már beépített témával dolgozik, illessze be ezt a kódot egy gyermektéma function.php fájljába.

funkció myprefix_mce_buttons_1 ($ gombok) {
array_unshift ($ gombok, 'styleselect');
visszatérés $ gombok;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Menjen vissza a szerkesztőhöz az egyik WordPress-üzenetben, és most egy új “Formaták” gombot kell látnia a szerkesztő felső sorában. Figyelje meg, hogy bekapcsoltuk a „mce_buttons_1” -t? Ez a formátumok menügombot helyezi el a mce szerkesztő első sorába. Használhatja az „mce_buttons_2” szűrőt is a második sorba, vagy az „mce_buttons_3” szűrőt a 3. sorba..

Tehát most, hogy engedélyezte a menüelemet, itt az ideje, hogy hozzáadja az egyéni stílusokat, amelyeket felhasználhat a bejegyzésében. Vegye ki az alább felsorolt ​​kódot, és illessze be saját kódjába functions.php fájl, amely 2 új stílust ad hozzá a formátumok legördülő listához – „Téma gomb” és a „Kiemelés”.

/ **
* Adjon hozzá egyedi stílusokat a mce formátumok legördülő listához
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
funkció myprefix_add_format_styles ($ init_array) {
$ style_formats = tömb (
// Minden tömb gyermek egy formátum, saját beállításokkal - adjon hozzá annyi, amennyit csak akar
sor(
'title' => __ ('Theme Button', 'text-domain'), // A legördülő menü címe
'selector' => 'a', // A szerkesztőben megcélolandó elem
'osztályok' => 'téma-gomb' // A CSS-hez használt osztálynév
),
sor(
'title' => __ ('Kiemelés', 'text-domain'), // Cím a legördülő számára
'inline' => 'span', // Tekerccset tekercsel a kiválasztott tartalomra
'osztályok' => 'szöveg kiemelése' // A CSS-hez használt osztálynév
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
return $ init_array;
}
add_filter ('tiny_mce_before_init', 'myprefix_add_format_styles');

Megváltoztathatja a címeket, hogy a nevek megjelenjenek a legördülő menüben, elemeket adjon hozzá / távolítson el a tömbből, stb. A kódban szinte bármit módosíthat, hogy felfedje a saját egyedi formátumstílusait, feltétlenül nézd meg a WordPress kódex az elfogadott paraméterek és visszatérési értékek részletesebb magyarázata érdekében.

Most, hogy új stílusok vannak, kiemelheti a tartalmat a szerkesztőben, és alkalmazhatja azokat. Figyelem, hogy a „Theme Button” formátum rendelkezik választó paraméterrel? Ez azt jelenti, hogy a stílus csak az adott választóra alkalmazható (ebben az esetben az „a” vagy „link” címke). A második kiemelés, amelyet hozzáadunk „Kiemelés”, nem rendelkezik választó paraméterrel, inkább egy „inline” paraméterrel, amely azt mondja, hogy alkalmazza a stílust bármilyen szövegre, amelyet a szerkesztőben kiemeltek, és tekerje be egy egyedi osztálynevéhez. Láthat egy példát a Teljes WordPress téma témakörében arról, hogy miként használtuk a formátumokat, hogy a felhasználók egyszerűen ellenőrzőlistát alkalmazhassanak a szerkesztő bármely golyójára.

check-lista

Tehát most már használhatja az egyéni formátumait, de ezek nem fognak különösebben kinézni, amíg nem ad hozzá egyéni CSS-t a webhelyéhez a stílusuk megteremtése érdekében. Keresse meg a téma stíluslapját (ha saját készít) vagy a gyermek témáját, és illessze be a következő CSS kódot a fájlba.

.téma gomb {
kijelző: inline-block;
párnázat: 10 15xx;
szín: #fff;
háttér: # 1796c6;
szövegdíszítés: nincs;
}
.téma gomb: lebeg {
szövegdíszítés: nincs;
átlátszatlanság: 0,8;
}
.szöveges kiemelés {
háttér: # FFFF00;
}

Ez most stílussá teszi az új felhasználói formátumokat, így alkalmazásukkor élőben láthatják őket. Hurrá! De nem lenne jó, ha a stílusokat a tényleges szerkesztőben is látják, amikor azokat alkalmazzák? Ehhez ki kell használnia a WordPress „szerkesztő stíluslapja” funkcióját. Ha saját témát építesz, akkor létre kell hoznod egy új css fájlt a témájában, „editor-style.css” néven (bármit megnevezhet, amit csak akar, csak ne felejtse el ennek megfelelően szerkeszteni az alábbi kódrészletet) az egyéni CSS-sel hozzáadva a formátumokhoz, majd adja hozzá az alábbi funkciót, hogy betöltse a háttérrendszerbe.

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

Ha valaki más témájával dolgozik, akkor ezt hozzá kell adnia a gyermek témájához, csak ügyeljen arra, hogy egyedi nevet adjon neki, hogy ez ne legyen ellentmondásban a szülő témájával, vagy ha a szülő témának már van CSS fájlja a A szerkesztőt valóban lemásolhatja és beillesztheti a gyermektémába (a fenti PHP kód hozzáadása nélkül), majd adja hozzá az új CSS-t, mivel a WordPress először ellenőrzi a gyermek témát, mielőtt betölti a szülő téma szerkesztőjének CSS fájlját, és ha megtalálja, akkor Helyezze be inkább a gyermek témájába.

Adjon hozzá egyedi stílusokat a WordPress Visual Editor-hoz egy szép bővítménnyel

Jó hírek vannak, ha nincs időd a kóddal játszani, vagy ha nem tudod kitalálni, hogyan tudod magad kitalálni. Van egy plugin, amely lehetővé teszi, hogy pontosan befejezze azt, amit fent tettünk, anélkül, hogy meg kellene csavarnia a kódot.

TinyMCE Custom Styles bővítmény

Egyszerűen keresse meg, telepítse és aktiválja a TinyMCE Custom Styles bővítmény és aktiválja azt a WordPress webhelyén.

TinyMCE egyedi stílusok beállításai

Menj Beállítások> TinyMCE prof.stílusok a WordPress műszerfal bal oldalán. Itt módosíthatja a plugin beállításait.

TinyMCE egyedi stílusok beállításai

A beépülő modul lehetővé teszi, hogy kiválassza, hol vannak a stíluslapok, vagy hol szeretné elhelyezni őket. Javasoljuk, hogy hozzon létre egy új egyéni könyvtárat. Válassza ki a harmadik lehetőséget, és adjon nevet a könyvtárnak, majd mozgassa az oldalt lefelé és kattintson a Beállítások mentése lehetőséget, mielőtt folytatná a következő lépést.

TinyMCE egyedi stílusok Új hozzáadása

A beállítások mentése után görgessen lefelé és válassza az Új stílus hozzáadása gombot.

TinyMCE egyedi stílusok beállításai

Itt testreszabhatja, hogy az egyedi stílusai hogyan néznek ki. Alapvetően egy egyszerű web-alapú szerkesztő, amely előállítja az Ön számára a CSS-kódot. Írjon be egy címet a legördülő menüben megjeleníteni kívánt elemhez. Válassza ki, hogy választót, inline vagy blokkot akar-e használni. Nyugodtan használja a fenti képernyőképet a CSS osztályok és stílusok kitöltéséhez, vagy saját létrehozásához, attól függően, hogy mit tervez használni a legördülő menüben. Ha kész, kattintson a Beállítások mentése elemre az oldal alján.

TinyMCE egyedi stílusformátum

Itt az ideje, hogy megnézze, hogyan néz ki az új egyedi stílus a szerkesztőben. Nyisson meg egy új bejegyzést vagy oldalt, és keresse meg a Formats legördülő menüt a Visual editor bal oldalán. A második sorban jelenik meg. Miután rákattintott a legördülő menüre, felfedi az éppen létrehozott új stílust.

A használt TinyMCE egyedi stílusok formátuma

Kattintson a Nagy kék gomb lehetőségre, vagy bármire, amit létrehozott, hogy láthassa azt a szerkesztőben. Használatához egyszerűen jelölje ki a formázni kívánt szöveget, majd kattintson az opcióra és íme!

Következtetés

Ez minden most! Mindig többet megtudhat az új stílusok használatáról, ha megnézte a WordPress kódex oldal szentelt erre a témára.

Tudassa velünk a megjegyzések részben, ha bármilyen kérdése van az egyedi stílusok hozzáadásával a WordPress vizuális szerkesztőben. Nyugodtan ossza meg minden szokatlan stílust, amelyet létrehozott, hogy webhelye kissé szebbé váljon!

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