Gusto mo bang magdagdag ng mga custom na estilo sa WordPress visual editor? Ang pagdaragdag ng custom na mga estilo ay nagbibigay-daan sa mabilis kang mag-aplay ng pag-format nang hindi lumilipat sa editor ng text. Sa artikulong ito, ipapakita namin sa iyo kung paano magdagdag ng mga custom na estilo sa WordPress visual editor.
Tandaan: Nangangailangan ang tutorial na ito ng pangunahing kaalaman sa pagtatrabaho ng CSS.
Bakit at Kailan Kailangan Mo ang Custom na Estilo para sa WordPress Visual Editor
Sa pamamagitan ng default, ang WordPress visual na editor ay may ilang pangunahing mga format at mga pagpipilian sa estilo. Gayunpaman, kung minsan ay maaaring kailangan mo ng custom na mga estilo ng iyong sarili upang magdagdag ng mga pindutan ng CSS, mga bloke ng nilalaman, mga tagline, atbp.
Maaari kang laging lumipat mula sa visual sa text editor at magdagdag ng custom na HTML at CSS. Ngunit kung regular kang gumamit ng ilang mga estilo, pagkatapos ay magiging pinakamahusay na idagdag ang mga ito sa visual na editor upang madali mong muling gamitin ang mga ito.
Ito ay magse-save ka ng oras na ginugol sa paglipat pabalik-balik sa pagitan ng teksto at visual na editor. Pahihintulutan din nito na patuloy mong gamitin ang parehong estilo sa iyong website.
Pinakamahalaga, maaari mong madaling mag-tweak o i-update ang mga estilo nang hindi kinakailangang mag-edit ng mga post sa iyong website.
Ang pagkakaroon ng sinabi na, tingnan natin kung paano magdagdag ng mga custom na estilo sa WordPress visual na editor.
Paraan 1: Magdagdag ng Mga Custom na Estilo sa Visual Editor Paggamit ng Plugin
Ang unang bagay na kailangan mong gawin ay i-install at i-activate ang TinyMCE Custom Styles plugin. Para sa higit pang mga detalye
Sa pag-activate, kailangan mong bisitahin Mga Setting »TinyMCE Custom Styles pahina upang i-configure ang mga setting ng plugin.
Pinapayagan ka ng plugin na piliin ang lokasyon ng mga file ng stylesheet. Maaari itong gamitin ang iyong tema o mga estilo ng tema ng bata, o maaari kang pumili ng custom na lokasyon ng iyong sarili.
Pagkatapos nito, kailangan mong mag-click sa pindutang ‘I-save ang Lahat ng Mga Setting’ upang i-imbak ang iyong mga pagbabago.
Ngayon ay maaari mong idagdag ang iyong mga custom na estilo. Kailangan mong mag-scroll pababa ng kaunti sa seksyon ng estilo at mag-click sa pindutan ng Magdagdag ng bagong estilo.
Una kailangan mong magpasok ng isang pamagat para sa estilo. Ang pamagat na ito ay ipapakita sa drop down na menu. Susunod, kailangan mong piliin kung ito ay isang inline, block, o selector elemento.
Matapos na magdagdag ng isang CSS klase at pagkatapos ay idagdag ang iyong mga panuntunan sa CSS tulad ng ipinapakita sa screenshot sa ibaba.
Sa sandaling nagdagdag ka ng estilo ng CSS, i-click lamang ang pindutan ng ‘I-save ang Lahat ng Mga Setting’ upang i-imbak ang iyong mga pagbabago.
Maaari mo na ngayong i-edit ang isang umiiral na post o lumikha ng bago. Mapapansin mo ang isang drop down na menu ng Format sa ikalawang hanay ng WordPress visual na editor.
Piliin lang ang ilang teksto sa editor at pagkatapos ay piliin ang iyong custom na estilo mula sa dropdown na menu ng Mga Format upang ilapat ito.
Maaari mo ngayong i-preview ang iyong post upang makita na ang iyong mga pasadyang estilo ay wastong inilapat.
Paraan 2: Manu-manong Magdagdag ng Mga Custom na Estilo sa WordPress Visual Editor
Ang pamamaraang ito ay nangangailangan sa iyo na manu-manong magdagdag ng code sa iyong mga file na WordPress. Kung ito ang iyong unang pagkakataon pagdaragdag ng code sa WordPress
Hakbang 1: Magdagdag ng isang pasadyang mga estilo drop down na menu sa WordPress Visual Editor
Una, magdaragdag kami ng isang menu na Drop down na Mga Format sa WordPress visual na editor. Ang drop down na menu ay magpapahintulot sa amin na piliin at ilapat ang aming mga custom na estilo.
Kailangan mong idagdag ang sumusunod na code sa mga function.php ng iyong tema o isang site-specific na plugin.
function wpb_mce_buttons_2 ($ buttons) {
array_unshift ($ pindutan, 'styleselect');
bumalik $ na mga pindutan;
}
add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');
Hakbang 2: Magdagdag ng mga piling pagpipilian upang mag-drop down na menu
Ngayon ay kakailanganin mong idagdag ang mga opsyon sa drop down na menu na iyong nilikha. Pagkatapos ay maaari mong piliin at ilapat ang mga pagpipiliang ito mula sa drop down menu ng Mga Format.
Para sa kapakanan ng tutorial na ito, nagdadagdag kami ng tatlong pasadyang estilo upang lumikha ng bloke ng nilalaman at mga pindutan.
Kakailanganin mong idagdag ang sumusunod na code sa mga function.php ng iyong tema o isang site-specific na plugin.
/ *
* Pag-andar ng callback upang i-filter ang mga setting ng MCE
* /
function my_mce_before_init_insert_formats ($ init_array) {
/ / Tukuyin ang array ng style_formats
$ style_formats = array (
/ *
* Ang bawat hanay ng bata ay isang format na may sariling mga setting
* Pansinin na ang bawat array ay may pamagat, bloke, mga klase, at mga argumento ng pambalot
* Pamagat ay ang label na makikita sa menu ng Mga Format
* Ang Block ay tumutukoy kung ito ay isang span, div, selector, o inline style
* Binibigyang-daan ka ng mga klase na tukuyin ang mga klase ng CSS
* Wrapper man o hindi upang magdagdag ng isang bagong block-level na elemento sa anumang napiling elemento
* /
array (
'pamagat' => 'Block ng Nilalaman',
'block' => 'span',
'classes' => 'block ng nilalaman',
'wrapper' => totoo,
),
array (
'pamagat' => 'Blue Button',
'block' => 'span',
'classes' => 'blue-button',
'wrapper' => totoo,
),
array (
'pamagat' => 'Pulang Pindutan',
'block' => 'span',
'classes' => 'red-button',
'wrapper' => totoo,
),
);
// Ipasok ang array, JSON ENCODED, sa 'style_formats'
$ init_array ['style_formats'] = json_encode ($ style_formats);
bumalik $ init_array;
}
// Maglakip ng callback sa 'tiny_mce_before_init'
add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');
Maaari ka na ngayong magdagdag ng bagong post sa WordPress at mag-click sa drop down menu ng Mga Format sa Visual editor. Mapapansin mo na ang iyong mga pasadyang estilo ay nakikita na sa ilalim ng mga format.
Gayunpaman, ang pagpili sa kanila ay hindi gumagawa ng anumang pagkakaiba sa post editor ngayon.
Hakbang 3: Magdagdag ng Mga Estilo ng CSS
Ngayon ang pangwakas na hakbang ay upang magdagdag ng mga panuntunan sa estilo ng CSS para sa iyong mga custom na estilo.
Kakailanganin mong idagdag ang CSS sa iyong tema o estilo ng style.css ng tema ng bata at mga editor-style.css.
.content-block {
border: 1px solid #eee;
padding: 3px;
background: #ccc;
max-width: 250px;
lumutang: tama;
text-align: center;
}
.content-block: after {
malinaw: parehong;
}
.blue-button {
background-color: # 33bdef;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
hangganan: 1px solid # 057fd0;
display: inline-block;
cursor: pointer;
kulay: #ffffff;
padding: 6px 24px;
text-decoration: none;
}
.red-button {
background-color: # bc3315;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
hangganan: 1px solid # 942911;
display: inline-block;
cursor: pointer;
kulay: #ffffff;
padding: 6px 24px;
text-decoration: none;
}
Kinokontrol ng stylesheet ng editor ang hitsura ng iyong nilalaman sa visual na editor. Suriin ang dokumentasyon ng iyong tema upang malaman ang lokasyon ng file na ito.
Kung ang iyong tema ay walang isang editor stylesheet file, maaari kang laging lumikha ng isa. Lamang lumikha ng isang bagong CSS file at pangalanan ito custom-editor-style.css .
Kailangan mong i-upload ang file na ito sa direktoryo ng root ng iyong tema at idagdag ang code na ito sa mga function.php ng iyong tema.
function my_theme_add_editor_styles () {
add_editor_style ('custom-editor-style.css');
}
add_action ('init', 'my_theme_add_editor_styles');
Iyon lang. Matagumpay mong naidagdag ang iyong mga custom na estilo sa WordPress visual na editor. Huwag mag-atubiling makipaglaro sa code sa pamamagitan ng pagdaragdag ng iyong sariling mga elemento at estilo.