Wordpress短代码出现在错误的位置

Question

我有一个wordpress短代码来处理我的侧栏中的一些PHP (自定义字段)。短代码如下：

add_shortcode('my_further_information_list','my_further_information_list_func');
function my_further_information_list_func(){
        $additional_info_1 = get_field( 'additional_info_1');
        $additional_info_2 = get_field( 'additional_info_2');
        $additional_info_3 = get_field( 'additional_info_3');
        if ( $additional_info_1) {
            $html = '<li>'.the_field('additional_info_1').'</li>';
        }
        if ( $additional_info_2) {
            $html = '<li>'.the_field('additional_info_2').'</li>';
        }
        if ( $additional_info_3) {
            $html = '<li>'.the_field('additional_info_3').'</li>';
        }
        return $html;
}

由于某些原因，当我使用这个短代码时，它会在页面上完全错误的地方生成html (在上面的div中，这里是短代码的位置)。我以前没见过这种事，所以对为什么会发生这种事有什么想法吗？

你可以看到他们出现在这里的奇怪的地方：

在奇怪的地方生成短代码..。

这是主题侧栏代码：

<?php if ( x_get_content_layout() != 'full-width' ) : ?>

  <aside class="x-sidebar nano" role="complementary">
    <div class="max width nano-content">
      <?php if ( get_option( 'ups_sidebars' ) != array() ) : ?>
        <?php dynamic_sidebar( apply_filters( 'ups_sidebar', 'sidebar-main' ) ); ?>
      <?php else : ?>
        <?php dynamic_sidebar( 'sidebar-main' ); ?>
      <?php endif; ?>
    </div>
  </aside>

<?php endif; ?>

这是生成的HTML。如您所见，顶部小部件(也使用其函数引用自定义字段的短代码(但以不同的方式引用自定义字段--因为它所引用的字段不同)运行良好)，底部也是如此(只是一个简单的

后面跟着一个按钮)。但是在中间部件中，短代码生成小部件应该在的div上方的链接和文本.

<div id="text-8" class="widget widget_text">    
    <h4 class="h-widget">Related Articles</h4>
        <div class="textwidget">
            <p>
                <ul>
                    <li><a href="https://www.relatedarticle1.link">Related Article 1</a></li>
                    <li><a href="https://www.relatedarticle2.link">Related Article 2</a></li>
                    <li><a href="https://www.relatedarticle3.link">Related Article 3</a></li>
                </ul>
            </p>
        </div>
</div>

<a href="https://www.furtherinformation1.link" target="_blank">Further Information 1</a><a href="https://www.furtherinformation2.link" target="_blank">Further Information 2</a>
<div id="text-9" class="widget widget_text">
    <h4 class="h-widget">Further Information</h4>
        <div class="textwidget"><p><ul><li></li><li></li></ul></p></div>
</div>

<div id="custom_html-4" class="widget_text widget widget_custom_html">
    <h4 class="h-widget">Feedback</h4>
        <div class="textwidget custom-html-widget">
            <p>Please provide feedback!<p>
                <a href="" class="open-popup" title="Feedback"><button>PROVIDE FEEDBACK</button></a>
        </div>
</div>

Answer 1

我觉得你的代码应该是

add_shortcode('my_further_information_list','my_further_information_list_func');
function my_further_information_list_func(){
        $additional_info_1 = get_field( 'additional_info_1');
        $additional_info_2 = get_field( 'additional_info_2');
        $additional_info_3 = get_field( 'additional_info_3');
        $html = "<ul>";
        if ( $additional_info_1) {
            $html .= '<li>'.$additional_info_1.'</li>';
        }
        if ( $additional_info_2) {
            $html .= '<li>'.$additional_info_2.'</li>';
        }
        if ( $additional_info_3) {
            $html .= '<li>'.$additional_info_3.'</li>';
        }
        $html .= "</ul>";
        return $html;
}

非有效的html元素会导致这种行为，这取决于您的css。如果您需要更多的帮助，请提供模板代码，或者至少提供关于the_content()的片段。

编辑: the_field与回显get_field相同。它不能用于构建字符串。这就是为什么在顶部使用get_field的原因:)