Ați dorit vreodată să puteți crea propriile butoane de formatare în WordPress, cum ar fi un stil special de notă sau un format de citat de marcă? Acesta este exact ceea ce fac stilurile personalizate.
Am petrecut timp considerabil testând diferite abordări pentru stiluri personalizate în WordPress, de la simple adăugări CSS la soluții mai avansate.
Această experiență m-a ajutat să identific cele mai practice modalități de a vă îmbunătăți editorul cu opțiuni de formatare personalizate pe care oricine din echipa dvs. le poate folosi.
Astăzi, vă voi ghida prin modul de adăugare a stilurilor personalizate în editorul vizual WordPress. Veți afla ce sunt stilurile personalizate, de ce sunt utile și instrucțiuni pas cu pas pentru adăugarea lor pe site-ul dvs., totul bazat pe experiența mea de testare în lumea reală.✨
💡Rezumat rapid: Cea mai bună modalitate de a adăuga stiluri personalizate
Cea mai eficientă modalitate de a adăuga stiluri personalizate la editorul de blocuri WordPress este prin adăugarea unui fragment de cod PHP pe site-ul dvs. Acest lucru vă permite să înregistrați noi variații de stil pentru blocuri precum butoane, titluri și citate.
Pentru cea mai sigură și mai ușoară metodă, recomand utilizarea pluginului WPCode pentru a insera codul. Acest lucru evită riscul de a edita direct fișierul functions.php al temei dvs.
Iată o prezentare generală rapidă a ceea ce voi acoperi în acest articol:
- Ce sunt stilurile personalizate și cum pot schimba modul în care utilizați WordPress
- Cum să adăugați stiluri personalizate la editorul vizual WordPress (Editor bloc)
- Bonus: Cum să adăugați stiluri personalizate la widgeturile WordPress
- Întrebări frecvente despre stilurile personalizate
Acum să intrăm direct în subiect!
Ce sunt stilurile personalizate și cum pot schimba modul în care utilizați WordPress
În termeni simpli, un stil personalizat este o scurtătură de formatare pre-proiectată în editorul WordPress.
Rezolvă problema ajustării manuale a fonturilor, culorilor și layout-urilor de fiecare dată când creați conținut, ceea ce poate consuma timp și poate duce la inconsecvențe.
De exemplu, puteți crea un font personalizat pentru anteturi, alege o culoare de fundal pentru casetele de apelare sau aplica un stil consistent pentru testimonialele.
Gândește-te la asta ca la un șablon pentru elementele de design. În loc să ajustezi manual spațierea, fonturile sau culorile de fiecare dată, alegi stilul tău personalizat și acesta aplică instantaneu designul preferat.
De exemplu, să spunem că aveți un blog de afaceri și includeți întotdeauna o recomandare de produs sau un disclaimer la sfârșitul postărilor dvs. În loc să îl stilizați de fiecare dată, ați putea crea un stil personalizat numit „Sfat Produs” sau „Notă Importantă” și să îl aplicați instantaneu.
Acest lucru vă economisește timp și asigură că totul rămâne lustruit, mai ales dacă lucrați cu o echipă sau publicați mult conținut.
Acestea fiind spuse, să vedem cum să adăugăm cu ușurință stiluri personalizate la editorul vizual WordPress.
Cum să adăugați stiluri personalizate la editorul vizual WordPress (Editor bloc)
Dacă doriți să adăugați stiluri personalizate în editorul de blocuri, cea mai eficientă modalitate de a face acest lucru este utilizarea codului PHP. Dar țineți cont că această abordare este cea mai potrivită pentru utilizatorii intermediari de WordPress.
Acest lucru se datorează faptului că va trebui să editați fișierul functions.php al temei dvs., iar chiar și cea mai mică eroare vă poate defecta site-ul. Acestea fiind spuse, puteți utiliza un plugin prietenos pentru începători pentru a simplifica procesul.
Recomand întotdeauna WPCode pentru acest tip de personalizare. În opinia mea, este cel mai bun plugin pentru fragmente de cod WordPress de pe piață. L-am testat amănunțit și am constatat că este cea mai ușoară și mai sigură modalitate de a adăuga cod personalizat, fără riscul de erori.
Pentru a afla mai multe, consultați recenzia completă WPCode a echipei mele.
📌 Notă importantă: Indiferent de nivelul dvs. de competență, recomand întotdeauna crearea unei copii de rezervă complete a site-ului dvs. înainte de a modifica orice cod important. Consultați ghidul nostru despre cum să faci backup site-ului tău WordPress pentru instrucțiuni despre cum să faci acest lucru.
Rețineți că fragmentul de cod pe care îl voi folosi este configurat implicit pentru a adăuga stiluri personalizate pentru blocul Buton. Dar cu câteva ajustări minore, îl puteți folosi cu ușurință pentru a suporta alte blocuri precum:
- 🔷 Titluri cu stiluri fancy sau conturate
- 💬 Blocuri de citate, citate extrase și versuri
- 🗂️ Blocuri de arhive sau categorii
- ➕ Și altele
Acest lucru vă oferă multă flexibilitate pentru a proiecta stiluri reutilizabile pe întregul site.
Mai întâi, trebuie să instalați și să activați pluginul WPCode. Dacă aveți nevoie de ajutor, consultați ghidul nostru pentru începători despre cum să instalați un plugin WordPress.
📌 Notă: WPCode are și un plan gratuit pe care îl puteți utiliza. Cu toate acestea, actualizarea la versiunea pro vă oferă acces la funcționalități precum o bibliotecă cloud de fragmente de cod, funcția de fragment de bloc, logică condițională inteligentă și multe altele.
După ce activați pluginul, accesați pagina Code Snippets » +Add Snippet din tabloul de bord. Aici, faceți clic pe butonul ‘Use Snippet’ sub opțiunea ‘Add Your Custom Code (New Snippet)’.
Acest lucru te va direcționa către pagina „Creare fragment personalizat”, unde trebuie să numești fragmentul de cod. Acest nume va fi doar pentru identificarea ta și nu va fi afișat niciunui utilizator.
Apoi, alegeți PHP Snippet din promptul care apare după ce faceți clic pe opțiunea ‘Code Type’ din colțul din dreapta.
După aceea, dacă doriți să creați un stil personalizat pentru un buton, adăugați următorul cod personalizat în caseta „Previzualizare cod”.
// Function to enqueue and register styles for both frontend and editor
function my_custom_button_styles() {
// Register the style only once
wp_register_style(
'my-custom-button-styles',
false
);
// Add inline styles
wp_add_inline_style(
'my-custom-button-styles',
<<<CSS
.is-style-fancy-button .wp-block-button__link {
background-color: #f0c040;
color: #fff;
border: none;
border-radius: 15px;
padding: 10px 20px;
}
.is-style-outline-button .wp-block-button__link {
background-color: transparent;
color: #333;
border: 2px solid #333;
border-radius: 5px;
padding: 10px 20px;
}
CSS
);
// Enqueue the style for both frontend and editor
wp_enqueue_style('my-custom-button-styles');
}
// Function to add custom styles for Gutenberg editor
function my_custom_gutenberg_button_styles() {
// Call the general styles function for the editor
my_custom_button_styles();
// Enqueue inline script for the editor to register block styles
wp_add_inline_script(
'wp-blocks',
<<<JS
wp.domReady(function() {
wp.blocks.registerBlockStyle('core/button', {
name: 'fancy-button',
label: 'Fancy Button'
});
wp.blocks.registerBlockStyle('core/button', {
name: 'outline-button',
label: 'Outline Button'
});
});
JS
);
}
// Hook the styles function to frontend
add_action('wp_enqueue_scripts', 'my_custom_button_styles');
// Hook the custom block style registration
add_action('enqueue_block_editor_assets', 'my_custom_gutenberg_button_styles');
Acest fragment de cod adaugă două stiluri personalizate blocului Butoane în WordPress.
Partea grozavă este că puteți adapta acest cod pentru a crea stiluri și pentru alte blocuri. Cu toate acestea, necesită puțin mai mult decât simpla înlocuire a cuvântului „buton”. Pentru a funcționa corect, trebuie să actualizați două părți cheie ale codului:
- Numele Blocului (Slug): În partea JavaScript a codului, veți găsi
'core/button'. Acesta este numele oficial pentru blocul Buton WordPress. Trebuie să înlocuiți acest lucru cu slug-ul blocului pe care doriți să îl stilizați (de exemplu,'core/heading'). - Selectorii CSS: Codul CSS (cum ar fi
.is-style-fancy-button .wp-block-button__link) este scris specific pentru HTML-ul blocului Buton. Alte blocuri au o structură diferită, deci va trebui să scrieți noi reguli CSS pentru a le ținti corect.
De asemenea, puteți ajusta CSS-ul pentru a schimba culoarea de fundal, a ajusta raza bordurii și a face alte modificări de stil pentru a se potrivi nevoilor dumneavoastră.
💡 Sfat de expert: Dacă ezitați să personalizați singur codul, un asistent AI precum ChatGPT poate fi un punct de plecare bun. Cu toate acestea, obținerea codului corect necesită oferirea unui prompt foarte clar și detaliat.
De exemplu, în loc de o solicitare simplă, ați putea oferi un prompt de genul acesta:
Here is a PHP, CSS, and JS snippet that adds custom styles to the 'core/button' block in WordPress. Please adapt it to target the 'core/heading' block instead. The new style should be named 'Green Highlight' and it should add a light green background color.
Cu toate acestea, recomand întotdeauna să testați codul generat de AI pe un site de staging înainte de a-l adăuga pe site-ul dvs. live. Acest lucru vă permite să detectați orice erori potențiale fără risc.
Acum, continuați și comutați comutatorul „Inactiv” la „Activ”.
În final, faceți clic pe butonul „Salvează fragmentul” pentru a stoca modificările.
Apoi, deschideți o postare în editorul de blocuri și adăugați blocul pentru care ați adăugat stiluri personalizate.
De exemplu, dacă ați adăugat stiluri personalizate pentru blocul Butoane, continuați și inserați-l în postarea dvs.
Odată ce faceți acest lucru, veți vedea stilurile personalizate disponibile în secțiunea „Stiluri” din panoul blocului.
După aceea, apasă pe butonul „Actualizare” sau „Publicare” pentru a salva modificările.
Apoi, vizitați site-ul dvs. WordPress pentru a vedea stilurile personalizate în acțiune.
Bonus: Cum să adăugați stiluri personalizate la widgeturile WordPress
Acum că ați învățat cum să adăugați stiluri personalizate la editorul vizual WordPress, să analizăm o altă personalizare utilă: adăugarea de stiluri personalizate la widgeturile WordPress.
Personalizarea widgeturilor cu culori, fonturi sau aspecturi unice ajută la asigurarea corespondenței cu designul general al site-ului dvs., îmbunătățind experiența utilizatorului.
Cel mai simplu mod de a adăuga stiluri personalizate la widgeturile WordPress este prin utilizarea unui fragment de cod CSS, pe care îl puteți adăuga cu un plugin precum WPCode.
Puteți adăuga pur și simplu CSS personalizat care vizează widget-uri specifice și ajustați elemente precum dimensiunile fonturilor, culorile de fundal, spațierea și chiar chenarele.
Acest lucru este perfect pentru a vă asigura că widgeturile dvs. se potrivesc cu designul general, fără a fi nevoie să intrați prea mult în detalii tehnice.
Pentru a începe, consultați tutorialul nostru despre cum să adăugați stiluri personalizate la widget-urile WordPress.
Întrebări frecvente despre stilurile personalizate
Iată câteva întrebări pe care cititorii noștri le-au adresat frecvent despre adăugarea de stiluri personalizate la editorul vizual WordPress:
Pot adăuga stiluri personalizate fără a folosi un plugin?
Da, este posibil să adăugați codul direct în fișierul functions.php al temei dvs. Cu toate acestea, nu recomand această metodă pentru începători.
O mică greșeală în acel fișier vă poate defecta site-ul, iar personalizările dvs. se vor pierde la actualizarea temei. Utilizarea WPCode este cea mai sigură și mai fiabilă abordare.
Vor funcționa aceste stiluri personalizate cu orice temă WordPress?
În general, da. Codul utilizat în acest tutorial înregistrează stiluri cu editorul de bază WordPress, deci ar trebui să fie compatibil cu orice temă modernă, bine codificată.
În cazuri rare, o temă cu CSS foarte agresiv sau prost scris ar putea suprascrie stilurile dvs. personalizate, dar acest lucru nu este comun.
Cum găsesc numele corect (slug) pentru alte blocuri pe care vreau să le stilizez?
O modalitate ușoară de a găsi slug-ul unui bloc este să intrați în editorul WordPress, să selectați blocul care vă interesează și apoi să faceți clic pe meniul cu trei puncte din bara de instrumente a blocului.
În partea de jos a acelui meniu, faceți clic pe „Copiere tip bloc”. Acest lucru va copia slug-ul blocului (de exemplu, core/image, core/quote) în clipboard, pe care îl puteți apoi lipi în fragmentul de cod.
Pot crea mai mult de două stiluri personalizate pentru același bloc?
Absolut. În porțiunea JavaScript a fragmentului de cod, puteți pur și simplu să duplicați funcția wp.blocks.registerBlockStyle(...) pentru fiecare stil nou pe care doriți să îl adăugați.
Asigurați-vă doar că îi dați fiecăruia un nume și o etichetă unice. Va trebui, de asemenea, să adăugați reguli CSS corespunzătoare pentru fiecare stil nou pe care îl înregistrați.
Sperăm că acest articol v-a ajutat să învățați cum să adăugați stiluri personalizate în editorul vizual WordPress. S-ar putea să doriți, de asemenea, să consultați ghidul nostru pentru începători despre cum să creați un bloc WordPress personalizat și comparația noastră între padding și margin în WordPress.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Toufic Ahemmed
Acești băieți sunt grozavi. M-au ajutat de cele mai multe ori. Vă mulțumesc foarte, foarte mult.
Suport WPBeginner
Glad we could help
Admin
Aslan French
Acest articol ar trebui actualizat având în vedere Gutenberg, deoarece acest tip de funcționalitate a fost adăugat recent la API-ul Rich Text.
Suport WPBeginner
Salut Aslan,
Mulțumim pentru sugestie. Vom analiza cu siguranță articolele mai vechi odată ce Gutenberg va fi lansat.
Admin
Mehrdad
Mulțumesc mult.
Acest articol m-a ajutat cu adevărat.
sabbi
Acest lucru adaugă clase la o etichetă p, nu-i așa?
Există o modalitate de a crea chiar și propriile etichete?
Sau altceva: un format personalizat ales va suprascrie o etichetă h aleasă anterior cu un p? Ar fi necesar pentru a împiedica un client să aibă probleme atunci când dă clic în stilurile implicite ȘI personalizate.
Britany
Din păcate, acest lucru nu m-a ajutat deloc. Există un articol care explică ce înseamnă fiecare dintre câmpurile pe care trebuie să le completați?
Tot ce am nevoie este o modalitate de a aplica aceeași formatare citatelor de pe paginile de note ale emisiunii mele de podcast. Fiecare citat este același font (pe care l-am configurat ca stil de titlu), îngroșat și centrat.
Mă obosesc să aplic manual fiecare parte a formatului fiecărui citat și îmi doresc doar o modalitate de a apăsa un singur buton și de a termina.
Syams
Vă rog, spuneți-mi cum să adaug un nou font la editorul vizual WP.
Moya Nicholson
Mulțumesc. Foarte util.
stanley
Trebuie să-mi modific tema WP
Ajutați-mă, vă rog
Sandy Connolly
MULȚUMESC PENTRU ASTA!!! OMG!!!! Cât de util la predarea unui site unui client care dorește să poată adăuga propriul conținut pe baza designului nostru!
Marcin
Salut, dezvolt WordPress-uri în fiecare zi și fac totul cu WP, dar această bucată de cod este una dintre cele mai utile pe care le-am văzut de mult timp… Este exact ceea ce lipsea editorului WYSIWYG implicit (acum pot spune: lipsea)! Permite realizarea unor lucruri uimitoare în câmpul de conținut. Mulțumesc pentru partajare!
Foxglove
Folosesc acest plugin de ceva timp, dar nu mai este disponibil pe wordpress.org — aparent nu mai este actualizat sau suportat. Știe cineva despre alternative, în afară de metoda manuală pe care o descrieți?
Lisa McMahon
Iată o versiune actualizată/fork a pluginului original menționat în articol: TinyMCE Custom Styles
Suport WPBeginner
Salut Lisa, mulțumim că ai atras atenția asupra acestui aspect. Am actualizat articolul cu versiunea actualizată/forked.
Admin
Shubha Das
Vreau să adaug p în loc de span. Dar când schimb numele block span în p, nu funcționează.
‘title’ => ‘Notă’,
‘block’ => ‘p’,
‘classes’ => ‘note’,
‘wrapper’ => true,
MacKenzie
Am găsit acest lucru foarte util și simt că aproape am reușit, dar încă nu funcționează complet. Textul meu este etichetat corect cu etichetele span și class în editor atunci când este selectat – dar niciunul dintre stilurile pe care le-am pus în foaia de stiluri nu este aplicat notei publicate.
Frank
Mă panichez mereu și simt că voi vomita dacă un client are nevoie de ajustări la WordPress. Calm, acest selector de stiluri DAR, așa cum a spus cineva mai devreme, complet inutil dacă stilurile nu pot fi retrase ulterior și doar se adaugă, se adaugă, se adaugă...
M-am obișnuit cu aceste soluții pe jumătate gata în WordPress – de obicei există și soluții complementare pe jumătate gata pentru a repara prima. Dar aici?
Acum CUM ați sugera să ELIMIN STILURILE PERSONALIZATE adăugate prin meniul derulant de stiluri. Vizualizarea codului nu este în niciun fel acceptabilă pentru clientul meu?
Aș fi incredibil de norocos dacă cineva ar fi găsit o modalitate de a face asta și ar împărtăși această cunoaștere (și pentru a scoate catastrofa numită wordpress din raza mea pentru (sper) o perioadă foarte lungă de timp).
Mulțumesc mult anticipat!
Frank
Chris
Apăsați din nou pe stil în meniul derulant. Gata.
Shafi ken
Mulțumesc pentru tutorialul util. Mulțumesc
K Shazzad
Whole tutorial worked flawlessly for me. Thanks a bunch
Stef
Am încercat acest plugin, dar mi-am dat seama că, atunci când schimbați un stil personalizat, acesta nu va actualiza pe cele pe care le-ați inserat deja. Trebuie să vă întoarceți și să le reintroduceți, deoarece funcția adaugă stilul inline și nu prin fișierul de stiluri.
Phil
Mulțumesc pentru tutorialul util. Există vreo penalizare de performanță în utilizarea pluginului în loc să îl codificați manual? Mulțumesc,
Suport WPBeginner
Nu, dar pentru reutilizarea elementelor, această metodă este destul de utilă. Este, de asemenea, utilă dacă construiți un site pentru un client și doriți ca acesta să poată adăuga lucruri din editorul vizual.
Admin
Sei
Mulțumesc pentru tutorial!
Există o modalitate de a adăuga două marcaje simultan? De exemplu, obținând ceva de genul text
Sei
Ok, comentariile dvs. convertesc HTML. Adică, aș dori să obțin atât marcajele „h1”, cât și „span” în jurul textului meu, făcând clic pe un singur stil.
Lily
Am reușit să fac clasele personalizate și elementele apar cu clasele corecte în editorul de text și pe pagină, dar clasa nu este aplicată în editorul vizual, ceea ce face foarte neclar dacă a funcționat sau nu pentru utilizator. Există vreo modalitate de a remedia acest lucru?
Bonnie Dasher-Andersen
Am adăugat două stiluri personalizate. Când editez o pagină, am două meniuri Format, fiecare cu aceleași intrări (cele două stiluri pe care le-am creat). Când încerc să aplic aceste stiluri, nu se întâmplă nimic. Pot vedea tag-ul în vizualizarea Text, dar când vizualizez pagina – stilul nu a fost aplicat.
Aveți sugestii? Trebuie să rezolv asta pentru un client care va actualiza acest site WP și nu este foarte priceput.
Marcello
Am avut aceeași problemă, unde tag-urile nu erau aplicate codului. Am rezolvat setând 'wrapper' la 'false'. Nu știu motivele tehnice, doar am testat și a funcționat. Sper să ajute!
hugotom
Am avut aceeași problemă că foaia de stil nu este înregistrată.
Soluție
Dacă aveți deja aceste foi de stil de înregistrare în fișierul functions.php ar trebui să adăugați chiar acolo stylesheet custom-editor-style.css
Exemplu:
function styles_theme(){ wp_enqueue_style(‘bootstrap_css’, get_template_directory_uri() . ‘/sources/bootstrap/bootstrap.min.css’); wp_enqueue_style(‘main_css’, get_template_directory_uri() . ‘/style.css’); wp_enqueue_style(‘theme_css’, get_template_directory_uri() . ‘/custom/css/theme.css’); wp_enqueue_style(‘editor_css’, get_template_directory_uri() . ‘/custom-editor-style.css’); // AICI };
Raphael Landau
Am folosit acest lucru și am avut, de asemenea, problema în care stilul/clasa este implementat întregului paragraf. Acest lucru se datorează faptului că ați setat formatul stilului ca „bloc”. (‘block’ => ‘span’,).
Vizitând rapid codex-ul oficial Wordpress, descoperă mult mai multe opțiuni pentru formatarea stilului.
http://codex.wordpress.org/TinyMCE_Custom_Styles
Deoarece span este un stil inline în mod implicit, ar trebui să înlocuiți „block” cu „inline”, și voila! Stilul dvs. ar trebui să funcționeze așa cum era de așteptat.
deci, pe scurt:
array( ‘titlu’ => ‘Titlul tău’, ‘inline’ => ‘span’, ‘clase’ => ‘clasa-ta’, ‘wrapper’ => true, ),
nemaha
Salut,
excelent tutorial, mulțumesc pentru asta! Și eu am problema, că stilul (un span) este aplicat întregului paragraf. Ce intenționez să fac: Să scriu un titlu și să îl formatez ca antet 1, apoi să marchez doar un cuvânt specific din acel titlu pentru a adăuga un stil personalizat. Aveți vreo actualizare despre cum să rezolv asta? Mulțumesc!
bekee
și eu am problema în care aplică stilul întregului paragraf, nu doar elementului selectat. Aveți vreo actualizare în acest sens? Mulțumesc!
Debbie
Am aceeași problemă. Evidențiez un cuvânt, dar efectul se aplică întregului paragraf.
James
Am găsit câteva probleme. Pare să funcționeze, dar nu așa cum era de așteptat. Nu va fi util pentru cineva care nu știe cod.
1. Evidențiați un singur cuvânt dintr-un paragraf pentru a adăuga un, dar este adăugat întregului paragraf, nu doar cuvântului evidențiat.
2. Nu există nicio modalitate de a elimina css-ul fără a edita codul. Clientul meu nu lucrează cu cod! Am încercat chiar să creez o clasă de .nothing, dar noua clasă este adăugată doar altora, nu înlocuiește clasa existentă.
Echipa WPBeginner
Consultați ghidul nostru despre cum să reparați problemele comune legate de imagini în WordPress.
Sheikh Zuhaib Siddiqui
Salut, am o eroare la adăugarea media. Când încerc să încarc orice media, doar continuă să se încarce și nu afișează nicio media și nu pot încărca media... Spuneți-mi care este greșeala aici???
Dar asta funcționează bine... doar eroarea este la încărcătorul de media. Vă rog să-mi oferiți această soluție.
Marlice
Salut. Mulțumesc pentru acest tutorial grozav. Am o problemă cu conținutul care se află deja în editor. Dacă marchez un cuvânt sau o parte de text și aleg un stil (de exemplu, „buton albastru” – din codul tău), acesta nu înfășoară doar cuvântul sau partea de text marcată. În schimb, marchează întregul conținut și pune un span cu clasa .blue button pe el. Am încercat de mai multe ori cu alte pagini și postări – mereu la fel: dacă conținutul era deja acolo și l-am marcat, atunci întregul conținut primește clasa span. Acest lucru nu se întâmplă dacă înfășor un text nou editat în pagină/postare – atunci totul funcționează bine. A mai întâmpinat cineva acest fenomen?
Mulțumesc,
Ute
John-Henry Ross
Salut. Am încercat această metodă și funcționează de minune, exact ceea ce căutam, mulțumesc. Vreau doar să aflu dacă există o modalitate de a adăuga stiluri într-un subfolder în loc să le adaug doar sub un buton de format. De exemplu, adăugați un subfolder de titluri cu toate stilurile de titluri, adăugați un submeniu div cu stiluri div, etc.
dave
Mulțumesc!
E grozav să arăți 2 metode, de asemenea… clienții mei se ascund de frică la manipularea oricărui cod.
I will sometimes use custom fields to “force” safe additional styles, but the TinyMCE can be handled by some people, so I’ll kee that in mind.
Ciao, Dave
Echipa WPBeginner
nu trebuie să adăugați punctul
classes’ => ‘.alert-blue’,
Ar trebui să fie
classes’ => ‘alert-blue’,
Jeff Gaudette
Din păcate, acest lucru nu a funcționat. Am eliminat punctul, dar totuși nimic nu se aplică în editor. Știu că nu sunteți un birou de asistență, dar iată o captură de ecran dacă sunteți interesat: http://screencast.com/t/JI0zMvcH
Mulțumesc pentru toate lucrurile grozave pe care le publicați!
Echipa WPBeginner
Poți să postezi codul pe care l-ai adăugat în fișierul functions.php. Postează și CSS-ul pe care îl folosești pentru acești butoni.
Jeff Gaudette
Sigur. Funcții:
/*
* Funcție de apel invers pentru a filtra setările MCE
*/
function my_mce_before_init_insert_formats( $init_array ) {
// Definește array-ul style_formats
$style_formats = array( // Fiecare element al array-ului este un format cu propriile setări array( 'title' => 'Alert', 'block' => 'span', 'classes' => 'entry p.alert-blue', 'wrapper' => true )
),
array(
‘title’ => ‘Alert Albastru’,
‘block’ => ‘p’,
‘classes’ => ‘alert-blue’,
‘wrapper’ => true,
),
array(
‘title’ => ‘Buton Albastru’,
‘block’ => ‘span’,
‘classes’ => ‘alert-blue-button’,
‘wrapper’ => true,
),
);
// Inserează array-ul, codificat în JSON, în ‘style_formats’
$init_array[‘style_formats’] = json_encode( $style_formats );
return $init_array;
}
// Atașează callback la ‘tiny_mce_before_init’
add_filter( ‘tiny_mce_before_init’, ‘my_mce_before_init_insert_formats’ );
CSS
.alert-blue{ background: none repeat scroll 0 0 #E7F4FD; border: 1px solid #C5D7E3; color: #3A5971; font-size: 18px; line-height: 24px; text-align: center; margin: 0 0 15px !important; padding: 15px 25px; width: auto; }
Echipa WPBeginner
Ați adăugat CSS-ul în foaia de stiluri?
Asigură-te că regulile de stil pe care le adaugi în CSS corespund claselor pe care le adaugi în funcția de apel pentru a filtra setările MCE.
Kemi O
TinyMCE Advanced Formate și Stiluri Profesionale este suportat doar până la versiunea WP 3.6.1
Keely Worth
Evit Editorul Vizual ca pe ciumă! Îl folosesc doar dacă trebuie să trec la el pentru a folosi butonul de shortcode încorporat al unei teme. Altfel – nu-l folosesc niciodată.
Blair2004
Am încercat prima metodă, noile stiluri sunt disponibile, dar, în timp ce selectez unul, nu se întâmplă nimic...
Jeff Gaudette
Încerc să fac asta cu un bloc și nu am succes. Codul este:
array( ‘titlu’ => ‘Alertă Albastră’, ‘bloc’ => ‘p’, ‘clase’ => ‘.alert-blue’, ‘înfășurare’ => true, ),
Funcționează când folosesc span, dar acest lucru necesită o clasă span, pe care nu o pot folosi.
Când folosesc codul de mai sus, nu se întâmplă nimic în editorul wp. Selectez textul, fac clic pe opțiunea de formatare Alert Blue și nu se întâmplă nimic: http://screencast.com/t/dijujZ2ZdqBy
Aveți vreun sfat?