Question

我是当地志愿者历史小组的网站管理员，因此我建立了一个WordPress主题，并且我试图让其他志愿者轻松维护/工作。我已经制作了一个易于理解的模板＆＃39;添加按钮，我决定采取额外的步骤，为任何不了解HTML的人制作一个短代码。

<div class="button-container" id="bkg-img">
  <a href="#" target="_blank" class="btn-clear">
    <h2 class="button">Button Title</h2>
  </a>
</div>

以上产生了...... https://mattyoungdesigns.com/img/Correct%20Button.png

我的短代码构建如下......

//Button Shortcode
function button_shortcode( $atts, $content = null ) {

$atts = shortcode_atts(
    array(
        title => 'This is a button',
        background => '',
        src => '#',
        target => '',
    ), $atts
);

$displaybutton = '<div class="button-container" id="' . $atts[ 'background' ] . '>';
$displaybutton .= '<a href="' . $atts[ 'src' ] . '" class="btn-clear" target="' . $atts[ 'target' ] . '" style="margin-top: 25px;">';
$displaybutton .= '<h2 class="button">';
$displaybutton .= $atts[ 'title' ];
$displaybutton .= '</h2></a></div>';


return $displaybutton;

}

// Register Shortcodes
add_shortcode( 'button', 'button_shortcode' );

它输出...... https://mattyoungdesigns.com/img/Incorrect%20Button.png

我是制作短代码的新手，所以我确定它可能只是我缺少的东西，但为什么短代码的显示方式与HTML不同？在此先感谢!!

Answer 1

查看shortcode API。

尝试使用此功能。另外，我认为你在输出中缺少双引号，这可能导致它渲染效果不佳。

//Button Shortcode
function button_shortcode( $atts, $content = null ) {

$atts = shortcode_atts(
    array(
        title => 'This is a button',
        background => '',
        src => '#',
        target => '',
    ), $atts
);

return '<span class="' . esc_attr($a['class']) . '">' . $content . '</span>';

$displaybutton '<div class="button-container" id="' . esc_attr($atts[ 'background' ]) . '">';
$displaybutton .= '<a href="' . esc_attr($atts[ 'src' ]) . '" class="btn-clear" target="' . esc_attr($atts[ 'target' ]) . '" style="margin-top: 25px;">';
$displaybutton .= '<h2 class="button">';
$displaybutton .= esc_attr($atts[ 'title' ]);
$displaybutton .= '</h2></a></div>';

return $displaybutton;

}

// Register Shortcodes
add_shortcode( 'button', 'button_shortcode' );

WordPress Shortcode错误地显示HTML

1 个答案: