personnalisation-tinymce-wordpress

Personnaliser TinyMCE avec les styles de votre thème WordPress

juin 10, 2016 - AdminSimpliss

0 Commentaire

Dans l’interface WordPress, vous aimeriez que l’éditeur TinyMCE prenne en compte les styles de votre thème, afin que ce qui s’affiche ressemble à ce que voit l’internaute ? Voici quelques codes pour vous y aider.

Pour que l’éditeur TinyMCE prenne en compte les styles de votre thème WordPress :

Dans le fichier functions.php de votre thème, ajoutez :

function my_theme_add_editor_styles() {
  add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );

Pour personnaliser les styles d’affichage uniquement dans l’éditeur :

Créez dans le dossier de votre thème un fichier editor-style.css dans le quel vous renseignez les styles souhaités.

Par exemple l’arrière-plan :

/* CSS Document pour l'editeur TinyMCE */
body {
  background-color:#404040;
  color:#fff;
}

Puis dans le fichier functions.php de votre thème, ajoutez :

if ( !function_exists('init_editor_styles')) {
  add_action( 'after_setup_theme', 'init_editor_styles' );
  function init_editor_styles() {
  add_editor_style( 'editor-style.css' );
  }
}

Pour personnaliser le contenu du menu « Styles », du menu « Formats » et les couleurs :

Dans le fichier functions.php de votre thème, ajoutez :

function tinymce_filtre($in){
  /* ##### Pour le menu Styles */
  $in['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;';
  /* ##### Pour le menu Formats, par exemple */
  /* ##### Voir codex https://codex.wordpress.org/TinyMCE_Custom_Styles ##### */
  $style_formats = array (
  array( 'title' => 'Paragraphe', 'block' => 'p'),
  array( 'title' => 'Titre', 'block' => 'h2'),
  array( 'title' => 'Sous-titre', 'block' => 'h3'),
  array( 'title' => 'Tarif', 'inline' => 'span', 'classes' => 'tarif'),
  array( 'title' => 'Code', 'block' => 'pre', 'wrapper' => true),
  array( 'title' => 'Bouton', 'selector' => 'a', 'classes' => 'bouton' ),
  array( 'title' => 'Cadre', 'block' => 'div', 'wrapper' => true, 'classes' => 'cadre' )
  );
  $in['style_formats'] = json_encode( $style_formats );
  $in['style_formats_merge'] = false;
  /* ##### Pour le tableau de couleurs */
  $custom_colours = '
  "e8541e", "Orange1", "f39c2c", "Orange2", "c0f000", "Vert", "ffffff", "Blanc", "000000", "Noir"
  ';
  $in['textcolor_map'] = '['.$custom_colours.']';
  /* ##### A garder dans tous les cas */
  return $in;
}
add_filter('tiny_mce_before_init', 'tinymce_filtre');

Pour autoriser certaines balises sans que TinyMCE les enlève automatiquement, comme les class par exemple :

Dans le fichier functions.php de votre thème, ajoutez :

function myextensionTinyMCE($init) {
  // Command separated string of extended elements
  $ext = 'a[accesskey|charset|class|contenteditable|contextmenu|coords|dir|download|draggable|dropzone|hidden|href|hreflang|id|lang|media|name|rel|rev|shape|spellcheck|style|tabindex|target|title|translate|type|onclick|onfocus|onblur]';
  // Add to extended_valid_elements if it alreay exists
  if ( isset( $init['extended_valid_elements'] ) ) {
  $init['extended_valid_elements'] .= ',' . $ext;
  } else {
  $init['extended_valid_elements'] = $ext;
  }
  // Super important: return $init!
  return $init;
}
add_filter('tiny_mce_before_init', 'myextensionTinyMCE' );

function override_mce_options($initArray) {
  $opts = '*[*]';
  $initArray['valid_elements'] = $opts;
  $initArray['extended_valid_elements'] = $opts;
  return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');

IMPORTANT : VIDEZ VOTRE CACHE POUR VOIR LES EFFETS

Écrire un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

En continuant à utiliser le site, vous acceptez l’utilisation des cookies. Plus d’informations

Les paramètres des cookies sur ce site sont définis sur « accepter les cookies » pour vous offrir la meilleure expérience de navigation possible. Si vous continuez à utiliser ce site sans changer vos paramètres de cookies ou si vous cliquez sur "Accepter" ci-dessous, vous consentez à cela.

Fermer