Vuoi creare il tuo menu a discesa con stili personalizzati? Sebbene probabilmente esista un plugin per questo, abbiamo creato un rapido snippet di codice che puoi utilizzare per creare un menu a discesa con stili personalizzati nell'editor visivo di TinyMCE.
Istruzioni:
Tutto quello che devi fare è aggiungere questo codice al file functions.php del tuo tema o in un plugin specifico per il sito:
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' );
Nota: Se questa è la prima volta che aggiungi snippet di codice in WordPress, consulta la nostra guida su come copiare / incollare correttamente snippet di codice in WordPress, in modo da non rompere accidentalmente il tuo sito.
Se ti è piaciuto questo snippet di codice, prendi in considerazione la lettura dei nostri altri articoli sul sito come: I 46 marchi più grandi del mondo che utilizzano attivamente WordPress e come creare un modulo di registrazione utente personalizzato in WordPress.
Non sembra più funzionare. Ho appena aggiunto questo, non è successo nulla nel mio MCE. Forse un conflitto con il mio tema/page builder? (Madrigal/WPBakery)
Scusa per aver riesumato un post vecchio, ma c'è un modo per farlo e creare 2 menu a discesa 'Formato' separati? Mi piacerebbe uno contenente opzioni P e uno contenente opzioni di colore, se possibile.
Grazie MILLE per questo. Stavo usando un altro snippet di codice per lo stesso effetto, ma dopo l'aggiornamento a WP con il nuovo plugin TinyMCE, quel codice non funzionava più. Ho provato questo e funziona ancora.
Lo apprezzo.
Perfetto, sono contento di sapere che questo snippet TinyMCE ti è stato d'aiuto!
Grazie MILLE per questo. Stavo usando un altro snippet di codice per lo stesso effetto, ma dopo l'aggiornamento a WP con il nuovo plugin TinyMCE, quel codice non funzionava più. Ho provato questo e funziona ancora.
Lo apprezzo.
Grazie MILLE per questo. Stavo usando un altro snippet di codice per lo stesso effetto, ma dopo l'aggiornamento a WP con il nuovo plugin TinyMCE, quel codice non funzionava più. Ho provato questo e funziona ancora.
Lo apprezzo.
Grazie MILLE per questo. Stavo usando un altro snippet di codice per lo stesso effetto, ma dopo l'aggiornamento a WP con il nuovo plugin TinyMCE, quel codice non funzionava più. Ho provato questo e funziona ancora.
Lo apprezzo.
Grazie MILLE per questo. Stavo usando un altro snippet di codice per lo stesso effetto, ma dopo l'aggiornamento a WP con il nuovo plugin TinyMCE, quel codice non funzionava più. Ho provato questo e funziona ancora.
Lo apprezzo.
Grazie MILLE per questo. Stavo usando un altro snippet di codice per lo stesso effetto, ma dopo l'aggiornamento a WP con il nuovo plugin TinyMCE, quel codice non funzionava più. Ho provato questo e funziona ancora.
Lo apprezzo.
Ottimo post Kevin, grazie. C'è un modo per rimuovere gli stili nell'editor, in modo simile a come l'utente può fare clic sul pulsante 'rimuovi formattazione'?
Grazie Kevin,
Questa è esattamente la soluzione che stavo cercando.
Perfetto, sono contento che ti piaccia lo snippet :)
Brillante! GRAZIE!!! questa è esattamente la soluzione che stavo cercando... anche con gli stili giusti già pronti!
@twitter-17003417:disqus Fantastico, sono contento che tu trovi utile questo snippet per WordPress. Gli stili giusti, wow, è come se potessi leggerti nel pensiero 😉 saluti, goditelo...
Grazie Kevin,
Ho trovato una soluzione che funziona con le interruzioni di riga utilizzando il Tag More (contenuto diviso). È anche molto facile da aggiungere.
Non voglio inserire URL qui, ma questo mi ha aiutato molto. http://digwp.com/2010/03/wordpress-post-content-multiple-columns/
Kevin, scusa ma ho un'ultima domanda.
Il codice funziona correttamente, c'è solo un piccolo problema con WordPress che racchiude ogni paragrafo in una singola colonna sinistra o destra.
Questa è la mia funzione, niente di speciale.
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' => 'Aggiungi Colonne' ), array( 'title' => '← Colonna', 'block' => 'div', 'classes' => 'content-col-left' ), array( 'title' => 'Colonna →', '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' );
E quando inizio a scrivere una storia, Supponiamo che sia una storia con 3 paragrafi, e quando ho finito di scrivere seleziono tutto il contenuto (3 paragrafi) insieme e premo il pulsante stile > Colonna sinistra dall'editor TinyCME, ma racchiude ogni paragrafo in una singola...
È molto frustrante vedere questo e per qualche motivo non riesco a farlo funzionare. Voglio che i miei 3 paragrafi siano racchiusi in tag P e tutti e 3 i tag P insieme devono essere racchiusi in un unico div con una classe left-column.
Ciao B.J. Sì, capisco cosa intendi, sarebbe frustrante, tuttavia nel momento in cui le cose vengono inserite, quello sarebbe TinyMCE e non farebbe parte del mio snippet, quindi non credo si possa fare nulla. Lo snippet aggiunge solo nuove impostazioni,
Tuttavia hai provato ad aggiungere un'interruzione di riga dopo che unisce i tre paragrafi in uno solo? questo risolve le cose. Mi divertirò con le cose e vedrò se posso fare qualcosa per te.
Grazie mille Kevin,
Nessun problema, sono contento di aver potuto aiutare.
Potresti creare colonne con quegli stili a discesa?
Come nel menu a discesa: Colonna 1 (questo aggiungerà questo codice)
Il cursore dovrebbe essere qui per digitare il contenuto in PDopodiché scegli dal menu a discesa Aggiungi colonna 2
Per aggiungere una seconda colonna di testo accanto alla prima. Penso che sia molto difficile dividere il testo in 2 colonne nella div di inserimento del contenuto se non si sa come funziona l'html.
Vorrei saperlo per un mio cliente che può lavorare solo con un editor WYSIWYG ma vorrebbe avere un'opzione per avere due colonne nella div di inserimento.
Scusa il mio scarso inglese 🙁
Ciao B.J. sì, potresti aggiungere un div con la classe class=”rgt-column” e un altro con la classe=”lft-column”, poi spetta a te impostare il CSS per far funzionare questo come colonne. Se vuoi avere il CSS per creare le colonne utilizzate nell'editor, puoi aggiungere questo piccolo codice e creare un nuovo foglio di stile con il codice delle colonne.
function wps_add_editor_style() {
add_editor_style( ‘editor-style-columns.css’ );
}
add_action( ‘after_setup_theme’, ‘wps_add_editor_style’ );In questo modo potranno vedere il contenuto in più colonne, potrebbe essere necessario armeggiare un po' per farlo funzionare come desideri.