Wordpress 简码 - 第一个简码已损坏答案

【问题标题】：Wordpress shortcodes - first shortcode is brokenWordpress 简码 - 第一个简码已损坏
【发布时间】：2018-04-22 09:41:46
【问题描述】：

我有一个页面，我想在其中将一些音乐会添加到日程安排页面。为此，我决定使用简码，以便用户只提供必要的数据，然后我将解析它并在简码函数中生成 html。

首先我想告诉你为什么我认为这与 wordpress 相关。我已将此代码直接添加到页面 php 文件中：

<h4>This year hardcoded</h4>
<a href='#' class='p-link'>
    <h2>01.02.2018 / RHCP</h2>
    <p>20:00 / NY</p>
</a>
<a href='#' class='p-link'>
    <h2>03.04.2018 / The Rolling Stones</h2>
    <p>21:00 / LONDON</p>
</a>
<a href='#' class='p-link'>
    <h2>11.12.2018 / Pink Floyd</h2>
    <p>22:00 / TOKIO</p>
</a>

而且效果很好。

由于我的简码函数返回相同的结果，我希望得到相同的结果，但我没有得到它。第一个简码结果被破坏。

这是我在functions.php中添加的：

function shortcode_issue_func( $atts ) {
    $shortcode_atts = shortcode_atts( array(
        'date' => '',
        'time' => '',
        'title' => '',
        'location' => '',
        'link' => '#'
    ), $atts );

    $html = "<a href='{$shortcode_atts['link']}' class='p-link'>
                <h2>{$shortcode_atts['date']} / {$shortcode_atts['title']}</h2>
                <p>{$shortcode_atts['time']} / {$shortcode_atts['location']}</p>
            </a>";
    return $html;
}
add_shortcode( 'shortcode-issue', 'shortcode_issue_func' );

在 wordpress 页面编辑中我添加了这个：

[shortcode-issue date="19.07.2018" time="20:00" title="RHCP" location="NY" link="http://localhost/wordpress/rep-3/" ]
[shortcode-issue date="21.08.2018" time="21:00" title="The Rolling Stones" location="London" link="http://localhost/wordpress/rep-3/" ]
[shortcode-issue date="23.11.2018" time="22:00" title="Pink Floyd" location="NY" link="http://localhost/wordpress/rep-3/" ]

这是输出

您会注意到，第 1 节和第 2 节没有像第 3 节那样被包裹在“a”标签中。

在返回之前转储 $html，表明应该没有问题：

我所做的 hacky 解决方案是在“a”标签之前添加空的“p”标签。

$html = "<p style='display: none;'></p>
        <a href='{$shortcode_atts['link']}' class='p-link'>
            <h2>{$shortcode_atts['date']} / {$shortcode_atts['title']}</h2>
            <p>{$shortcode_atts['time']} / {$shortcode_atts['location']}</p>
        </a>";
return $html;

但我不想在我的代码中出现这样的 hack，而且我找不到发生这种情况的原因。如果有人可以提供帮助，我将非常感激。

编辑 1

代码有 HTML5 声明 --> <!DOCTYPE html>

所以应该允许“a”标签包装。

编辑 2

我刚刚注意到生成的 html 中有一个“幻影”“p”标签。

谢谢！

【问题讨论】：

使用 <span> 而不是 <p> ，您这样做的方式只允许在 HTML5 中使用，如果您的 html 文档以正常的 HTML 开头开头，那么它将无法正常工作无论如何，在这两种情况下，都使用<span> 而不是<p>
已经用 span 试过了，还是不行。并且代码有 HTML5 声明 --> ""

标签： php wordpress hyperlink shortcode

【解决方案1】：

尝试删除$html变量值中多余的空格。

所以改变这个：

$html = "<a href='{$shortcode_atts['link']}' class='p-link'>
            <h2>{$shortcode_atts['date']} / {$shortcode_atts['title']}</h2>
            <p>{$shortcode_atts['time']} / {$shortcode_atts['location']}</p>
        </a>";

..到这个：

$html = "<a href='" . esc_url( $shortcode_atts['link'] ) . "' class='p-link'>" .
    "<h2>{$shortcode_atts['date']} / {$shortcode_atts['title']}</h2>" .
    "<p>{$shortcode_atts['time']} / {$shortcode_atts['location']}</p>" .
"</a>";

PS：esc_url() 一个 URL 地址总是一个好习惯。

【讨论】：

感谢@sally-cj 提供的解决方案和 esc_url 建议。