WpGuida

Guida Wordpress è una raccolta di tutorials e guide su temi, plugin e sviluppo in wordpress

  • Home
  • Notizie
  • Guide
    • Guida WordPress – Le Basi
    • Guida WordPress Avanzata
    • Guida W3 Total Cache
  • Tutorials
    • Ottimizzare WordPress
    • WordPress Plugins
    • WordPress Temi
    • WordPress Development
  • Tips and Tricks
  • Hosting WordPress
  • Software
  • Velocizzare WordPress
Ti trovi qui: Home / Wordpress Development / Aggiungere stili personalizzati all’editor di WordPress
Aggiungere stili personalizzati all'editor di wordpress

Aggiungere stili personalizzati all’editor di WordPress

14 Maggio 2015 di Dario Vinci Lascia un commento

Se anche a voi capita molto spesso di utilizare delle formattazioni di testo particolari, o dei pulsanti all’interno dei vostri articoli allora questa guida fa al caso vostro! Oggi infatti vedremo come aggiungere stili personalizzati all’editor di WordPress.

Qualcuno potrebbe dirmi: “Dario, esiste già un plugin per aggiungere stili e formati personalizzati all’editor wordpress!”

Vero, ma perchè installare un altro plugin quando in 5 minuti e 10 righe di codice possiamo ottenere lo stesso risultato?

In precedenza abbiamo visto come creare un plugin wordpress all’interno del quale inserire tutte le funzioni per personalizzare il nostro sito evitanto che queste vengano perse cambiando tema e evitando al tempo stesso di appesantire il file functions.php. Ed è proprio all’interno del nostro plugin che andremo ad inserire il codice per aggiungere degli stili personalizzati all’editor.

AGGIUNGERE STILI PERSONALIZZATI ALL’EDITOR DI WORDPRESS

Apriamo quindi il file php del plugin creato per il nostro sito o portiamoci in Plugin->Editor per modificarlo direttamente dal pannello di amministrazione di WordPress.

La prima porzione di codice che andremo ad inserire sarà la seguente:

//Aggiungo la funzione per rivelare il pulsante styleselect sulla seconda riga dell'editor
function reveal_styleselect_button($buttons) {
	array_unshift($buttons, 'styleselect');
	return $buttons;
}
add_filter('mce_buttons_2', 'reveal_styleselect_button');

Analizziamo il codice per cercare di capire a cosa serve:

reveal_styleselect_button -> è il nome della funzione che verrà eseguita e che ci permetterà di mostrare un pulsante nascosto ma già definito nell’editor di wordpress. Passiamo alla funzione l’array contenente tutti i pulsanti dell’editor e aggiungiamo il pulsante nascosto styleselect affinchè venga rivelato.

A questo punto dobbiamo aggiungere i vari stili che saranno disponibili nel menu a tendina cliccando sul pulsante:

//Aggiungo le voci da mostrare nel menu a tendina
function insert_custom_styles( $init_array ) {  

// Define the style_formats array

	$style_formats = array(  
		// Each array child is a format with it's own settings  
		array(  
			'title' => 'Pulsante Nero',  
			'block' => 'span',  
			'classes' => 'pulsante-nero',
			'wrapper' => true,
		),
		array(  
			'title' => 'Pulsante Verde',  
			'block' => 'span',  
			'classes' => 'pulsante-verde',
			'wrapper' => true,
		),
	);  
	// Insert the array, JSON ENCODED, into 'style_formats'
	$init_array['style_formats'] = json_encode( $style_formats );  
	
	return $init_array;  
  
} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'insert_custom_styles' );

In questo esempio ho inserito due stili. Il primo mi permette di inserire un pulsante nero, il secondo un pulsante verde.

Pulsante Nero

Pulsante Verde

Naturalmente potremo sbizzarrirci a creare tutti gli stili di cui abbiamo bisogno. A questo indirizzo trovate la lista di tutti i parametri che potete definire nella creazione degli stili personalizzati.

Infine non ci resta che aggiungere il codice CSS.

/*PULSANTI INSERITI NELL'EDITOR*/
.pulsante-nero { 
	background-color:#333;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	padding:6px 24px;
	text-decoration:none;
        text-transform:uppercase;
	font-weight:bold;
}

.pulsante-verde {
	background-color:#689200;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	padding:6px 24px;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:bold;
}

Questo codice CSS va aggiunto sia al foglio di stile del tema o del child-theme che stiamo utilizzando sia al file editor-style.css. Quest’ultimo file potrebbe essere presente nella cartella del nostro tema ma nel caso in cui non ci fosse possiamo provvedere alla sua creazione e caricamento nella cartella principale del tema. In quest’ultimo caso però dovremo aggiungere una nuova funzione che avrà il compito di caricare questo foglio di stile:

//Carico il file CSS contentente il codice per lo stile delle voci aggiunte all'editor
function my_theme_add_editor_styles() {
    add_editor_style( 'stili-personalizzati-editor.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );

Come potrete notare non è obbligatorio chiamare il file editor-style.php, nel mio caso ho scelto di chiamarlo stili-personalizzati-editor.css.

Per qualsiasi dubbio lasciate pure un commento.

Archiviato in:Wordpress Development

Dario Vinci

Appassionato di Wordpress e del mondo tecnologico in generale, proud to be an apple fanboy and android lover.

Ti è piaciuto questo articolo?

Se vuoi ricevere via email tutti i miei nuovi articoli e tutorials su WordPress compila il box qui a fianco. Tranquillo, non riceverai alcuna email di spam ma solo contenuti di qualità!

Cerca

Facebook

WpGuida

Newsletter

Scarica ebook Guida Wordpress 4.x

Potrebbe Interessarti

Disabilitare le revisioni dei post

Disabilitare le revisioni dei post e ridurre le dimensioni del database

2 Agosto 2014 da Dario Vinci

Sostituire le librerie Jquery di Wordpress con quelle di Google

Sostituire le librerie Jquery di WordPress con quelle di Google

27 Giugno 2015 da Dario Vinci

icone font awesome - come aggiungerle al tema wordpress

Aggiungere le icone Font Awesome al tuo tema wordpress

4 Marzo 2015 da Dario Vinci

Installare wordpress in locale su pc o mac

Installare WordPress in locale

2 Agosto 2014 da Dario Vinci

Il primo post

31 Luglio 2014 da Dario Vinci

Random Post

Temi Wordpress

Temi WordPress – Installazione e modifiche

Commenti Wordpress: quale sistema utilizzare?

Commenti WordPress: Facebook, Disqus o tradizionali?

Wordpress 4.2.2 changelog

WordPress 4.2.2 Changelog: possibile problema con l’editor dopo l’aggiornamento [RISOLTO]

Copyright © · 2019 WpGuida