Adicionando um editor html à página de configurações do plugin

Question

Adicionando um editor html à página de configurações do plugin

#1 resposta do Dave Romsey (2 votos)
#2 resposta do Mark Kaplun (2 votos)

4

Estou criando uma página de configurações de plugins usando a API register_settings ().

Como posso criar um editor html (editor padrão do wordpress seria esplêndido) em vez de apenas uma área de texto.

Este é um exemplo do código que estou usando:

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

}

Reduzi o código para apenas um campo, mas há mais campos.

Isso está renderizando a área de texto para mim, mas não consigo formatar texto e continua adicionando guias extras antes e depois de qualquer texto que eu inserir na página de configurações.

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

Eu adicionei o novo código como Dave sugeriu (obrigado!) e agora ele carrega o editor wp, mas quando eu clico em salvar para confirmar as alterações ele não salva o conteúdo do wp_editor. Alguma ideia?

settings-api

por pressword 27.03.2017 / 23:04

2 respostas

2

sempre sempre escape saída (ok, alguns casos raros você não deveria, mas a regra é escapar). Para textarea você precisa para html escapar do conteúdo

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

ter o espaço entre as tags textarea de início e fim e a saída real também não ajuda e provavelmente adiciona alguns espaços em torno do seu "" conteúdo real "

por Mark Kaplun 28.03.2017 / 09:14

Tags settings-api

Como configurar o post slug ao usar o wp_insert_post () ;? get_parent_theme_file_path vs. get_template_directory

score 2 · Accepted Answer

Aqui está uma versão atualizada do seu código original, que resolve o problema de salvar.

O motivo pelo qual o conteúdo dentro do WP Editor não estava sendo salvo foi devido ao valor do parâmetro textarea_name passado para wp_editor() .

Isso está errado:

 'textarea_name' => 'pw_intro',

Deveria ser assim:

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

Eu também removi o eco de wp_editor() , corrijo os espaços extras ao redor da área de texto, etc.

Exemplo de código completo:

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