WordPressショートコードで呼び出した記事一覧が先頭に表示されてしまう

ordPressのショートコードで呼び出した記事一覧がどうしても先頭に表示されてしまう現象が発生しました。

見出し

1 現状の問題のあるコード
2 修正後

現状の問題のあるコード

function shortcode_show_hoge_list() {
	$args = array(
		'post_type' => 'hoge_type', //タイプ
		'posts_per_page' => '5', //5件
		'orderby' => array('menu_order' => 'DESC', 'date' => 'DESC'),
	);
	query_posts($args);
	if (have_posts()) {
		while (have_posts()) {
			the_post();
			// 名前
			if (get_field('name')) {
				$voice_name = get_field('name');
			} else {
				$voice_name = '匿名';
			}

			$result_code .= '
			<div>
			<p>' . $voice_name . 'さん
			</div>';
			echo $result_code;
		}
	}
}
add_shortcode('show_hoge_list', 'shortcode_show_hoge_list');

function shortcode_show_hoge_list() {

$args = array(

'post_type' => 'hoge_type', //タイプ

'posts_per_page' => '5', //5件

'orderby' => array('menu_order' => 'DESC', 'date' => 'DESC'),

);

query_posts($args);

if (have_posts()) {

while (have_posts()) {

the_post();

// 名前

if (get_field('name')) {

$voice_name = get_field('name');

} else {

$voice_name = '匿名';

}

$result_code .= '

' . $voice_name . 'さん

echo $result_code;

}

add_shortcode('show_hoge_list', 'shortcode_show_hoge_list');

これのechoだったからいけなかったようです。最後にまとめてreturnでcodeを返す必要がありました。

修正後

function shortcode_show_hoge_list() {
	$args = array(
		'post_type' => 'hoge_type',  //タイプ
		'posts_per_page' => '5', //5件
		'orderby' => array('menu_order' => 'DESC', 'date' => 'DESC'),
	);
	query_posts($args);
	if (have_posts()) {
		$result_code = null;
		while (have_posts()) {
			the_post();
			// 名前
			if (get_field('name')) {
				$voice_name = get_field('name');
			} else {
				$voice_name = '匿名';
			}

			$result_code .= '
			<div>
			<p>' . $voice_name . 'さん
			</div>';
			}
		}
		return $result_code;
	}
add_shortcode('show_hoge_list', 'shortcode_show_hoge_list');