WordPress循环输出打印错误

Question

我为 wordpress 编写了一个简短的代码，但是将要打印的输出有点奇怪 所以这是我的循环代码

function events_accordion_shortcode($category){
// WP_Query arguments
$args = array (
    'post_type'              => array( 'event' ),
    'post_status'            => array( 'publish' ),
    'nopaging'               => true,
    'order'                  => 'ASC',
    'orderby'                => 'menu_order',
    'meta_query' => array(
         array(
                'key' => 'custom_page_category',
                'value' => $category,
            )
        ),
);
// The Query
$events = new WP_Query( $args );
echo '<div class="container">';

// The Loop
$first = true;
if ( $events->have_posts() ) {
    echo '<ul class="responsive-table">
            <li class="table-header">
              <div class="col col-3">Event</div>
              <div class="col col-6">date</div>
              <div class="col col-6"> location</div>
              <div class="col col-6">FOCUS</div>
            </li>';
    while ( $events->have_posts() ) {
        $events->the_post();
        $post_id=get_the_ID();
        $mydate = get_post_meta($post_id, 'date', true);
        $mylocation = get_post_meta($post_id, 'location', true);
        $myfocus = get_post_meta($post_id, 'focus', true);


        echo '<li class="table-row accordion">' .
                '<div class="col col-3" data-label="title">' . the_title() . '</div>' .
                '<div class="col col-6" data-label="date">'. $mydate .'</div>' .
                '<div class="col col-6" data-label="location">'. $mylocation .'</div>' .
                '<div class="col col-6" data-label="focus">'. $myfocus .'</div>' .
                '<div class="col col-6" data-label="plus">
                    <i id="load-more" aria-hidden="true" class="fas fa-plus"></i>
                </div>' .
            '</li>';
        echo '<li class="panel"></li>';

    }
} else {
    // no posts found
}
echo '</ul></div>';
}

问题是“the_title()”值被打印在 li 标记之外，这是我得到的奇怪输出：

<div class="container">
<ul class="responsive-table">
    <li class="table-header">
    <div class="col col-3">Event</div>
        <div class="col col-6">date</div>
        <div class="col col-6"> location</div>
        <div class="col col-6">FOCUS</div>
    </li>
    event 1
   <li class="table-row accordion">
       <div class="col col-3" data-label="title"></div>
       <div class="col col-6" data-label="date">13/6/2019</div>
       <div class="col col-6" data-label="location"></div>
       <div class="col col-6" data-label="focus">brain</div>
       <div class="col col-6" data-label="plus">
            <i id="load-more" aria-hidden="true" class="fas fa-plus"></i>
        </div>
    </li>
    <li class="panel"></li>
</ul>
</div>

如您所见，帖子标题（事件 1）已复制到 li 标签之外 我做错了什么？我不知道该怎么办

Answer 1

 echo '<li class="table-row accordion">' .
            '<div class="col col-3" data-label="title">' . get_the_title() . '</div>' .
            '<div class="col col-6" data-label="date">'. $mydate .'</div>' .
            '<div class="col col-6" data-label="location">'. $mylocation .'</div>' .
            '<div class="col col-6" data-label="focus">'. $myfocus .'</div>' .
            '<div class="col col-6" data-label="plus">
                <i id="load-more" aria-hidden="true" class="fas fa-plus"></i>
            </div>' .
        '</li>';
    echo '<li class="panel"></li>';

你必须写get_the_title()，因为你已经在li标签的开头写了echo。阅读get_the_title()和the_title()之间的difference here