web-dev-qa-db-ja.com

プラグイン設定ページへのHTMLエディタの追加

私はregister_settings（）APIを使用してプラグイン設定ページを作成しています。

テキスト領域ではなく、HTMLエディタ（Wordpressのデフォルトエディタが素晴らしい）を作成する方法を教えてください。

これは私が使っているコードの例です。

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

}

コードを1つのフィールドだけにまとめましたが、さらにフィールドがあります。

これは私のためにテキスト領域をレンダリングしていますが、私はテキストをフォーマットすることができません、そしてそれは私が設定ページに入力するテキストの前後に余分なタブを追加し続けます。

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)  );
}

Daveが提案したように新しいコードを追加しました（ありがとう！）。これでwpエディタがロードされますが、変更をコミットするために[save]をクリックしてもwp_editorの内容は保存されません。何か案は？

settings-api
5
pressword

これは元のコードの更新版で、問題を解決しています。

WPエディタ内のコンテンツが保存されていないのは、wp_editor()に渡されるtextarea_nameパラメータの値が原因です。

これは間違っています：

 'textarea_name' => 'pw_intro',

これは次のようになります。

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

私はまたwp_editor()からエコーを取り除き、テキスト領域の周りの余分なスペースを修正しました、など。

完全なコード例：

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

常に常に出力をエスケープします（まれに、そうしないほうがいい場合もありますが、経験則ではエスケープします）。 textareaの場合は、コンテンツをHTMLエスケープする必要があります

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

開始と終了のtextareaタグと実際の出力の間にスペースを入れても役に立たず、おそらく実際の ""コンテンツの周りにスペースを追加するでしょう。

2
Mark Kaplun