Ajouter la taille et la famille de police dans l’éditeur visuel de WordPress

Aujourd’hui on va voir comment ajouter la taille et la famille de police de caractère dans l’éditeur visuel de WordPress sans utiliser de plugin. Le code fonctionne avec le plugin TinyMCE Advanced.

 

Éditer le fichier function.php de votre Thème WordPress puis ajouter le code suivant, il va activer les menus Famille de polices et Tailles de la police.

// Ici on active les menu déroulant Font Select et Font Size Select
if ( ! function_exists( 'wpex_mce_buttons' ) ) {
	function wpex_mce_buttons( $buttons ) {
		array_unshift( $buttons, 'fontselect' ); // Font Select
		array_unshift( $buttons, 'fontsizeselect' ); //Font Size Select
		return $buttons;
	}
}
add_filter( 'mce_buttons_2', 'wpex_mce_buttons' );

Ensuite ajouter le code ci-dessous toujours dans votre fichier function.php de votre Thème WordPress, il va vous permettre de personnaliser et d’ajouter différentes tailles de police.

// Personnalisez mce tailles de police de l'éditeur
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
	function wpex_mce_text_sizes( $initArray ){
		$initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
		return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );

Activer éditeur TinyMCE Pour les extrait des articles

Pour ajouter L’éditeur TinyMCE à l’extrait de vos articles ajouter le code suivant dans le fichier function.php de votre thème WordPress.


function tinymce_excerpt_js(){ ?>

<script type="text/javascript">

	jQuery(document).ready( tinymce_excerpt );

	function tinymce_excerpt() {

	jQuery("#excerpt").addClass("mceEditor");

	tinyMCE.execCommand("mceAddControl", false, "excerpt");

	}

</script>

<?php }

add_action( 'admin_head-post.php', 'tinymce_excerpt_js');

add_action( 'admin_head-post-new.php', 'tinymce_excerpt_js');

function tinymce_css(){ ?><style type='text/css'>

	#postexcerpt .inside{margin:0;padding:0;background:#fff;}

	#postexcerpt .inside p{padding:0px 0px 5px 10px;}

	#postexcerpt #excerpteditorcontainer { border-style: solid; padding: 0; }

</style>

<?php }

add_action( 'admin_head-post.php', 'tinymce_css');

add_action( 'admin_head-post-new.php', 'tinymce_css');