「同じカテゴリの人気記事一覧」ウィジェットを自作する

<?php
/**
 * アイキャッチを有効化
 * 新しいリサイズサイズを追加
 */
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 my_view_count_func() {
	/* この投稿記事の投稿 ID を取得 */
	$post_id = get_the_ID();

	/* 投稿記事以外はカウントしない */
	if ( ! is_single( $post_id ) ) {
		return;
	}

	/* ページビュー数を表すメタデータを追加 */
	if ( ! add_post_meta( $post_id, '_my_view_count', '1', true ) ) {
		/* 既にページビュー数を表すメタデータが追加されている場合 */

		/* まずはこの投稿記事のページビュー数を取得 */
		$view_count = get_post_meta( $post_id, '_my_view_count', true );
		/* ページビュー数を＋１してメタデータを更新 */
		update_post_meta( $post_id, '_my_view_count', $view_count + 1 );
	}

}

add_action( 'wp_head', 'my_view_count_func' );

/**
 * Adds CategoryPopular_Widget widget.
 */
class MyCategoryPopular_Widget extends WP_Widget {

	/**
	 * ウィジェットの実体を作成
	 */
	public function __construct() {
		parent::__construct(
			'my_category_popular_widget',
			'カテゴリの人気記事'
		);
	}

	/**
	 * ウィジェットのフロントエンド表示
	 *
	 * @see WP_Widget::widget()
	 *
	 * @param array $args     ウィジェットの引数.
	 * @param array $instance データベースに保存されている設定値.
	 */
	public function widget( $args, $instance ) {

		/* 投稿記事以外は表示しない */
		if ( ! is_single( get_the_ID() ) ) {
			return;
		}
		/* ここからregister_sidebarに入力されたHTMLを出力 */

		/* before_widgetを出力 */
		echo $args['before_widget'];

		/* before_titleとafter_titleを出力 */
		if ( ! empty( $instance['title'] ) ) {
			/* タイトルが設定されている場合のみ出力 */
			echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
		}

		/* ここから記事一覧の表示 */
		$category = get_the_category( get_the_ID() );

		/* サブクエリの条件を作成 */
		$sub_args = array(
			/* カテゴリを現在表示している投稿記事のものに絞る */
			'category_name'  => $category[0]->category_nicename,
			/* 投稿記事を_my_view_countをキーとするメタデータの数に対して降順に整列 */
			'meta_key'       => '_my_view_count',
			'orderby'        => 'meta_value_num',
			'order'          => 'DESC',
			/* 整列後の投稿記事のデータを設定された表示数分取得 */
			'posts_per_page' => $instance['num'],
		);

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

		/* 取得した投稿データをサブループで表示 */
		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();

		/* 最後にafter_widgetを出力 */
		echo $args['after_widget'];
	}

	/**
	 * ウィジェットの設定フォームを表示する関数
	 *
	 * @param array $instance : 元々の設定を持つインスタンス.
	 */
	public function form( $instance ) {
		/* 設定値が設定されていない時のデフォルト値設定 */
		if ( ! empty( $instance['title'] ) ) {
			$title = $instance['title'];
		} else {
			$title = '同じカテゴリの人気記事';
		}

		if ( ! empty( $instance['num'] ) ) {
			$num = $instance['num'];
		} else {
			$num = '5';
		}
		?>
		<!-- ウィジェットのタイトル設定フォームを表示 -->
		<p>
		<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'タイトル:' ); ?></label>
		<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
		</p>

		<!-- ウィジェットの表示記事数設定フォームを表示 -->
		<p>
		<label for="<?php echo $this->get_field_id( 'num' ); ?>"><?php _e( '表示数:' ); ?></label>
		<input class="widefat" id="<?php echo $this->get_field_id( 'num' ); ?>" name="<?php echo $this->get_field_name( 'num' ); ?>" type="text" value="<?php echo esc_attr( $num ); ?>">
		</p>
		<?php
	}

	/**
	 * ウィジェットの設定を更新する関数
	 *
	 * @param array $new_instance : 新しい設定を持つインスタンス.
	 * @param array $old_instance : 今までの設定を持つインスタンス.
	 */
	public function update( $new_instance, $old_instance ) {
		/* サニタイズ後の設定値を格納するための$instanceを作成 */
		$instance = array();

		/*
		 * instance['title']：タイトル
		 * instance['num']：表示数
		 */

		/* タイトルのサニタイズ */
		if ( ! empty( $new_instance['title'] ) ) {
			/*
				フォームに設定された文字列が空でない場合は
				wp_strip_all_tagsを実行後の文字列をタイトルの設定値に設定
			*/
			$instance['title'] = wp_strip_all_tags( $new_instance['title'] );
		} else {
			/* 空の場合は「新しいタイトル」をタイトルに設定 */
			$instance['title'] = '新しいタイトル';
		}

		/* 表示数のサニタイズ */
		if ( ! empty( $new_instance['num'] ) ) {
			/* フォームに設定された文字列が空でない場合 */
			if ( intval( wp_strip_all_tags( $new_instance['num'] ) ) > 0 ) {
				/* 文字列をint化した数値が0より大きい場合のみ、その文字列を表示数として設定 */
				$instance['num'] = wp_strip_all_tags( $new_instance['num'] );
			} else {
				/* 0より小さい場合はデフォルト値5を設定 */
				$instance['num'] = '5';
			}
		} else {
			/* フォームに設定された文字列が空の場合はデフォルトの5を設定 */
			$instance['num'] = '5';
		}

		return $instance;
	}
}

/**
 * 作成したウィジェットサブクラスを登録
 */
function my_register_category_popular_widgets() {
	register_widget( 'MyCategoryPopular_Widget' );
}

/* widgets_init に作成したウィジェットを登録する関数をフック */
add_action( 'widgets_init', 'my_register_category_popular_widgets' );
?>

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