Kaip pridėti pasirinktinius stilius prie „WordPress Visual Editor“

Kaip pridėti pasirinktinius stilius prie „WordPress Visual Editor“

Pažvelkite į savo „WordPress“ vaizdinį redaktorių. Yra keletas standartinių turinio formatavimo ir stiliaus parinkčių, bet ne tiek daug, kiek tinkinti, kad jūsų įrašai ir puslapiai atrodytų šiek tiek išgalvotai.


„WordPress“ redaktorius

Dabar jūs galbūt žinote, kad turite galimybę peršokti pirmyn ir atgal tarp „WordPress“ teksto ir vaizdo redaktorių, kad galėtumėte įvesti CSS kurdami tokius dalykus kaip mygtukai ir teksto blokai, tačiau tai yra skausmas, o jei to neturite Daug patirties redaguojant kodą Teksto rengyklė atrodo šiek tiek bauginanti.

Ar ne paprasčiau, jei galėtumėte sukurti savo pasirinktinius stilius, įdėkite juos į „WordPress“ redagavimo priemonės išskleidžiamąjį meniu ir nuspręstumėte naudoti juos visada, kai jums jų reikia? Taip, tai yra daug lengviau, todėl norime apibūdinti, kaip tai padaryti. Atminkite, kad nors mes stengiamės padaryti šį procesą kuo paprastesnį, tai padeda turėti šiek tiek CSS žinių, jei norite sužinoti apie visus pasirinktinių stilių pranašumus.

Pažvelkime, kaip pridėti pasirinktinius stilius prie „WordPress“ vaizdinės rengyklės.

Pridėkite pasirinktinius stilius prie „WordPress Visual Editor“ pridėdami kodą

Ši pirmoji parinktis reikalauja, kad jūs šiek tiek žinotumėte, kaip įtraukti ir modifikuoti CSS, tačiau aš jums šiek tiek papasakosiu, kad padėtumėte išmokti pagrindus, kad galėtumėte šias žinias panaudoti ateityje. Tai puiki galimybė, jei nenorite savo svetainės vertinti papildiniu.

Esmė yra pridėti naują išskleidžiamąjį meniu, kuriame yra pasirinktiniai stiliai jūsų „WordPress“ vaizdiniame redaktoriuje, kuris suteikia jums galimybę pasirinkti elementus redaktoriuje ir tada pritaikyti jiems tinkintus stilius. Jei kuriate naują temą, suraskite savo funkcijos.php failą ir įdėkite žemiau esantį kodą į tą failą arba, jei dirbate su jau sukurta tema, įklijuokite šį kodą vaiko temos funkcijoje .php.

funkcija myprefix_mce_buttons_1 ($ mygtukai) {
array_unshift ($ mygtukai, 'styleselect');
mygtukai grąžinti;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Grįžkite į redaktorių viename iš savo „WordPress“ įrašų ir dabar viršutinėje redaktoriaus eilutėje turėtumėte pamatyti naują mygtuką „Formatai“. Atkreipkite dėmesį, kaip mes užsikabinome prie „mce_buttons_1“? Tai įveda formatų meniu mygtuką pirmoje „Mce“ rengyklės eilutėje. Taip pat galite naudoti filtrą „mce_buttons_2“, kad įdėtumėte jį į antrą eilutę, arba „mce_buttons_3“, kad įdėtumėte jį į 3 eilę..

Taigi, dabar, kai įgalinote meniu elementą, laikas pridėti pasirinktinius stilius, kuriuos norite naudoti savo žinutėse. Paimkite žemiau pateiktą kodą ir įklijuokite jį į savo funkcijos.php failas, kuris pridės 2 naujus stilius į išskleidžiamąjį formatą – „Temos mygtukas“ ir „Paryškinti“.

/ **
* Įtraukite pasirinktinius stilius į išskleidžiamąjį „Mce“ formatų formatą
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
funkcija myprefix_add_format_styles ($ init_array) {
$ style_formats = masyvas (
// Kiekvienas masyvo vaikas yra formatas su savo nustatymais - pridėkite tiek, kiek norite
masyvas (
'title' => __ ('Temos mygtukas', 'teksto sritis'), // Išplečiamojo pavadinimo pavadinimas
'selector' => 'a', // Elementas, kurį reikia nukreipti į redaktorių
'klases' => 'temos mygtukas' // CSS naudojamas klasės pavadinimas
),
masyvas (
'title' => __ ('Paryškinti', 'text-domain'), // Išplečiamojo pavadinimo pavadinimas
'inline' => 'span', // Apvyniokite tarpus aplink pasirinktą turinį
'klases' => 'tekstas pabrėžiamas' // CSS naudojamas klasės pavadinimas
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
grąžinti $ init_array;
}
add_filter ('tiny_mce_before_init', 'myprefix_add_format_styles');

Galite pakeisti pavadinimus, kad išskleidžiamajame meniu būtų rodomi skirtingi pavadinimai, pridėti / pašalinti elementus iš masyvo ir tt Galite modifikuoti beveik viską šiame kode, kad būtų atskleisti jūsų pasirinktiniai formato stiliai, būtinai peržiūrėkite „WordPress Codex“ norint išsamiau paaiškinti priimtus parametrus ir grąžinimo reikšmes.

Dabar, kai turite naujų stilių, galite paryškinti turinį savo redaktoriuje ir pritaikyti stilius. Atkreipkite dėmesį, kaip „Temos mygtuko“ formatas turi pasirinkimo parametrą? Tai reiškia, kad stilius gali būti pritaikytas tik tam konkrečiam parinkėjui (šiuo atveju žyma „a“ arba „link“). Antrasis formatas, kurį mes pridėjome „Paryškinti“, neturi pasirinkimo parametro, o „inline“ parametras, kuris liepia pritaikyti stilių bet kokiam tekstui, kurį paryškinote savo redaktoriuje, ir apvynioti jį span su savo unikalia klasės pavadinimu. Galite pamatyti „Total WordPress“ temos pavyzdį, kaip mes naudojome formatus, kad vartotojai galėtų lengvai pritaikyti kontrolinio sąrašo išvaizdą bet kokioms redaktoriaus kulkoms..

kontrolinis sąrašas

Taigi dabar galite naudoti tinkintus formatus, tačiau jie nebus kitokie, kol į savo svetainę neįtrauksite šiek tiek tinkintos CSS, kad galėtumėte juos formuoti. Turėtumėte rasti savo temos (jei kuriate savo) ar vaiko temos stiliaus lentelę ir įklijuoti šį CSS kodą į failą.

.temos mygtukas {
ekranas: intarpas;
paminkštinimas: 10 15px;
spalva: #fff;
fonas: # 1796c6;
teksto dekoravimas: nėra;
}
.temos mygtukas: užveskite pelę {
teksto dekoravimas: nėra;
neskaidrumas: 0,8;
}
.paryškinti tekstą {
fonas: # FFFF00;
}

Dabar tai padės pridėti stilių prie jūsų naujų formatų, kad galėtumėte juos naudoti tiesiogiai. Valio! Bet ar nebūtų puiku pamatyti savo stilius realiame redaktoriuje, kai jie taikomi? Norėdami tai padaryti, turėsite naudotis „WordPress“ funkcija „redaktoriaus stilius“. Jei kuriate savo temą, norėsite sukurti naują CSS failą savo tema, pavadintą „editor-style.css“ (galite tai pavadinti bet kuo, tik būtinai atitinkamai redaguokite žemiau esantį fragmentą) naudodami pasirinktinę CSS. pridėta jūsų formatams, tada pridėkite žemiau esančią funkciją, kad įkeltumėte ją į užpakalinę programą.

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

Jei dirbate su kažkieno tema, tada turėsite tai pridėti prie savo vaiko temos. Tiesiog įsitikinkite, kad suteikiate jai unikalų pavadinimą, kad ji neprieštarautų jūsų pagrindinei temai arba jei jūsų motinos tema jau turi CSS failą redaktorių, kurį galite iš tikrųjų nukopijuoti ir įklijuoti į savo vaiko temą (nepridėdami aukščiau esančio PHP kodo), tada pridėkite naują CSS, nes „WordPress“ pirmiausia patikrins vaiko temą prieš įkeliant pagrindinės temos redaktoriaus CSS failą ir, jei jis ją suras, įkelkite jį iš vaiko temos.

Pridėkite pasirinktinius stilius prie „WordPress“ vaizdo redagavimo priemonės naudodami gražų papildinį

Jei neturite laiko pažaisti su kodu arba negalite įsivaizduoti, kad patys tai išsiaiškinsite, yra gerų naujienų. Yra įskiepis, leidžiantis atlikti tai, ką mes ką tik padarėme aukščiau, nereikia sukti galvos kodo.

„TinyMCE“ pasirinktinių stilių papildinys

Tiesiog ieškokite, įdiekite ir suaktyvinkite „TinyMCE Custom Styles“ papildinys ir suaktyvinkite jį savo „WordPress“ svetainėje.

„TinyMCE“ pasirinktinių stilių nustatymai

Eiti į Nustatymai> „TinyMCE“ prof kairėje „WordPress“ informacijos suvestinės pusėje. Čia galite modifikuoti papildinio nustatymus.

„TinyMCE“ pasirinktinių stilių nustatymai

Papildinys leidžia jums pasirinkti, kur yra jūsų stiliaus lentelės arba kur norite jas patalpinti. Rekomenduojama sukurti naują pasirinktinį katalogą. Pasirinkite trečiąją parinktį ir nurodykite savo katalogo pavadinimą, tada perkelkite puslapį žemyn ir spustelėkite savo Išsaugoti nustatymus parinktį prieš pereinant prie kito žingsnio.

„TinyMCE“ tinkinti stiliai „Pridėti naują“

Išsaugoję nustatymus, slinkite žemyn ir pasirinkite mygtuką Pridėti naują stilių.

„TinyMCE“ pasirinktinių stilių parinktys

Čia galite tinkinti tai, kaip norite, kad atrodytų tinkinti stiliai. Iš esmės tai yra paprastas žiniatinklio redaktorius, kuris sugeneruoja jums CSS kodą. Įveskite pavadinimą, ką norite parodyti išskleidžiamajame meniu. Pasirinkite, ar norite parinkiklio, intarpo ar bloko tipo. Nesinaudokite aukščiau esančia ekrano kopija, užpildydami CSS klases ir stilius, arba sukurkite savo, priklausomai nuo to, ką planuojate naudoti išskleidžiamajame meniu. Baigę spustelėkite puslapio apačioje mygtuką Išsaugoti nustatymus.

„TinyMCE“ pasirinktinių stilių formatas

Dabar laikas pamatyti, kaip naujas pasirinktinis stilius atrodo jūsų redaktoriuje. Atidarykite naują įrašą ar puslapį ir suraskite išskleidžiamąjį meniu Formatai, esantį kairėje „Visual“ redaktoriaus pusėje. Tai rodoma antroje eilutėje. Kai spustelėsite išskleidžiamąjį meniu, jis atskleis naują jūsų ką tik sukurtą stilių.

Naudojamas „TinyMCE“ pasirinktinių stilių formatas

Spustelėkite parinktį Didelis mėlynas mygtukas arba bet ką, ką sukūrėte, kad pamatytumėte, kad ji atsiskleidė redaktoriuje. Norėdami jį naudoti, tiesiog pažymėkite norimą formatuoti tekstą, tada spustelėkite pasirinktį ir voila!

Išvada

Tai viskas dabar! Visada galite sužinoti daugiau apie tai, kaip naudoti naujus stilius, apsilankę „WordPress“ kodeko puslapis skirta šiai temai.

Praneškite mums komentarų skiltyje, jei turite klausimų, kaip pridėti pasirinktinius stilius prie „WordPress“ vaizdinės rengyklės. Jei norite, kad jūsų svetainė atrodytų šiek tiek gražiau, nedvejodami pasidalinkite visais jūsų sukurtais neįprastais stiliais!

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