Dropdown Lista Med Stilar för TinyMCE

Visst vore det bra att kunna trycka på en knapp och då styla en markerad del av innehållet med dina egna CSS klasser och stilar? Så klart, och det är precis vad vi ska göra idag, nämligen lägga till en funktion i den visuella redigeraren i WordPress, eller TinyMCE som den heter. Det finns en till rad med verktyg om man klickar på knappen ”Verktygsrad på/av”:

 

Bild på TinyMCE normal redigerar panel
TinyMCE normal redigerar panel

…så dyker det upp en rad till med flera redigerings alternativ:

Bild på TinyMCE expanderad redigerar panel
TinyMCE expanderad redigerar panel

Du ka se att jag har en extra knapp”Format” längst till vänster i den nedre raden, och det är en sådan vi ska skapa.

 

Knappen

Vi börjar med att skapa knappen med en funktion i din barntemats/temats functions.php fil:

// lägg till en styleselect drop-down meny i andra raden av knappar
function wpb_mce_buttons_2($buttons) {
	array_unshift($buttons, 'styleselect');
	return $buttons;
}
add_filter('mce_buttons_2', 'wpb_mce_buttons_2');

Nu bör knappen synas utan alternativ, så det är just alternativen vi fokuserar på härnäst:

// Callback funktion för att filtrera MCE inställningar
function my_mce_before_init_insert_formats( $init_array ) {  

// Definiera style_formats array

	$style_formats = array(  
/* 
Varje array "barn" är en format med dess egna inställning.
Nyckelvärden:
title [krävs]
selector | block | inline [krävs]
classes [valfri]
styles [valfri]
attributes [valfri]
wrapper [valfri
default = false]
exact [valfri default = false]
*/
			array(
				'title'    => 'Button',
				'selector' => 'a',
				'classes'  => 'button'
                        ),
			array(
				'title'   => 'Callout Box',
				'block'   => 'div',
				'classes' => 'callout',
				'wrapper' => true
                        ),
                        array(
				'title'  => 'Fet Orange Text',
				'inline' => 'span',
				'classes' => 'bold-orange',
				'wrapper' => true
                        ),
	);  

	// Lägg in arrayn, JSON ENCODED, i 'style_formats'
	$init_array['style_formats'] = json_encode($style_formats);  
	
	return $init_array;  
  
} 
// Fäst återanrop till 'tiny_mce_before_init' hooken 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

Nu ska du ha möjligheten att använda dom nya stilarna, som t.ex. Fet Orange Text:

Bold-orange format
Bold-orange format

Och så kollar vi under huven för att se om det blev något:

Bold-orange klass på en span
Bold-orange klass på en span

Till sist ska dom här klasserna deklareras i en CSS stilmall, och det kan vi göra i en special-stilmall custom-editor-style.css i roten av temat (om ingen editor-style.css redan finns i temat), och sedan skriva in följande i functions.php:

// om ingen editor-style.css finns skapa en i roten av temat
// och skriv in följande för att ladda den
function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );

 

Leave a Comment

E-postadressen publiceras inte. Obligatoriska fält är märkta *

*
*