如何正确保存包含WordPress代码的选项？

Question

下面是问题的截图：

​

WordPress选项页面的该部分的HTML如下所示：

​

因此，在WordPress管理区域，我输入了一段HTML (将一个可点击的链接作为前端的输出)。

这是我在后端的文本输入字段中输入的代码：

<a title="Website Design London" href="../../website-design/">Website Design</a>

而在前面的链接显示OK，我看到这个混乱(见截图)在后端。

据我所知，相关的PHP代码如下：

$this->text(
    'workdone',
    esc_html__( 'Work done', 'mytheme' )
);

那么，保存包含HTML代码的选项的正确方法是什么？

我怎样才能解决屏幕截图上的混乱呢？

Answer 1

我也遇到了同样的问题，这段代码也适用于我：

// render service label
public function render_service_label() {
    $value = get_option( 'wbk_service_label', '' ); 
    $value = htmlspecialchars( $value );
    $html = '<input type="text" id="wbk_service_label" name="wbk_service_label" value="'.$value.'" >';
        $html .= '<p class="description">' . __( 'Service label', 'wbk' ) . '</p>';
        echo $html;
}
// validate service label
public function validate_service_label( $input ) {
    $allowed_tags = array(
        //formatting
        'strong' => array(),
        'em'     => array(),
        'b'      => array(),
        'i'      => array(),
        'br'      => array(),
        //links
        'a'     => array(
            'href' => array(),
            'class' => array()
        ),
        //links
        'p'     => array(
            'class' => array()
        )
    );
    $input =  wp_kses( $input, $allowed_tags );
    return  $input;
}

因此，在仪表板选项页中，我使用了htmlspecialchars函数

在前端页面中，我这样使用：

$label = get_option( 'wbk_service_label',  __( 'Select service', 'wbk' ) );