programmazione

WordPress Visual Editor – Aggiungere Bottoni

TinyMCE è l’editor visuale (WYSIWYG editor) che utilizza WordPress per editare il contenuto di pagine e post.

In WordPress TinyMCE per default è parzialmente attivo, per evitare la presenza di troppi bottoni che possono generare confusione.

Aggiungere i bottoni nascosti di Tiny MCE

Il metodo più facile è installare la plugin ‘The Ultimate TinyMCE plugin’, altrimenti possiamo aggiungere manualmente i bottoni nascosti di TinyMCE con la seguente procedura:

1. Aprire blog/wp-content/themes/mytheme/functions.php e aggiungere il codice:

// Enable All Tiny MCE Buttons
function my_mce_buttons_2($buttons) {	
	/**
	 * Add in a core button that's disabled by default
	 */
	$buttons[] = 'sup';
	$buttons[] = 'sub';

	return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

NOTA BENE:
Aggiunge Subscript (pedice) e Superscript (apice)

$buttons[] = 'sup';
$buttons[] = 'sub';

Aggiungere i bottoni alla seconda riga:

add_filter('mce_buttons_2', 'my_mce_buttons_2');

add_filter(‘mce_buttons_2’, ‘my_mce_buttons_2’);
add_filter(‘riga’, ‘funzione che ritorna la lista di bottoni’);

2. Wp-admin> Pagine> Aggiungi nuova> attivare la linguetta ‘Visuale’> nella prima riga dell’editor cliccare sull’ultimo bottone ‘Show/Hide Kitchen Sink’ (Lavello da cucina?!) per visualizzare la seconda riga dell’editor> alla fine della riga si saranno aggiunti i bottoni per il ‘Subscript’ e per il ‘Superscript’

Aggiungere dei ‘Custom Styles’ a Tiny MCE

1. Aprire blog/wp-content/themes/mytheme/functions.php e aggiungere il codice:

a) Rendiamo visibile il menu ‘Styles’ a sinistra della seconda riga di TinyMCE
b) Aggiungiamo le voci ‘Tag Line’ ‘Button’

// Add the Style Dropdown Menu to the second row of visual editor buttons
function my_mce_buttons_2($buttons)
{
    array_unshift($buttons, 'styleselect');
    return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

// Add classes with title and separate them with
function my_mce_before_init($init_array)
    {
        // Now we add classes with title and separate them with;
        $init_array['theme_advanced_styles'] = "Tag Line=tag-line;Button=custom-button";
    return $init_array;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');

// Add New CSS Style in the visual editor
add_editor_style('custom-editor-style.css');

NOTA BENE:

Aggiungi uno stile CSS:

// Add New CSS Style in the visual editor
add_editor_style('custom-editor-style.css');

Dallo stile CSS assegna a ‘Button’ la classe CSS ‘custom-button’

"Tag Line=tag-line;Button=custom-button";
    return $init_array;

2. Creiamo il foglio di stile ‘custom-editor-style.css’ in:
blog/wp-content/themes/mytheme/custom-editor-style.css

Inseriamo all’interno il codice CSS:

.tag-line {

	Font:italic 14px Georgia, serif;
	color:#ccc;
}

.custom-button {

	font-size:13px;
	background: #9027A2;
	display: inline-block;
	padding: 2px  5px 2px;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-  radius: 4px;
	border:none;
	position: relative;
	cursor: pointer;
	margin:10px 10px 0 0;

}

3. wp-admin> Pagine> Aggiungi nuova> attivare la linguetta ‘Visuale’> scrivere un testo e selezionarlo> dal visual editor selezionare dalla seconda riga, tutto a sinistra, Styles> Button

4.wp-admin> Pagine> Aggiungi nuova> attivare la linguetta ‘Testo’> il codice generato sarà:

<p class="custom-button">mytext</p>

5. Inseriamo il CSS anche nel foglio di stile del nostro Template altrimenti il nostro template si troverà sprovvisto della nostra nuova classe CSS.

Aggiungiamo in:
blog/wp-content/themes/mytheme/style.css

...
// In fondo al CSS aggiungiamo lo stile personalizzato
.tag-line {

	Font:italic 14px Georgia, serif;
	color:#ccc;
}

.custom-button {

	font-size:13px;
	background: #9027A2;
	display: inline-block;
	padding: 2px  5px 2px;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-  radius: 4px;
	border:none;
	position: relative;
	cursor: pointer;
	margin:10px 10px 0 0;

}

CLASSE CSS ‘DEBOLE’

Se non funziona è possibile che le classi CSS del nostro Template siano più ‘forti’ della nostra nuova classe, per questo possiamo dare la priorità alla nuova classe con l’istruzione CSS !important

Sostituire il codice CSS in custom-editor-style.css + style.css con:

.tag-line {

	Font:italic 14px Georgia, serif;
	color:#ccc;
}

.custom-button {

	font-size:13px;
	background: #9027A2 !important;
	display: inline-block !important;
	padding: 2px  5px 2px !important;
	color: #fff !important;
	text-decoration: none;
	-moz-border-radius: 4px !important;
	-webkit-border-radius: 4px !important;
	border-  radius: 4px !important;
	border:none;
	position: relative;
	cursor: pointer;
	margin:10px 10px 0 0;

}