Paano Magdagdag ng Mga pasadyang Estilo sa WordPress Visual Editor

Paano Magdagdag ng Mga pasadyang Estilo sa WordPress Visual Editor

Tingnan ang iyong WordPress visual editor. Mayroong ilang mga karaniwang pagpipilian para sa pag-format at pag-istil ng iyong nilalaman, ngunit hindi gaanong sa mga tuntunin ng pagpapasadya upang gawin ang iyong mga post at pahina na mukhang medyo magarbong.


WordPress Editor

Ngayon, maaari mong malaman na mayroon kang kakayahang tumalon pabalik-balik sa pagitan ng Mga Text at Visual na editor sa WordPress na itapon sa ilang CSS para sa paglikha ng mga bagay tulad ng mga pindutan at mga bloke ng teksto, ngunit ito ay isang sakit, at kung wala kang maraming karanasan sa pag-edit ng code ang Text editor ay tila medyo nakakatakot.

Hindi ba ito magiging madali kung maaari kang lumikha ng iyong sariling mga pasadyang estilo, ilagay ang mga ito sa isang menu ng pagbagsak sa editor ng WordPress at pipiliin itong gamitin sa tuwing kailangan mo sila? Oo, mas madali, kaya nais naming mai-outline kung paano gawin ito dito. Tandaan na kahit na sinusubukan naming gawin ang prosesong ito hangga’t maaari, nakakatulong ito na magkaroon ng kaunting kaalaman sa CSS kung nais mong matuklasan ang buong benepisyo ng mga pasadyang estilo.

Tingnan natin kung paano magdagdag ng mga pasadyang estilo sa WordPress visual editor.

Magdagdag ng Pasadyang Mga Estilo sa WordPress Visual Editor sa pamamagitan ng Pagdaragdag ng Code

Ang unang pagpipilian na ito ay nangangailangan sa iyo na malaman ang kaunti tungkol sa kung paano isama at baguhin ang CSS, ngunit bibigyan kita ng kaunting lakad upang matulungan kang malaman ang mga pangunahing kaalaman upang magamit mo ang kaalamang ito sa hinaharap. Ito ay isang magandang pagpipilian kung hindi mo nais na timbangin ang iyong site gamit ang isang plugin.

Ang punto nito ay upang magdagdag ng isang bagong menu ng pagbagsak na kasama ang mga pasadyang estilo sa iyong WordPress visual editor, na nagbibigay sa iyo ng kakayahang pumili ng mga elemento sa iyong editor at pagkatapos ay ilapat ang mga pasadyang estilo sa kanila. Kung nagkakaroon ka ng isang bagong tema hanapin ang function.php maglagay ng file at ilagay ang code sa ibaba sa file na iyon o kung nagtatrabaho ka na may naka-built-na tema na i-paste ang code na ito sa file.php ng ​​isang tema ng bata.

gumana myprefix_mce_buttons_1 ($ pindutan) {
array_unshift ($ pindutan, 'styleelect');
ibalik ang mga pindutan ng $;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Bumalik sa editor sa isa sa iyong mga post sa WordPress at ngayon dapat mong makita ang isang bagong pindutan ng “Mga Format” sa tuktok na hilera ng editor. Pansinin kung paano kami naka-hook sa “mce_buttons_1? Inilalagay nito ang pindutan ng menu ng format sa unang hilera ng editor ng mce. Maaari mo ring gamitin ang filter na “mce_buttons_2” upang ilagay ito sa pangalawang hilera o “mce_buttons_3” upang ilagay ito sa ika-3 hilera.

Kaya, ngayon na pinagana mo ang item sa menu, oras na upang idagdag ang iyong mga pasadyang estilo upang magamit sa loob ng iyong mga post. Kunin ang code na nakalista sa ibaba at i-paste ito sa iyong function.php file na magdaragdag ng 2 bagong mga estilo sa mga format ng pagbaba – “Tema Button” at “I-highlight”.

/ **
* Magdagdag ng mga pasadyang estilo sa pagbagsak ng mga format ng mce
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
gumana myprefix_add_format_styles ($ init_array) {
$ style_formats = array
// Ang bawat anak na array ay isang format na may sariling mga setting - magdagdag ng maraming gusto mo
laruan
'title' => __ ('Button ng Tema', 'text-domain'), // Pamagat para sa pagbagsak
'selector' => 'a', // Elementong i-target sa editor
'classes' => 'theme-button' // Pangalan ng klase na ginamit para sa CSS
),
laruan
'title' => __ ('Highlight', 'text-domain'), // Pamagat para sa pagbagsak
'inline' => 'span', // I-wrap ang isang span sa napiling nilalaman
'classes' => 'text-highlight' // Pangalan ng klase na ginamit para sa CSS
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
ibalik ang $ init_array;
}
add_filter ('maliliit_mce_before_init', 'myprefix_add_format_styles');

Maaari mong baguhin ang mga pamagat upang ipakita ang iba’t ibang mga pangalan sa iyong dropdown menu, magdagdag / mag-alis ng mga item mula sa array, atbp Maaari mong baguhin ang tungkol sa anumang bagay sa code na ito upang maipakita ang iyong sariling mga estilo ng pasadyang format, siguraduhing suriin ang WordPress Codex para sa isang mas malalim na paliwanag ng tinanggap na mga parameter at mga halaga ng pagbabalik.

Ngayon na mayroon kang mga bagong estilo maaari mong i-highlight ang nilalaman sa iyong editor at ilapat ang mga estilo. Pansinin, kung paano ang format na “Tema Button” ay may isang parameter ng selector? Nangangahulugan ito na ang estilo ay maaari lamang mailapat sa tiyak na tagapili (sa kasong ito ang “a” o “link” na tag). Ang pangalawang format na idinagdag namin ang “Highlight” ay walang isang selector na parameter ngunit sa halip isang “inline” na parameter na nagsasabi na ilapat ang estilo sa anumang teksto na iyong na-highlight sa iyong editor at balutin ito sa isang span ng iyong natatanging classname. Maaari kang makakita ng isang halimbawa mula sa aming kabuuang tema ng WordPress sa kung paano namin ginamit ang mga format upang ang mga gumagamit ay madaling mag-aplay ng isang hitsura ng checklist sa anumang mga bullet sa editor.

listahan ng tseke

Kaya ngayon maaari mong gamitin ang iyong pasadyang mga format, ngunit hindi sila magkakaiba hanggang sa magdagdag ka ng ilang mga pasadyang CSS sa iyong site upang i-istilo ang mga ito. Dapat mong hanapin ang stylesheet para sa iyong tema (kung pagbuo ng iyong sariling) o tema ng bata at i-paste ang sumusunod na CSS code sa file.

.pindutan ng tema {
display: inline-block;
padding: 10 15px;
kulay: #fff;
background: # 1796c6;
dekorasyon ng teksto: wala;
}
.button-theme: hover {
dekorasyon ng teksto: wala;
kalapitan: 0.8;
}
.naka-highlight ng teksto
background: # FFFF00;
}

Ngayon, ito ay upang magdagdag ng estilo sa iyong bagong mga format para sa harap-dulo upang kapag inilapat maaari mong makita ang mga ito nang live. Yay! Ngunit hindi ba magandang tingnan din ang iyong mga estilo sa aktwal na editor kapag inilalapat ito? Upang gawin ito kakailanganin mong gumamit ng function na “editor styleheet” sa WordPress. Kung nagtatayo ka ng iyong sariling tema pagkatapos ay nais mong lumikha ng isang bagong file ng css sa iyong tema na tinatawag na “editor-style.css” (maaari mong pangalanan ito kahit anong gusto mo siguraduhin lamang na i-edit ang snippet sa ibaba nang naaayon) gamit ang pasadyang CSS idinagdag para sa iyong mga format at pagkatapos ay idagdag ang pag-andar sa ibaba upang mai-load ito sa backend.

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

Kung nagtatrabaho ka sa tema ng ibang tao, kakailanganin mong idagdag ito sa tema ng iyong anak, siguraduhing bigyan ito ng isang natatanging pangalan upang hindi ito salungat sa tema ng iyong magulang o kung ang tema ng iyong magulang ay mayroon nang isang CSS file para sa ang editor maaari mo talagang kopyahin ito at i-paste ito sa tema ng iyong anak (nang walang pagdaragdag ng PHP code sa itaas) pagkatapos ay idagdag ang iyong bagong CSS dahil susuriin muna ng WordPress ang tema ng bata bago mai-load ang file ng CSS file ng magulang at kung hahanapin nito ito i-load ito mula sa tema ng bata sa halip.

Magdagdag ng Pasadyang Mga Estilo sa WordPress Visual Editor Gamit ang isang Nice Plugin

Kung wala kang oras upang maglaro kasama ang code, o hindi mo maiintindihan ang iyong sarili, mayroong mabuting balita. May isang plugin na nagbibigay-daan sa iyo na makumpleto ang eksaktong ginawa namin sa itaas nang hindi kinakailangang mag-ikot sa code.

Plugin ng Pasadyang Estilo ng TinyMCE

Kailangan lang maghanap, mai-install at buhayin ang Plugin ng TinyMCE Pasadyang Estilo at buhayin ito sa iyong WordPress site.

Mga Setting ng Mga Estilo ng TinyMCE Pasadya

Pumunta sa Mga setting> TinyMCE prof.styles sa kaliwang bahagi ng iyong WordPress dashboard. Dito mo binabago ang iyong mga setting para sa plugin.

Mga setting ng Pasadyang Mga Estilo ng TinyMCE

Hinahayaan ka ng plugin na pumili kung nasaan ang iyong mga stylesheets, o kung saan nais mong ilagay ang mga ito. Inirerekomenda na lumikha ka ng isang bagong pasadyang direktoryo. Piliin ang pangatlong pagpipilian at bigyan ang iyong direktoryo ng isang pangalan, pagkatapos ay ilipat ang pahina upang i-click ang iyong I-save ang Mga Setting pagpipilian bago magpatuloy sa susunod na hakbang.

Mga Tindahan ng Pasadyang Mga TinyMCE Magdagdag ng Bago

Kapag na-save mo ang mga setting, mag-scroll pababa upang piliin ang pindutan ng Magdagdag ng Bagong Estilo.

Mga Pagpipilian sa Pasadyang Estilo ng TinyMCE

Ito ay kung saan pinasadya mo kung ano ang gusto mo sa iyong mga pasadyang estilo na magmukhang. Ito ay karaniwang isang simpleng editor na nakabase sa web na bumubuo ng CSS code para sa iyo. Mag-type ng isang Pamagat para sa anumang nais mong ipakita sa menu ng pagbagsak. Piliin kung nais mo ang isang selector, inline, o uri ng bloke. Huwag mag-atubiling gamitin ang screenshot sa itaas upang punan ang mga klase at estilo ng CSS, o lumikha ng iyong sarili depende sa iyong pinaplano sa paggamit ng dropdown menu para sa. Kapag tapos na, mag-click sa Mga Setting ng I-save sa ilalim ng pahina.

Format ng Mga Estilo ng TinyMCE Custom

Ngayon oras upang makita kung paano ang hitsura ng bagong pasadyang estilo sa iyong editor. Buksan ang isang bagong post o pahina at hanapin ang menu ng mga format na dropdown sa kaliwang bahagi ng Visual editor. Ipinapakita nito sa pangalawang linya. Sa sandaling mag-click ka sa menu ng dropdown ay ibubunyag nito ang bagong estilo na nilikha mo lamang.

Format na Mga Estilo ng TinyMCE Format Na Ginagamit

Mag-click sa opsyon na Big Blue Button, o anuman ang iyong nilikha, upang makita ito na isiniwalat sa iyong editor. Upang magamit ito i-highlight lamang ang teksto na nais mong mai-format, pagkatapos ay mag-click sa iyong pagpipilian at voila!

Konklusyon

Iyon ang lahat para sa ngayon! Maaari mong palaging malaman ang higit pa tungkol sa kung paano gumamit ng mga bagong stylings sa pamamagitan ng pag-tsek sa Pahina ng WordPress codex nakatuon sa paksang ito.

Ipaalam sa amin sa seksyon ng mga komento kung mayroon kang anumang mga katanungan tungkol sa kung paano magdagdag ng mga pasadyang estilo sa WordPress visual editor. At huwag mag-atubiling ibahagi ang anumang hindi pangkaraniwang mga estilo na nilikha mo upang gawing mas maganda ang iyong site!

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