Dëshironi të shtoni stile të personalizuara në redaktuesin vizual të WordPress? Shtimi i stileve të personalizuara ju lejon të aplikoni shpejt formatimin pa shkuar te redaktuesi i tekstit. Në këtë artikull, ne do t'ju tregojmë se si të shtoni stile të personalizuara në redaktuesin vizual të WordPress.
Remarque: Ky tutorial kërkon njohuri themelore të CSS.
Kur do të ju duhet të shtoni një stil të personalizuar në WordPress Visual Editor?
Si parazgjedhje, redaktori vizual i WordPress ofron opsione bazë të formatimit dhe stilimit. Sidoqoftë, ndonjëherë do t'ju duhet të keni stile të personalizuara, të cilat do t'ju lejojnë të shtoni për shembull butona CSS, përmbajtje, grepa etj.
Ju gjithmonë mund të kaloni nga redaktuesi vizual në redaktuesin e tekstit dhe të shtoni kodin HTML dhe CSS të personalizuar. Por nëse përdorni rregullisht disa stile, atëherë do të ishte më mirë t'i shtoni ato në redaktuesin vizual, në mënyrë që të mund t'i ripërdorni me lehtësi.
Kjo do t'ju kursejë një sasi të madhe kohe, dhe gjithashtu do t'ju lejojë të përdorni gjithmonë të njëjtat stile kudo në tuaj Site Web.
Më e rëndësishmja, ju lehtë mund të modifikoni ose azhurnoni stilet pa pasur nevojë të redaktoni artikujt në faqen tuaj.
Tani do të zbulojmë se si ta bëjmë këtë në WordPress.
Metoda 1: Shtoni një stil të personalizuar me një shtojcë
Gjëja e parë që duhet të bëni është të instaloni dhe aktivizoni plugin " Stilet Custom TinyMCE ". Për më shumë detaje, shihni udhëzuesin tonë hap pas hapi se si të instaloni një plugin WordPress.
Pas aktivizimit, duhet të vizitoni " Cilësimet> Cilësimet »Stilet e personalizuara TinyMCE Për të konfiguruar cilësimet e shtojcës.
Shtojca ju lejon të zgjidhni vendndodhjen e skedarëve të fletës së stilit. Mund të përdorë stilin tuaj të temës ose të fëmijës, ose mund të zgjidhni një vendndodhje të personalizuar.
Pas kësaj, duhet të klikoni në butonin " ruaj të gjitha cilësimet Për të ruajtur cilësimet tuaja.
Tani mund të shtoni stilet tuaja të personalizuara. Ju duhet të lëvizni tek seksioni i stilit dhe të klikoni në butonin Shto stil të ri '.
Së pari duhet të vendosni një titull për stilin. Ky titull do të shfaqet në menunë në rënie. Atëherë ju duhet të përcaktoni. Nëse është një rresht, një bllok ose një element përzgjedhës.
Pas kësaj shtoni një klasë CSS dhe pastaj shtoni rregullat tuaja CSS siç tregohet në screenshot më poshtë.
Pasi të keni shtuar një stil CSS, thjesht klikoni në butonin "ruaj të gjitha cilësimet" për të ruajtur ndryshimet tuaja.
Tani mund të modifikoni një artikull ekzistues ose të krijoni një artikull të ri. Do të vini re një format në menunë rënëse, në rreshtin e dytë të redaktorit vizual të WordPress.
Thjesht zgjidhni një tekst në redaktor, më pas zgjidhni stilin tuaj të personalizuar nga menuja zbritëse për ta zbatuar atë.
Tani mund të shikoni artikullin tuaj për të parë nëse stilet tuaja të personalizuara zbatohen saktë.
Metoda 2: Shtoni manualisht stilet në Redaktorin Visual
Kjo metodë kërkon që ju të shtoni manualisht kodin në skedarët tuaj të WordPress. Nëse kjo është hera e parë që e bëni këtë, atëherë shikoni tutorialin tonë se si të shtoni një plugin WordPress.
Hapi 1: Shtoni një stil të personalizuar nga menyja rënëse e Redaktorit Visual të WordPress.
Së pari, ne do të shtojmë një menu zbritëse në redaktuesin vizual të WordPress. Kjo meny në rënie do të na lejojë të zgjedhim dhe zbatojmë stilet tona të personalizuara.
Ju duhet të shtoni kodin e mëposhtëm në skedarin tuaj functions.php ose plugin tuaj.
funksioni wpb_mce_buttons_2 ($ butona) {array_unshift ($ butona, 'styleselect'); kthimi i butonave $; } shto_filtër ('mce_buttons_2', 'wpb_mce_buttons_2');
Hapi 2: Si të shtoni opsione në menunë rënëse
Tani do t'ju duhet të shtoni disa mundësi në menunë zbritëse që sapo krijuat. Atëherë do të jeni në gjendje të zgjidhni dhe zbatoni këto opsione nga formatet në menunë në rënie.
Për këtë tutorial, ne do të shtojmë tre stile të personalizuara për të krijuar përmbajtje blloku dhe butonat.
Ju do të duhet të shtoni kodin e mëposhtëm në skedarin "Funksionet.php" të funksioneve tuaja.php ose një shtojce specifike.
/ * * Funksioni i kthimit të telefonit për të filtruar cilësimet e MCE * / funksioni my_mce_before_init_insert_formats ($ init_array) {// Përcaktoni modelin style_formats $ style_formats = array (/ * * Secili fëmijë i grupit është një format me cilësimet e veta * Vini re që secila grup ka titullin , blloku, klasat dhe argumentet e mbështjellësit * Titulli është etiketa e cila do të shihet në menunë e Formateve * Blloku përcakton nëse është një hapësirë, div, zgjedhës ose stil i brendshëm * Klasat ju lejojnë të përcaktoni klasat CSS shtoni një element të ri të nivelit të bllokut rreth çdo elementi të zgjedhur * / array ('title' => 'Block Content', 'block' => 'span', 'class' => 'content-block', 'wrapper' => true,), array ('title' => 'Button blu', 'block' => 'span', 'class' => 'blue-button', 'wrapper' => true,), array ('title') => 'Butoni i Kuq', 'blloku' => 'hapësira', 'klasat' => 'butoni i kuq', 'mbështjellësi' => i vërtetë,),); // Vendosni vargun, JSON ENCODED, në 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); kthimi $ init_array; } // Bashkangjit thirrjen në 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');
Tani mund të shtoni një postim të ri në WordPress dhe të klikoni formatet nga menuja zbritëse e redaktuesit vizual. Ju do të vini re se stilet tuaja të personalizuara janë tani të dukshme.
Sidoqoftë, zgjedhja e tyre nuk do të sjellë ndonjë ndryshim në redaktorin vizual të WordPress.
Hapi 3: Shtoni një stil CSS
Tani hapi i fundit është të shtoni rregulla të stilit CSS për stilet tuaja të personalizuara.
Ju do të duhet të shtoni këtë CSS në skedarin style.css të temës suaj ose atë të fëmijës.
.bllok-përmbajtja {kufiri: 1px solid #eee; mbushje: 3px; sfondi: #ccc; gjerësia maksimale: 250px; noton: djathtas; rreshtimi i tekstit: qendra; } .bllok-përmbajtje: pas {qartë: të dy; } .blue-buton {background-color: # 33bdef; -moz-kufiri-rrezja: 6px; -rrezja e kufirit-uebkit: 6px; rrezja e kufirit: 6px; kufiri: 1px solid # 057fd0; shfaqja: bllok-inline; kursori: pika; ngjyra: #ffffff; mbushje: 6px 24px; dekorim teksti: asnjë; }. butoni i kuq {sfondi-ngjyra: # bc3315; -moz-kufiri-rrezja: 6px; -rrezja e kufirit-uebkit: 6px; rrezja e kufirit: 6px; kufiri: 1px solid # 942911; shfaqja: bllok-inline; kursori: pika; ngjyra: #ffffff; mbushje: 6px 24px; dekorim teksti: asnjë; }
Fleta e stilit të redaktuesit kontrollon pamjen tuaj përmbajtje në redaktorin vizual. Kontrolloni dokumentacionin për të parë se si të gjeni vendndodhjen e këtij skedari.
Nëse tema juaj nuk ka një skedar stili, atëherë mund ta krijoni gjithmonë një. Thjesht krijoni një skedar të ri CSS dhe vendosni emrin " Custom-editor-style.css '.
Ju duhet ta ngarkoni këtë skedar në direktorinë rrënjësore të temës suaj, pastaj shtoni këtë kod në skedarin "Funksionet.php" të temës suaj.
funksioni my_theme_add_editor_styles () {add_editor_style ('custom-editor-style.css'); } add_action ('init', 'my_theme_add_editor_styles');
Kjo eshte e gjitha. Sapo keni shtuar stilet tuaja të personalizuara në redaktuesin vizual të WordPress. Tani mund të bëni përshtatje që mendoni se janë të drejta.
Mos ngurroni ta ndani këtë tutorial me miqtë tuaj në rrjetet tuaja të preferuara sociale.
