Kuidas lisada kohandatud stiile WordPress Visual Editori

Kuidas lisada kohandatud stiile WordPress Visual Editori

Vaadake oma WordPressi visuaalset redigeerijat. Sisu vormindamiseks ja kujundamiseks on mõned standardsed valikud, kuid kohandamise osas mitte nii palju, et teie postitused ja lehed näeksid välja pisut tõeliselt väljamõeldud.


WordPressi redigeerija

Nüüd võite teada, et teil on WordPressis teksti- ja visuaalsete redigeerijate vahel võimalus edasi-tagasi liikuda, et visata mõni nuppude ja tekstiplokkide loomiseks mõeldud CSS, kuid see on valu ja kui teil seda pole palju kogemusi teksti redigeerimisel tundub tekstredaktor pisut hirmutav.

Kas poleks lihtsalt lihtsam, kui saaksite luua oma kohandatud stiilid, paigutada need WordPressi redigeerija rippmenüüsse ja kasutada neid alati, kui vajate? Jah, see on palju lihtsam, nii et tahame visandada, kuidas seda siin teha. Pidage meeles, et kuigi me proovime seda protsessi võimalikult lihtsaks muuta, aitab see saada natuke CSS-i teadmisi, kui soovite avastada kohandatud stiilide kõiki eeliseid.

Vaatame, kuidas lisada kohandatud stiile WordPressi visuaalsele redigeerijale.

Lisage WordPress Visual Editorisse kohandatud stiilid, lisades koodi

See esimene võimalus eeldab, et peate CSS-i integreerimise ja muutmise kohta pisut teadma, kuid ma tutvustaksin teile põhitõdesid, et saaksite neid teadmisi tulevikus kasutada. See on kena võimalus, kui te ei soovi oma saiti pistikprogrammiga kaaluda.

Selle mõte on lisada uus rippmenüü, mis sisaldab kohandatud stiile oma WordPressi visuaalses redigeerijas, mis annab teile võimaluse redaktoris elemente valida ja seejärel kohandatud stiile rakendada. Uue teema väljatöötamisel leidke oma funktsioonid.php faili ja asetage allolev kood sellesse faili või kui töötate juba sisseehitatud teemaga, siis kleepige see kood alamteema funktsiooni.php faili.

funktsioon myprefix_mce_buttons_1 ($ nupud) {
array_unshift ($ nupud, 'styleselect');
tagastamisnupud;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Minge ühes oma WordPressi postituses tagasi redigeerija juurde ja nüüd peaksite redigeerija ülemises reas nägema uut nuppu Formaadid. Pange tähele, kuidas me haakusime nuppudega mce_buttons_1? See asetab vormingumenüü nupu Mce-redaktori esimesse ritta. Teise rea paigutamiseks võite kasutada ka filtrit “mce_buttons_2” või 3. rea paigutamiseks “mce_buttons_3”.

Niisiis, nüüd kui olete menüüelemendi lubanud, on aeg lisada oma postitustes kasutatavad kohandatud stiilid. Võtke allpool loetletud kood ja kleepige see oma kausta funktsioonid.php fail, mis lisab rippmenüüsse Vormid 2 uut stiili – “Teema nupp” ja “Esiletõstmine”.

/ **
* Lisage kohandatud stiilid rippmenüüsse Mce vormingud
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
funktsioon myprefix_add_format_styles ($ init_array) {
$ style_formats = array (
// Iga massiivi laps on vorming, millel on oma seaded - lisage nii palju kui soovite
massiiv (
'pealkiri' => __ ('Teema nupp', 'teksti domeen'), // rippmenüü pealkiri
'selector' => 'a', // redaktoris sihtitav element
'class' => 'teema-nupp' // CSS-i jaoks kasutatav klassi nimi
),
massiiv (
'pealkiri' => __ ('Esiletõstmine', 'tekstdomeen'), // rippmenüü pealkiri
'inline' => 'span', // mähkige valitud sisu ümber span
'klassid' => 'teksti esiletõstmine' // CSS-i jaoks kasutatav klassi nimi
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
return $ init_array;
}
add_filter ('tiny_mce_before_init', 'myprefix_add_format_styles');

Saate muuta pealkirju, et kuvada rippmenüüs erinevad nimed, lisada / eemaldada üksusi massiivist jne. Selle koodi muutmiseks saate muuta kõike, et kuvada oma kohandatud vormingustiilid. Vaadake kindlasti jaotist WordPressi koodeks aktsepteeritud parameetrite ja tagasiväärtuste põhjalikumaks selgitamiseks.

Nüüd, kui teil on uued stiilid, saate redigeerija sisu esile tõsta ja stiile rakendada. Pange tähele, kuidas vormingus „Teemanupp” on valimisparameeter? See tähendab, et stiili saab rakendada ainult selle konkreetse valija jaoks (antud juhul silti „a” või „link”). Teises vormingus, mille lisasime „Esiletõstmine”, pole valimisparameetrit, vaid pigem „sisemist” parameetrit, mis käsib kohaldada stiili ükskõik millises tekstis, mille olete oma redaktoris esile tõstnud, ja mähkida see oma ainulaadse klassi nimega vahemikku. Näete meie teema WordPress kogu teema kohta näidet selle kohta, kuidas oleme vorminguid kasutanud, et kasutajad saaksid hõlpsalt rakendada kontrollnimekirja kõikidele redaktori täppidele.

kontroll-leht

Nüüd saate kasutada oma kohandatud vorminguid, kuid need ei näe välja teisiti, kuni olete oma saidile mõne kohandatud CSS-i lisanud, et neid stiilistada. Peaksite leidma oma teema (kui ehitate oma) või alamteema stiililehe ja kleepima faili järgmine CSS-kood.

.teema nupp {
kuva: inline-block;
polster: 10 15xx;
värv: #fff;
taust: # 1796c6;
teksti kaunistamine: puudub;
}
.teema nupp: hõljutage kursorit {
teksti kaunistamine: puudub;
läbipaistmatus: 0,8;
}
.teksti esiletõstmine {
taust: # FFFF00;
}

Nüüd lisab see uuele kasutajaliidese vormingule stiili, nii et selle rakendamisel näete neid reaalajas. Yay! Kuid kas poleks tore näha ka oma stiile tegelikus redigeerijas, kui neid rakendatakse? Selleks peate kasutama WordPressi funktsiooni “toimetaja stiilileht”. Kui loote oma teema, siis soovite luua oma teema jaoks uue css-faili nimega “editor-style.css” (saate seda nimetada mis iganes soovite, muutke kindlasti allpool olevat lõiku vastavalt) kohandatud CSS-iga lisatud oma vormingute jaoks ja seejärel lisage allolev funktsioon, et see taustaprogrammi laadida.

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

Kui töötate kellegi teise teemaga, peate selle lisama oma lapseteema, andke sellele kindlasti kordumatu nimi, et see ei oleks vastuolus teie vanema teemaga või kui teie vanemateemal on juba CSS-fail redigeerija, mida saate selle tegelikult lapseteemasse kopeerida ja kleepida (ilma ülaltoodud PHP-koodi lisamata), seejärel lisage oma uus CSS, kuna WordPress kontrollib enne vanemateema redaktori CSS-faili laadimist kõigepealt lapseteemat ja kui see selle leiab, siis laadige see hoopis lapseteemast.

Lisage kohandatud stiilid kena pistikprogrammiga WordPress Visual Editorisse

Kui teil pole aega koodiga mängida või kui te ei suuda seda ise välja mõelda, on häid uudiseid. Seal on pistikprogramm, mis võimaldab teil lõpule viia täpselt selle, mida me eespool tegime, ilma et peaksite koodiga ringi kruvima.

TinyMCE kohandatud stiilide pistikprogramm

Lihtsalt otsige, installige ja aktiveerige TinyMCE kohandatud stiilide pistikprogramm ja aktiveerige see oma WordPressi saidil.

TinyMCE kohandatud stiilide seaded

Minema Seadistused> TinyMCE prof.styles oma WordPressi juhtpaneeli vasakus servas. Siin saate muuta pistikprogrammi sätteid.

TinyMCE kohandatud stiilide seaded

Pistikprogramm võimaldab teil valida, kus asuvad teie stiililehed või kuhu soovite need paigutada. Soovitatav on luua uus kohandatud kataloog. Valige kolmas suvand ja andke oma kataloogile nimi, seejärel liikuge lehel allapoole ja klõpsake oma Salvesta sätted enne järgmise sammu juurde asumist.

TinyMCE kohandatud stiilid lisa uus

Pärast sätete salvestamist kerige alla, et valida nupp Lisa uus stiil.

TinyMCE kohandatud stiilide valikud

Siin saate kohandada, kuidas soovite oma kohandatud stiile välja näha. Põhimõtteliselt on see lihtne veebipõhine toimetaja, mis genereerib teile CSS-koodi. Tippige pealkiri kõigele, mida soovite rippmenüüst kuvada. Valige, kas soovite valijat, ritta või blokeerida. Kasutage ülaltoodud ekraanipilti CSS-i klasside ja stiilide täitmiseks või oma loomiseks olenevalt sellest, mida plaanite rippmenüü abil kasutada. Kui see on valmis, klõpsake lehe allosas käsul Salvesta sätted.

TinyMCE kohandatud stiilide vorming

Nüüd on aeg vaadata, kuidas uus kohandatud stiil teie redaktoris välja näeb. Avage uus postitus või leht ja leidke visuaalse redaktori vasakus servas rippmenüü Vormingud. See kuvatakse teises reas. Kui olete rippmenüül klõpsanud, selgub uus äsja loodud stiil.

Kasutatav vorming TinyMCE kohandatud stiilid

Klõpsake suvandil Suur sinine nupp või mõnda muud, mille olete loonud, et näha seda redigeerijas. Selle kasutamiseks tõstke lihtsalt esile vormindatud tekst, seejärel klõpsake oma suvandil ja voila!

Järeldus

Praeguseks kõik! Uute stiilide kasutamise kohta saate alati lisateavet, vaadates WordPressi kodeksi leht pühendatud sellele teemale.

Andke meile kommentaaride jaotises teada, kui teil on küsimusi, kuidas lisada kohandatud stiile WordPressi visuaalsele redigeerijale. Jagage julgelt kõiki ebaharilikke stiile, mille olete loonud, et muuta oma sait pisut kenamaks!

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