如何正确保存包含HTML代码的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' ) );