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' );

Ajouter plusieurs éditeurs visuels

WordPress utilise l’éditeur TinyMce pour l’édition des articles et pages, et parfois ont aurai bien besoin d’un éditeur supplémentaire pour faire différents blocs par exemple.

Pour ajouter plusieurs éditeurs visuels dans vos pages et articles ouvrez votre fichier function.php et a jouté le code suivant :

define('WYSIWYG_META_BOX_ID', 'my-editor');
define('WYSIWYG_EDITOR_ID', 'myeditor'); //Important pour le CSS sois différent
define('WYSIWYG_META_KEY', 'extra-content');
 
add_action('admin_init', 'wysiwyg_register_meta_box');
function wysiwyg_register_meta_box(){
        add_meta_box(WYSIWYG_META_BOX_ID, __('WYSIWYG Meta Box', 'wysiwyg'), 'wysiwyg_render_meta_box', 'post');
}
 
function wysiwyg_render_meta_box(){
	
        global $post;
        
        $meta_box_id = WYSIWYG_META_BOX_ID;
        $editor_id = WYSIWYG_EDITOR_ID;
        
        //Add CSS & jQuery original WYSIWYG
        echo "
                <style type='text/css'>
                        #$meta_box_id #edButtonHTML, #$meta_box_id #edButtonPreview {background-color: #F1F1F1; border-color: #DFDFDF #DFDFDF #CCC; color: #999;}
                        #$editor_id{width:100%;}
                        #$meta_box_id #editorcontainer{background:#fff !important;}
                        #$meta_box_id #$editor_id_fullscreen{display:none;}
                </style>
            
                <script type='text/javascript'>
                        jQuery(function($){
                                $('#$meta_box_id #editor-toolbar > a').click(function(){
                                        $('#$meta_box_id #editor-toolbar > a').removeClass('active');
                                        $(this).addClass('active');
                                });
                                
                                if($('#$meta_box_id #edButtonPreview').hasClass('active')){
                                        $('#$meta_box_id #ed_toolbar').hide();
                                }
                                
                                $('#$meta_box_id #edButtonPreview').click(function(){
                                        $('#$meta_box_id #ed_toolbar').hide();
                                });
                                
                                $('#$meta_box_id #edButtonHTML').click(function(){
                                        $('#$meta_box_id #ed_toolbar').show();
                                });
 
				//Tell the uploader to insert content into the correct WYSIWYG editor
				$('#media-buttons a').bind('click', function(){
					var customEditor = $(this).parents('#$meta_box_id');
					if(customEditor.length > 0){
						edCanvas = document.getElementById('$editor_id');
					}
					else{
						edCanvas = document.getElementById('content');
					}
				});
                        });
                </script>
        ";
        
        //Create The Editor
        $content = get_post_meta($post->ID, WYSIWYG_META_KEY, true);
        the_editor($content, $editor_id);
        
        //Clear The Room!
        echo "<div style='clear:both; display:block;'></div>";
}
 
add_action('save_post', 'wysiwyg_save_meta');
function wysiwyg_save_meta(){
	
        $editor_id = WYSIWYG_EDITOR_ID;
        $meta_key = WYSIWYG_META_KEY;
	
        if(isset($_REQUEST[$editor_id]))
                update_post_meta($_REQUEST['post_ID'], WYSIWYG_META_KEY, $_REQUEST[$editor_id]);
                
}

 

 

Puis éditer votre fichier single.php ou page.php et ajouter le code suivant qui va afficher le contenu du second éditeur.

<?php echo get_post_meta($post->ID, WYSIWYG_META_KEY, true);?>

 

Activer des boutons supplémentaires dans l’éditeur visuel de WordPress

 

Cette fonction va permettre d’afficher des boutons en plus dans l’éditeur visuel de WordPress qui ne sont pas activer par défaut.


Trait horizontal, indice, exposant, famille des polices, taille de la police, styles css.


 

Insérer  le code ci-dessous dans le fichier function.php de votre thème pour activer les boutons :

// activation des bouttons
function add_more_buttons($buttons) {
 $buttons[] = 'hr';
 $buttons[] = 'del';
 $buttons[] = 'sub';
 $buttons[] = 'sup';
 $buttons[] = 'fontselect';
 $buttons[] = 'fontsizeselect';
 $buttons[] = 'cleanup';
 $buttons[] = 'styleselect';
 return $buttons;
}
add_filter("mce_buttons_3", "add_more_buttons");
//fin

 

Ici les class css par défaut dans WordPress à ajouter dans le fichier style.css de votre thème et dans editor-style.css pour avoir un aperçu dans l’éditeur visuel.

Vous pouvez modifier les class pour l’adapter a votre thème.

 

/* wp-caption--- Surligne le texte */
.wp-caption {
	margin-top: 0.4em;
}
.wp-caption {
	background: #eee;
	margin-bottom: 1.625em;
	max-width: 96%;
	padding: 9px;
}

/* wp-caption-dd --- Surligne le texte avec une police plus petite */
.wp-caption-dd {
background: #eee;
  font-size: 11px;
  line-height: 17px;
  padding: 0 4px 5px;
  margin: 0;
}

/* wp-caption-text --- Affiche le texte avec une police plus petite et un espacement de ligne */
.wp-caption-text {
	line-height: 1.5;
	font-size: 10px;
	margin: 0;
	}

/* Alignement */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.625em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.625em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*wp-smiley*/
.wp-smiley {
	margin: 0 !important;
	max-height: 1em;
	}
/*wp-oembed --- Pour mettre en forme les videos */
.wp-oembed {
background:#000;
padding:15px;
}

.size-full{
/* ici vous pouvez définir une mise en forme */
}

 

wpGallery = ajoute la class wpGallery par défaut dans wordpress a une image