J’ai eu besoin pour la création d’un thème wordpress de mettre en place l’éditeur avancé tiny_mce.
Après quelques recherches sur le net je suis tombé sur le site de Leeroy qui explique très bien comment le mettre en place.
Mais voici quand même un petit rappel de la procédure de mise en œuvre :
Création d’une fonction d’appel à l’éditeur :
[fusion_builder_container hundred_percent= »yes » overflow= »visible »][fusion_builder_row][fusion_builder_column type= »1_1″ background_position= »left top » background_color= » » border_size= » » border_color= » » border_style= »solid » spacing= »yes » background_image= » » background_repeat= »no-repeat » padding= » » margin_top= »0px » margin_bottom= »0px » class= » » id= » » animation_type= » » animation_speed= »0.3″ animation_direction= »left » hide_on_mobile= »no » center_content= »no » min_height= »none »][php]
function init_wysiwyg() {
wp_enqueue_script(‘editor’);
add_thickbox();
wp_enqueue_script(‘media-upload’);
add_action(‘admin_print_footer_scripts’, ‘wp_tiny_mce’, 25);
wp_enqueue_script(‘quicktags’);
}
[/php]
Maintenant nous allons faire appel à cette fonction directement à l’initialisation de l’administration de wordpress :
[/fusion_builder_column][fusion_builder_column type= »1_1″ background_position= »left top » background_color= » » border_size= » » border_color= » » border_style= »solid » spacing= »yes » background_image= » » background_repeat= »no-repeat » padding= » » margin_top= »0px » margin_bottom= »0px » class= » » id= » » animation_type= » » animation_speed= »0.3″ animation_direction= »left » hide_on_mobile= »no » center_content= »no » min_height= »none »][php]
add_action(‘admin_menu’, ‘init_wysiwyg’);
[/php]
L’appel de l’editeur se fera de cette façon :
[/fusion_builder_column][fusion_builder_column type= »1_1″ background_position= »left top » background_color= » » border_size= » » border_color= » » border_style= »solid » spacing= »yes » background_image= » » background_repeat= »no-repeat » padding= » » margin_top= »0px » margin_bottom= »0px » class= » » id= » » animation_type= » » animation_speed= »0.3″ animation_direction= »left » hide_on_mobile= »no » center_content= »no » min_height= »none »][php]
<?php
/* Syntaxe de la fonction the_editor()
* the_editor($content, $id = ‘content’, $prev_id = ‘title’, $media_buttons = true, $tab_index = 2)
*/
echo the_editor(null);
?>[/php]
Voici à quoi correspond les différents paramètres que peut contenir cette fonction
$content :Contient votre contenu.
$id :Le nom (et ID) du champ de l’éditeur de texte.
$prev_id :Permet de revenir à l’ID précédent des éléments du formulaire.
$media_buttons :Permet d’activer ou désactiver l’affichage des boutons (images, sons, vidéos, etc). Accepte une valeur booléenne (true || false).
$tab_index :Index de tabulation du champ de formulaire.
Maintenant la partie css :
[/fusion_builder_column][fusion_builder_column type= »1_1″ background_position= »left top » background_color= » » border_size= » » border_color= » » border_style= »solid » spacing= »yes » background_image= » » background_repeat= »no-repeat » padding= » » margin_top= »0px » margin_bottom= »0px » class= » » id= » » animation_type= » » animation_speed= »0.3″ animation_direction= »left » hide_on_mobile= »no » center_content= »no » min_height= »none »][css]#poststuff textarea
{
-moz-box-sizing:border-box;
border:0 none;
line-height:150%;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
padding:6px;
margin:0;
width:100%;
}[/css]
Maintenant quand on regarde de plus prés on s’aperçoit que cette méthode fait que l’éditeur est actif sur toutes les pages de l’administration et personnellement je ne trouve pas cette solution très propre.
En me penchant sur le problème j’ai trouvé la solution qui consiste tout simplement à activer l’appel de l’éditeur uniquement sur les pages du plugin ou du thème.
Mais comment faire ??
La réponse : nous allons utiliser la fonction admin_print_scripts-(page_hook) ou admin_print_scripts-(plugin_page)
Voici comment je l’ai utilisé :
[/fusion_builder_column][fusion_builder_column type= »1_1″ background_position= »left top » background_color= » » border_size= » » border_color= » » border_style= »solid » spacing= »yes » background_image= » » background_repeat= »no-repeat » padding= » » margin_top= »0px » margin_bottom= »0px » class= » » id= » » animation_type= » » animation_speed= »0.3″ animation_direction= »left » hide_on_mobile= »no » center_content= »no » min_height= »none »][php]
function hfn_init() {
/* Syntaxe de la fonction add_menu_page()
* add_menu_page(page_title, menu_title, capability, handle, [function], [icon_url]);
*/
$options_page = add_menu_page( ‘Admin HFN’, ‘Admin HFN’, 7, ‘hfnOptions’, ‘hfnAdmin’, get_template_directory_uri() . ‘/images/icon.png’);
/* Syntaxe de la fonction add_submenu_page()
* add_submenu_page(parent, page_title, menu_title, capability required, file/handle, [function]);
*/
$options_subPage = add_submenu_page( ‘hfnOptions’, ‘Admin HFN’, ‘Gestion de mon module’, 7, ‘hfnOptions’, ‘hfnAdmin’ );
add_submenu_page( ‘hfnOptions’, ‘Admin HFN’, ‘Gestion des menus’, 7, ‘hfnGesMenu’, ‘hfnGesMenu’ );
add_submenu_page( ‘hfnOptions’, ‘Admin HFN’, ‘Aide en ligne’, 7, ‘guide’, ‘hfnGuide’ );</code>
add_action( "admin_print_scripts-$options_subPage", ‘init_wysiwyg’ );
}
add_action(‘admin_menu’, ‘hfn_init’);
[/php]
Dans le cas ci-dessus je voulais que l’éditeur soit appelé uniquement sur la page, gestion de mon module il me suffit juste de mettre le contenu de la fonction add_submenu_page() dans ma variable $options_subPage, puis tout simplement compléter la fonction admin_print_scripts-$maVariable() en utilisant add_action().
En espérant que cet article pourra servir à d’autres personnes.[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
