如何在 WordPress 中转义/正确打印包含引号和括号的文本

Question

我正在向名为 'onclick' 的 woocommerce 简码按钮添加一个文件。这是跟踪 Google Analytics 中的点击事件所必需的。

这是添加 onclick 属性后代码按钮短代码的样子：

function woo_shortcode_button( $atts, $content = null ) {
    extract( shortcode_atts( array( 'size' => '',
                                    'style' => '',
                                    'bg_color' => '',
                                    'color' => '',
                                    'border' => '',
                                    'text' => '',
                                    'class' => '',
                                    'link' => '#',
                                    'window' => '',
                                    'onclick' => '' ), $atts ) );


    // Set custom background and border color
    $color_output = '';
    if ( $color ) {
        $preset_colors = array( 'red', 'orange', 'green', 'aqua', 'teal', 'purple', 'pink', 'silver' );
        if ( in_array( $color, $preset_colors ) ) {
            $class .= ' ' . $color;
        } else {
            if ( $border ){
                $border_out = $border;
            } else {
                $border_out = $color;
            }

            $color_output = 'style="background:' . esc_attr( $color ) . ';border-color:' . esc_attr( $border_out ) . '"';

            // add custom class
            $class .= ' custom';
        }
    } else {
        if ( $border )
                $border_out = $border;
            else
                $border_out = $bg_color;

            $color_output = 'style="background:' . esc_attr( $bg_color ) . ';border-color:' . esc_attr( $border_out ) . '"';

            // add custom class
            $class .= ' custom';
    }

    $class_output = '';

    // Set text color
    if ( $text ) $class_output .= ' dark';
    // Set class
    if ( $class ) $class_output .= ' '.$class;
    // Set Size
    if ( $size ) $class_output .= ' '.$size;
    // Set window target
    if ( $window ) $window = 'target="_blank" ';
    // Set onclick
    if ( $onclick ) $onclick = 'onclick="'. $onclick .'" ';

    $output = '<a ' . $window . esc_attr($onclick) . 'href="' . esc_attr( esc_url( $link ) ) . '" class="woo-sc-button' . esc_attr( $class_output ) . '" ' . $color_output . '><span class="woo-' . esc_attr( $style ) . '">' . wp_kses_post( woo_remove_wpautop( $content ) ) . '</span></a>';
    return $output;
} // End woo_shortcode_button()

add_shortcode( 'button', 'woo_shortcode_button' );

Google Analytic 的点击事件文本如下所示：

_gaq.push(['_trackEvent', 'trackthis', 'Click', 'home-a']);

所以一个完整的按钮短代码示例是：

[button window="yes" onclick="_gaq.push(['_trackEvent', 'trackthis', 'Click', 'home-a']);"]hi[/button]

但是当我发布它时，代码被破坏了，看起来像：

<a target="_blank" onclick="&quot;”_gaq.push([‘_trackEvent’,&quot;" href="#" class="woo-sc-button  custom" style="background:;border-color:"><span class="woo-">);”]hi</span></a>

如何正确输出这段文字？

更新：

当我尝试使用以下两个更改实施删除功能的建议时：

if ( $onclick ) $onclick = 'onclick="'. esc_attr($onclick) .'" ';

$output = '<a ' . $window . $onclick . 'href="' . esc_attr( esc_url( $link ) ) . '" class="woo-sc-button' . esc_attr( $class_output ) . '" ' . $color_output . '><span class="woo-' . esc_attr( $style ) . '">' . wp_kses_post( woo_remove_wpautop( $content ) ) . '</span></a>';

我得到：

<a target="_blank" href="#" class="woo-sc-button  custom" style="background:;border-color:"><span class="woo-">);"]hi</span></a>

更新 2:

接受了将编码全部删除并在 $window 和 $onclick 变量之间添加一个 space 的建议：

if ( $onclick ) $onclick = 'onclick="'. $onclick .'" ';

$output = '<a ' . $window . ' ' . $onclick . 'href="' . esc_attr( esc_url( $link ) ) . '" class="woo-sc-button' . esc_attr( $class_output ) . '" ' . $color_output . '><span class="woo-' . esc_attr( $style ) . '">' . wp_kses_post( woo_remove_wpautop( $content ) ) . '</span></a>';

输出看起来一样：

<a target="_blank" href="#" class="woo-sc-button  custom" style="background:;border-color:"><span class="woo-">);"]hi</span></a>

进一步说明一下，当输入不包含任何特殊字符串时，输出是正常的：

<a target="_blank" onclick="dosomething" href="#" class="woo-sc-button  custom" style="background:;border-color:"><span class="woo-">hi</span></a>

Answer 1

如前所述in the Codex, esc_attr()：

Encodes the <, >, &, " and ' (less than, greater than, ampersand, double quote and single quote) characters.

要解决此问题，您只需删除该功能即可：

$output = '<a ' . $window . ' ' . $onclick . 'href="' . esc_attr( esc_url( $link ) ) . '" class="woo-sc-button' . esc_attr( $class_output ) . '" ' . $color_output . '><span class="woo-' . esc_attr( $style ) . '">' . wp_kses_post( woo_remove_wpautop( $content ) ) . '</span></a>';

Answer 2

您应该转义属性值，而不是它的名称和值周围的引号，因为您会破坏值周围的引号。查看 href、class 和样式是如何完成的。所以你应该使用

if ( $onclick ) $onclick = 'onclick="'. esc_attr($onclick) .'" ';

但是按照@rnevius 的描述构建输出时只使用 $onclick。

Answer 3

问题是双重的。

您在属性中使用了方括号。 WP 将此视为您的短代码的结束标记（不建议在您的属性值中使用引号，但这是可能的）。
不要在你的属性中使用空格，它会把事情搞砸。

http://codex.wordpress.org/Shortcode_API#Attributes

你可以这样做。

找到括号并替换为方括号+括号

简码（去掉空格和方括号）：

[button window="yes" onclick="_gaq.push('_trackEvent','trackthis','Click','home-a');"]hi[/button]

简码功能（找到括号替换为方括号+括号）：

if ( $onclick ) $onclick = 'onclick="'. $onclick .'" ';

$onclick = str_replace("(", "([", $onclick);
$onclick = str_replace(")", "])", $onclick);

$output = '<a ' . $window . $onclick . 'href="' . esc_attr( esc_url( $link ) ) . '" class="woo-sc-button' . esc_attr( $class_output ) . '" ' . $color_output . '><span class="woo-' . esc_attr( $style ) . '">' . wp_kses_post( $content  ) . '</span></a>';

或者您可以将参数中的 gaqpush 放入短代码中。

简码：

[button window="yes" onclick="'_trackEvent','trackthis','Click','home-a'"]hi[/button]

函数：

if ( $onclick ) $onclick = "onclick='_gaq.push([". $onclick ."']); ";

如何在 WordPress 中转义/正确打印包含引号和括号的文本

how to escape/ properly print text containing quotes & brackets in WordPress

php

wordpress

woocommerce

找到括号并替换为方括号+括号

或者您可以将参数中的 gaqpush 放入短代码中。