我正在向名为"onclick"的wooccommerce短代码按钮添加一个文件。这是在谷歌分析中跟踪点击事件所必需的。
这就是添加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' );
谷歌分析的点击事件文本如下：
_gaq.push(['_trackEvent', 'trackthis', 'Click', 'home-a']);
因此，一个完整的按钮短代码示例是：
[button window="yes" onclick="_gaq.push(['_trackEvent', 'trackthis', 'Click', 'home-a']);"]hi[/button]
但当我发布它时，代码被破坏了，看起来像：
<a target="_blank" onclick=""”_gaq.push([‘_trackEvent’,"" 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变量之间添加一个空格：
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>
问题有两个方面。
- 您在属性中使用方括号。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 ."']); ";
如Codex中所述，esc_attr（）：
对<，>进行编码&，"和'（小于、大于、与号、双引号和单引号）字符。
为了解决这个问题，你只需要删除这个功能：
$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>';
您应该转义属性值，而不是它的名称，并在值周围加引号，因为您破坏了值周围的引号。查看href、类和样式是如何完成的。所以你应该使用
if ( $onclick ) $onclick = 'onclick="'. esc_attr($onclick) .'" ';
但是在按照@rnevius编写的方式构建输出时只使用$onclick。