web-dev-qa-db-fra.com

Ajout d'un éditeur HTML à la page des paramètres du plug-in

Je crée une page de paramètres de plug-in à l'aide de l'API register_settings ().

Comment puis-je créer un éditeur HTML (l'éditeur Wordpress par défaut serait splendide) au lieu d'une simple zone de texte.

Voici un exemple du code que j'utilise:

add_action( 'admin_menu', 'pw_add_admin_menu' );
add_action( 'admin_init', 'pw_settings_init' );


function pw_add_admin_menu(  ) { 

    add_menu_page( 'wpset', 'wpset', 'manage_options', 'pset', 'pw_options_page' );

}


function pw_settings_init(  ) { 

    register_setting( 'pluginPage', 'pw_settings' );

    add_settings_section(
        'pw_pluginPage_section', 
        __( 'Live Credentials', 'pw' ), 
        'pw_settings_section_callback', 
        'pluginPage'
    );
    add_settings_field( 
        'pw_textarea_intro', 
        __( 'Header Intro Text', 'pw' ), 
        'pw_textarea_intro_render', 
        'pluginPage', 
        'pw_pluginPage_section' 
    );
}

function pw_textarea_intro_render(  ) { 

    $options = get_option( 'pw_settings' );
    ?>
    <textarea cols='40' rows='5' name='pw_settings[pw_textarea_intro]'> 
        <?php echo $options['pw_textarea_intro']; ?>
    </textarea>
    <?php

}

J'ai réduit le code à un seul champ, mais il y a plus de champs.

Cela rend la zone de texte pour moi, mais je ne peux pas formater le texte et ajoute des onglets supplémentaires avant et après le texte que je saisis dans la page des paramètres.

add_action( 'admin_menu', 'pw_add_admin_menu' );
add_action( 'admin_init', 'pw_settings_init' );


function pw_add_admin_menu(  ) { 

    add_menu_page( 'wpset', 'wpset', 'manage_options', 'pset', 'pw_options_page' );

}


function pw_settings_init(  ) { 

    register_setting( 'pluginPage', 'pw_settings' );

    add_settings_section(
        'pw_pluginPage_section', 
        __( 'Live Credentials', 'pw' ), 
        'pw_settings_section_callback', 
        'pluginPage'
    );
    add_settings_field( 
        'pw_textarea_intro', 
        __( 'Header Intro Text', 'pw' ), 
        'pw_textarea_intro_render', 
        'pluginPage', 
        'pw_pluginPage_section' 
    );
    add_settings_field( 
        'pw_intro', 
        __( 'Intro', 'pw' ), 
        'pw_intro_render', 
        'pluginPage', 
        'pw_pluginPage_section' 
    );
}

function pw_textarea_intro_render(  ) { 

    $options = get_option( 'pw_settings' );
    ?>
    <textarea cols='40' rows='5' name='pw_settings[pw_textarea_intro]'> 
        <?php echo $options['pw_textarea_intro']; ?>
    </textarea>
    <?php

}

function pw_intro_render() {
    $options = get_option( 'pw_settings' );
    echo wp_editor( $options['pw_intro'], 'pw_intro', array('textarea_name' => 'pw_intro', 'media_buttons' => false)  );
}

J'ai ajouté le nouveau code comme suggéré par Dave (merci!) Et maintenant il charge l'éditeur wp, mais lorsque je clique sur enregistrer pour valider les modifications, le contenu de wp_editor n'est pas sauvegardé. Des idées?

settings-api
5
pressword

Voici une version mise à jour de votre code d'origine, qui résout le problème de sauvegarde.

La raison pour laquelle le contenu à l'intérieur de WP Editor n'était pas sauvegardé était due à la valeur du paramètre textarea_name passée à wp_editor().

C'est faux:

 'textarea_name' => 'pw_intro',

Ça devrait ressembler à ça:

 'textarea_name' => 'pw_settings[pw_intro]',

J'ai également supprimé l'écho de wp_editor(), réparé les espaces supplémentaires autour de la zone de texte, etc.

Exemple de code complet:

add_action( 'admin_menu', 'pw_add_admin_menu' );
add_action( 'admin_init', 'pw_settings_init' );
function pw_add_admin_menu(  ) { 
    add_menu_page( 'wpset', 'wpset', 'manage_options', 'pset', 'pw_options_page' );
}

function pw_settings_init(  ) { 
    register_setting( 'pluginPage', 'pw_settings' );

    add_settings_section(
            'pw_pluginPage_section', 
            __( 'Live Credentials', 'pw' ), 
            'pw_settings_section_callback', 
            'pluginPage'
    );

    add_settings_field( 
            'pw_textarea_intro', 
            __( 'Header Intro Text', 'pw' ), 
            'pw_textarea_intro_render', 
            'pluginPage', 
            'pw_pluginPage_section' 
    );

    add_settings_field( 
            'pw_intro', 
            __( 'Intro', 'pw' ), 
            'pw_intro_render', 
            'pluginPage', 
            'pw_pluginPage_section' 
    );
}

function pw_textarea_intro_render(  ) { 
    $options = get_option( 'pw_settings', array() );

?><textarea cols='40' rows='5' name='pw_settings[pw_textarea_intro]'><?php echo isset( $options['pw_textarea_intro'] ) ?  $options['pw_textarea_intro'] : false; ?></textarea><?php
}

function pw_intro_render() {
    $options = get_option( 'pw_settings', array() );
    $content = isset( $options['pw_intro'] ) ?  $options['pw_intro'] : false;
    wp_editor( $content, 'pw_intro', array( 
        'textarea_name' => 'pw_settings[pw_intro]',
        'media_buttons' => false,
    ) );
}

// section content cb
function pw_settings_section_callback() {
    echo '<p>Section Introduction.</p>';
}
3
Dave Romsey

toujours toujours toujours échapper à la sortie (ok, quelques cas rares vous ne devriez pas, mais la règle de base est de s'échapper). Pour textarea vous devez html échapper au contenu

<textarea><?php echo esc_html(get_option('my option')?></textarea>

le fait d'avoir l'espace entre les balises textarea de début et de fin et la sortie réelle n'aide pas non plus et ajoute probablement des espaces autour de votre "" contenu "actuel

2
Mark Kaplun