Doriți să creați propriul meniu derulant cu stiluri personalizate? Deși probabil există un plugin pentru asta, am creat un scurt fragment de cod pe care îl puteți folosi pentru a crea un meniu derulant cu stiluri personalizate în editorul vizual TinyMCE.
Instrucțiuni:
Tot ce trebuie să faceți este să adăugați acest cod în fișierul functions.php al temei dvs. sau într-un plugin specific site-ului:
function themeit_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_2', 'themeit_mce_buttons_2' );
function themeit_tiny_mce_before_init( $settings ) {
$settings['theme_advanced_blockformats'] = 'p,a,div,span,h1,h2,h3,h4,h5,h6,tr,';
$style_formats = array(
array( 'title' => 'Button', 'inline' => 'span', 'classes' => 'button' ),
array( 'title' => 'Green Button', 'inline' => 'span', 'classes' => 'button button-green' ),
array( 'title' => 'Rounded Button', 'inline' => 'span', 'classes' => 'button button-rounded' ),
array( 'title' => 'Other Options' ),
array( 'title' => '½ Col.', 'block' => 'div', 'classes' => 'one-half' ),
array( 'title' => '½ Col. Last', 'block' => 'div', 'classes' => 'one-half last' ),
array( 'title' => 'Callout Box', 'block' => 'div', 'classes' => 'callout-box' ),
array( 'title' => 'Highlight', 'inline' => 'span', 'classes' => 'highlight' )
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
add_filter( 'tiny_mce_before_init', 'themeit_tiny_mce_before_init' );
Notă: Dacă este prima dată când adăugați secvențe de cod în WordPress, consultați ghidul nostru despre cum să copiați / lipiți corect secvențe de cod în WordPress, pentru a nu vă defecta accidental site-ul.
Dacă v-a plăcut această secțiune de cod, vă rugăm să luați în considerare să consultați și celelalte articole de pe site, cum ar fi: 46 dintre cele mai mari branduri din lume care folosesc activ WordPress și cum să creați un formular personalizat de înregistrare a utilizatorilor în WordPress.
Nu pare să mai funcționeze. Tocmai am adăugat asta, nu s-a întâmplat nimic în MCE-ul meu. Poate un conflict cu tema/page builder-ul meu? (Madrigal/WPBakery)
Îmi pare rău că am dezgropat un post vechi, dar există vreo modalitate de a face acest lucru și de a crea 2 meniuri derulante separate pentru „Format”? Aș dori unul care să conțină opțiuni P și unul care să conțină opțiuni de culoare, dacă este posibil.
Vă mulțumesc FOARTE mult pentru asta. Foloseam un alt fragment de cod pentru același efect, dar după ce am făcut upgrade la WP cu noul plugin TinyMCE, acel cod nu mai funcționa. Am încercat asta și încă funcționează.
Apreciez.
Perfect, mă bucur să aud că acest fragment TinyMCE v-a fost de ajutor!
Vă mulțumesc FOARTE mult pentru asta. Foloseam un alt fragment de cod pentru același efect, dar după ce am făcut upgrade la WP cu noul plugin TinyMCE, acel cod nu mai funcționa. Am încercat asta și încă funcționează.
Apreciez.
Vă mulțumesc FOARTE mult pentru asta. Foloseam un alt fragment de cod pentru același efect, dar după ce am făcut upgrade la WP cu noul plugin TinyMCE, acel cod nu mai funcționa. Am încercat asta și încă funcționează.
Apreciez.
Vă mulțumesc FOARTE mult pentru asta. Foloseam un alt fragment de cod pentru același efect, dar după ce am făcut upgrade la WP cu noul plugin TinyMCE, acel cod nu mai funcționa. Am încercat asta și încă funcționează.
Apreciez.
Vă mulțumesc FOARTE mult pentru asta. Foloseam un alt fragment de cod pentru același efect, dar după ce am făcut upgrade la WP cu noul plugin TinyMCE, acel cod nu mai funcționa. Am încercat asta și încă funcționează.
Apreciez.
Vă mulțumesc FOARTE mult pentru asta. Foloseam un alt fragment de cod pentru același efect, dar după ce am făcut upgrade la WP cu noul plugin TinyMCE, acel cod nu mai funcționa. Am încercat asta și încă funcționează.
Apreciez.
Postare grozavă Kevin, mulțumesc. Există vreo modalitate de a elimina stilurile din editor, în același mod în care utilizatorul poate face clic pe butonul de eliminare formatare?
Mulțumesc Kevin,
Aceasta este exact soluția pe care o căutam.
Perfect, mă bucur să văd că vă place fragmentul 🙂
genial! MULȚUMESC!!! aceasta este exact soluția pe care o căutam… chiar și cu stilurile potrivite gata pregătite!
@twitter-17003417:disqus Cool, mă bucur că găsiți acest fragment WordPress util. Stilurile potrivite, wow, e ca și cum ți-aș putea citi gândurile 😉 salutări, bucurați-vă…
Mulțumesc Kevin,
Am găsit o soluție funcțională cu întreruperi de linie folosind Tag-ul More (split content).
Este, de asemenea, foarte ușor de adăugat.
Nu vreau să pun URL-uri aici, dar asta m-a ajutat mult.
http://digwp.com/2010/03/wordpress-post-content-multiple-columns/
Kevin, scuze, dar am o ultimă întrebare.
Codul funcționează corect, există doar o mică problemă cu WordPress care înfășoară fiecare paragraf într-o singură coloană stânga sau dreapta.
Aceasta este funcția mea, nimic deosebit.
function themeit_mce_buttons_2( $buttons ) { array_unshift( $buttons, 'styleselect' ); return $buttons;}add_filter( 'mce_buttons_2', 'themeit_mce_buttons_2' );function themeit_tiny_mce_before_init( $settings ) { $settings['theme_advanced_blockformats'] = 'p,a,div,span,h1,h2,h3,h4,h5,h6,tr,'; $style_formats = array( array( 'title' => 'Adaugă coloane' ), array( 'title' => '← Coloană', 'block' => 'div', 'classes' => 'content-col-left' ), array( 'title' => 'Coloană →', 'block' => 'div', 'classes' => 'content-col-right' ) ); $settings['style_formats'] = json_encode( $style_formats ); return $settings;}add_filter( 'tiny_mce_before_init', 'themeit_tiny_mce_before_init' );
Și când încep să scriu o poveste,
Să zicem că este o poveste cu 3 paragrafe, și când am terminat de scris, selectez tot conținutul (3 paragrafe) împreună și apăs butonul stil > Butonul Coloană stângă din editorul TinyCME, dar înfășoară fiecare paragraf într-un singur...
Este foarte frustrant să văd asta și din motive necunoscute nu reușesc să fac să funcționeze.
Doresc ca cele 3 paragrafe ale mele să fie înfășurate în etichete P și toate cele 3 etichete P împreună să fie înfășurate într-un singur div cu clasa left-column.
Salut B.J. Da, pot vedea ce vrei să spui, ar fi frustrant, dar în momentul în care lucrurile sunt inserate, acesta ar fi TinyMCE și nu parte din snippet-ul meu, așa că nu cred că se poate face nimic. Snippet-ul doar adaugă noi setări,
Totuși, ați încercat să adăugați o linie nouă după ce unește cele trei paragrafe într-unul singur? asta rezolvă lucrurile. Mă voi juca cu lucrurile și voi vedea dacă pot face ceva în privința asta pentru tine.
Mulțumesc mult Kevin,
Nicio problemă, mă bucur că am putut ajuta.
Ai putea face coloane cu acele stiluri de meniu derulant?
Ca în meniul derulant:
Adaugă coloana 1 (aceasta va adăuga acest cod)
Cursorul ar trebui să fie aici pentru a introduce conținut în PDupă aceea, alege din meniul derulant Adaugă coloana 2
Pentru a adăuga o a doua coloană de text lângă prima.
Cred că este foarte dificil să împarți textul în 2 coloane la div-ul de introducere a conținutului dacă nu știi cum funcționează HTML.
Aș dori să știu asta pentru un client de-al meu care poate lucra doar cu un editor WYSIWYG, dar ar dori să aibă o opțiune pentru două coloane la div-ul de introducere.
Scuze pentru engleza mea slabă 🙁
Salut B.J. da, ai putea adăuga un div cu clasa class=”rgt-column” și altul cu clasa class=”lft-column”, apoi depinde de tine cum configurezi CSS-ul pentru a face asta să funcționeze ca niște coloane. Dacă vrei ca CSS-ul să creeze coloanele folosite în editor, poți adăuga acest mic cod și să creezi o nouă foaie de stil cu codul pentru coloane.
function wps_add_editor_style() { add_editor_style( ‘editor-style-columns.css’ ); } add_action( ‘after_setup_theme’, ‘wps_add_editor_style’ );În acest fel, ei pot vedea conținutul pe mai multe coloane, poate fi necesar să ajustați puțin acest lucru pentru a funcționa așa cum ați dori.