web-dev-qa-db-fra.com

Comment personnaliser l'éditeur WordPress par défaut?

Cela fait plaisir d'entendre que Sonny (wordpress3.3) a la nouvelle API d'édition wp_editor () qui donne Nous avons la possibilité d’utiliser facilement plusieurs instances de l’éditeur dans nos champs personnalisés.

Mais j'avais besoin de personnaliser l'éditeur par défaut (pour le contenu principal) et je ne savais pas comment le faire avec cette fonction. Je devais personnaliser l'éditeur pour mon nouveau type de message personnalisé appelé baner pour lequel je devais modifier la taille de l'éditeur avec moins de boutons. Je sais que je pourrais le faire en utilisant simplement un champ personnalisé, mais pour une raison quelconque, je souhaite utiliser le contenu pour la description de la bannière.

custom-fieldcustomizationwp-editor
1
Dipesh KC

Je cherchais une solution pour placer une métabox personnalisée au-dessus de l'éditeur par défaut et j'ai trouvé la solution à mon ancienne question (comment personnaliser l'éditeur par défaut avec wp_editor)!

La solution consistait à supprimer d'abord l'éditeur par défaut. Créez ensuite une autre métabox pour placer le contenu, puis utilisez wp_editor pour créer une nouvelle instance, simple n'est-ce pas?

add_action( 'add_meta_boxes', 'page_meta_boxes' );
public function page_meta_boxes()
{

    global $_wp_post_type_features;
            //ive defined my other metaboxes first with higher priority
    add_meta_box(
        $id     =   'page_heading_meta_box',
        $title  =   __('Heading'),
        $callback   = array(&$this,'render_page_heading_metabox'),
        $post_type  =   'page',
        $context    =   'normal',
        $priority   =   'core'
        );
    add_meta_box(
        $id     =   'page_description_meta_box',
        $title  =   __('Description'),
        $callback   = array(&$this,'render_page_description_metabox'),
        $post_type  =   'page',
        $context    =   'normal',
        $priority   =   'core'
        );
    //check for the required post type page or post or <custom post type(here article)  
    if (isset($_wp_post_type_features['article']['editor']) && $_wp_post_type_features['post']['editor']) {
        unset($_wp_post_type_features['article']['editor']);
        add_meta_box(
            'wsp_content',
            __('Content'),
            array(&$this,'content_editor_meta_box'),
            'article', 'normal', 'core'
        );
    }
    if (isset($_wp_post_type_features['page']['editor']) && $_wp_post_type_features['page']['editor']) {
        unset($_wp_post_type_features['page']['editor']);
        add_meta_box(
            'wsp_content',
            __('Content'),
            array(&$this,'content_editor_meta_box'),
            'page', 'normal', 'low'
        );
    }
    }

De cette manière, nous avons enregistré une nouvelle métabox appelée content. Il est maintenant temps de placer l'éditeur

        function content_editor_meta_box($post)
    {
        $settings = array(
            #media_buttons
            #(boolean) (optional) Whether to display media insert/upload buttons
            #Default: true
            'media_buttons' => true,

            #textarea_name
            #(string) (optional) The name assigned to the generated textarea and passed parameter when the form is submitted. (may include [] to pass data as array)
            #Default: $editor_id
            'textarea_name'=>'content',

            #textarea_rows
            #(integer) (optional) The number of rows to display for the textarea
            #Default: get_option('default_post_edit_rows', 10)

            #tabindex
            #(integer) (optional) The tabindex value used for the form field
            #Default: None
            'tabindex' => '4'

            #editor_css
            #(string) (optional) Additional CSS styling applied for both visual and HTML editors buttons, needs to #include <style> tags, can use "scoped"
            #Default: None

            #editor_class
            #(string) (optional) Any extra CSS Classes to append to the Editor textarea
            #Default:

            #teeny
            #(boolean) (optional) Whether to output the minimal editor configuration used in PressThis
            #Default: false

            #dfw
            #(boolean) (optional) Whether to replace the default fullscreen editor with DFW (needs specific DOM elements #and css)
            #Default: false

            #tinymce
            #(array) (optional) Load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
            #Default: true

            #quicktags
            #(array) (optional) Load Quicktags, can be used to pass settings directly to Quicktags using an array()
            #Default: true
        );
        wp_editor($post->post_content,'content');

    }

Maintenant, vous pouvez entièrement personnaliser votre éditeur! Voilà à quoi ça ressemble maintenant. J'espère que cela vous sera utile aussi! enter image description here

3
Dipesh KC

Vous pouvez le faire en utilisant la clé 'tinymce' dans le tableau de paramètres, comme ceci:

$tinymce_options = array(
  'height' => "300",
  'theme' => "advanced",
  'plugins' => "table",
  // Theme options
  'theme_advanced_buttons1' => "bold,italic,link,|,formatselect,|,bullist,numlist,outdent,indent",
  'theme_advanced_buttons2' => "tablecontrols",
  'theme_advanced_buttons3' => "",
  'theme_advanced_toolbar_location' => "top",
  'theme_advanced_toolbar_align' => "left",
  'theme_advanced_statusbar_location' => "bottom",
  'theme_advanced_resizing' => true,
);

$settings = array(
  'textarea_name' => $name,
  'tinymce' => $tinymce_options
);

wp_editor( $content , $id, $settings );
1
shahar