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