カスタムフィールドを利用して「オススメ投稿記事一覧」を表示する

<?php
/* カスタムフィールドに表示するHTMLを出力する関数 */
function recommend_setting_field(){
    /* 以前のオススメ投稿記事設定を取得 */
    $before_value = get_post_meta(get_the_ID(), '_my_recommend_setting', true);

    if($before_value == 'on'){
        /* 以前のオススメ投稿記事設定が'on'の場合はチェックをつけた状態で表示 */
        echo '<input type="checkbox" name="my_recommend_setting" value="on" checked="checked">オススメ投稿記事';
    } else {
        echo '<input type="checkbox" name="my_recommend_setting" value="on">オススメ投稿記事';
    }
}
/* オススメ投稿記事設定カスタムフィールドを追加する関数 */
function add_recommend_setting_field(){
    /* カスタムフィールドを追加 */
    /* 第５引数を'side'と設定してサイドに表示 */
    add_meta_box(
        'my_recommend_setting_id',
        'オススメ投稿記事設定',
        'recommend_setting_field',
        'post',
        'side',
        'low',
        null
    );
}

/* add_meta_boxesにフック */
add_action('add_meta_boxes', 'add_recommend_setting_field');

/* オススメ投稿記事設定をメタデータとして保存する関数 */
function save_recommend_setting($post_id){
    /* 自動保存の場合はなにもしない */
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
    }

    /* $_POST自体が空の場合は何もしない */
    if (empty($_POST)){
        return;
    }

    /* オススメ投稿記事設定の設定情報を_my_recommend_settingキーに保存 */
    update_post_meta( $post_id, '_my_recommend_setting', $_POST['my_recommend_setting'] );
}

/* save_postにフック */
add_action( 'save_post', 'save_recommend_setting' );

/* サムネを作成するための関数 */
function my_enable_popular_thumbnail(){
    add_theme_support( 'post-thumbnails' );

    /* リサイズ時に 100 x 100 pxのサムネを作成するように設定 */
    add_image_size('popular-thumb', 100, 100, true);
}

add_action('after_setup_theme', 'my_enable_popular_thumbnail');
/* オススメ投稿記事一覧を表示する関数 */
function listup_recommend_post(){

    /* サブクエリの条件を作成 */
    $sub_args = Array(
    /* _my_recommend_setting が ON の投稿記事のみを取得 */
    'meta_key' => '_my_recommend_setting',
    'meta_value' => 'on',

    /* 投稿日に対して降順に整列 */
    'orderby' => 'date',
    'order' => 'DESC',
    );

    /* サブクエリを発行してデータベースからデータ取得 */
    $my_query = new WP_Query($sub_args);

    /* まだオススメ投稿記事がない場合は関数終了 */
    if(!$my_query->have_posts()){
        echo '<p>オススメ投稿記事はありません</p>';
        return;
    }

    /* 見出しを出力 */
    echo '<H2>オススメ投稿記事一覧</H2>';

    /* 取得した投稿データをサブループで表示 */
    while ( $my_query->have_posts() ){
        $my_query->the_post();

        $post_id = get_the_ID();
        /* サムネを表示するHTMLを取得 */
        $image = get_the_post_thumbnail($post_id, 'popular-thumb');
        /* タイトル取得 */
        $title = get_the_title($post_id);
        /* リンク取得 */
        $link = get_the_permalink($post_id);
        /* ページビュー数取得 */
        //$view_count = get_post_meta($post_id, '_my_view_count', true);

        /* 取得した情報を出力 */
        $output = '';
        $output = $output . '<a href="' . $link . '" class="my-card-link">';
        $output = $output . '<div class="my-card">';
        $output = $output . $image;
        $output = $output . '<div class="my-card-content">';
        $output = $output . '<div class="my-card-title">';
        $output = $output . $title;
        $output = $output . '</div>';
        //$output = $output . '<div class="my-card-count">';
        //$output = $output . $view_count . ' views';
        //$output = $output . '</div>';
        $output = $output . '</div>';
        $output = $output . '</div>';
        $output = $output . '</a>';

        echo $output;
    }

    wp_reset_postdata();

}
?>

.my-card {
    display: flex;
    align-items: center;
    box-shadow: 0 0 5px #888888;
    margin: 10px;
    padding: 10px;
    max-width: 90%;
    overflow: hidden;
    background-color: #fafafa;
}

a.my-card-link {
	text-decoration: none;
	color: #222222;
}

.my-card-title {
	font-size: 1.0em;
    margin-left: 20px;
}
/*
.my-card-count {
    font-size: 0.8em;
    color: #ff8888;
    margin-left: 20px;
}
*/

<?php
get_header();

echo '<div id="content">';
echo '<h2>トップページです</h2>';

listup_recommend_post();

echo '</div>';
get_sidebar();
get_footer();
?>