Wordpress短代码出现在错误的地方

Question

I have a wordpress shortcode to handle some PHP (for custom fields) for my sidebar. The shortcode is below:

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;
}

For some reason, when I use this shortcode, it generates the html in completely the wrong place on the page (in the div above where the shortcode is). I haven't come across this before, so any ideas on why this might happen?

You can see the weird place they're appearing here:

shortcode generating in weird place...

This is the theme sidebar code:

<?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; ?>

This is the generated HTML. As you can see, the top widget (also using a shortcode whose function references custom fields (but in a different way - with a loop - as the fields it's referencing are different)) works fine, as does the bottom (just a simple

followed by a button). But in the middle widget, the shortcode generates the link and text above the div that the widget is supposed to be in...

<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

i think you code should be

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;
}

non valid html elements can cause this type of behavior depending on your css. If you require more assistance please provide template code, or at least the snippet around the_content()

edit: the_field is the same as echo get_field. it can't be used to build a string. that's why you use get_field on top :)