【SANGO向けカスタマイズ】SANGO向け「同じカテゴリの人気記事一覧」ウィジェットを自作する

SANGO向け同じカテゴリの人気記事一覧ウィジェット解説ページのアイキャッチ

このページにはプロモーションが含まれています

「同じカテゴリの人気記事一覧」ウィジェットを SANGO 向けに作成してみましたのでプログラムや作り方を紹介したいと思います。

WordPressPopularPosts プラグインは使用していない、完全自作のウィジェットになります。

このウィジェットを追加すれば、投稿記事表示時に、その投稿記事と同じカテゴリの人気記事(ページビュー数の多い記事)の一覧が表示できます。

表示結果は下の図のような感じです。私のウェブサイトでもサイドバーで表示してます。

SANGO向けカスタマイズした人気投稿記事一覧ウィジェット

興味のある方は是非このページを読んでみてください!

ちなみに SANGO テーマ自体は下記ページで紹介されています。

https://saruwakakun.design

SANGO 向け「同じカテゴリの人気記事一覧」ウィジェット

下記を functions.php にコピペするだけで SANGO 向けの「同じカテゴリの人気記事一覧」がテーマに追加されます。

functions.php
<?php
/**
 * 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;
		}

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

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

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

		/* データ取得できなかった場合は終了 */
		if ( ! $my_query->have_posts() ) {
			wp_reset_postdata();
			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'];
		} else {
			/* タイトルが設定されていない場合の出力 */
			echo '同じカテゴリの人気記事';
		}

		echo '<ul class="my-widget show_num">';

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

			$post_id = get_the_ID();
			/* サムネを表示するHTMLを取得 */
			$thumbnail_id = get_post_thumbnail_id( $post_id );
			$image        = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail' );
			$image_url    = $image[0];
			/* タイトル取得 */
			$title = get_the_title( $post_id );
			/* リンク取得 */
			$link = get_the_permalink( $post_id );
			/* ページビュー数取得 */
			$num_views = get_post_meta( $post_id, 'post_views_count', true );
			/* コメント数取得 */
			$num_comments = get_comments_number( $post_id );

			/* 取得した情報を出力 */
			$output = '';
			$output = $output . '<li>';
			$output = $output . '<a href="' . $link . '">';
			$output = $output . '<figure class="my-widget__img">';
			$output = $output . '<img width="81" height="81" alt="" class="wpp-thumbnail wpp_featured wpp_cached_thumb wpp-lazyloaded" src="' . $image_url . '">';
			$output = $output . '</figure>';
			$output = $output . '<div class="my-widget__text">';
			$output = $output . $title;
			$output = $output . '<span class="dfont views"> <span class="wpp-views">' . $num_views . ' views</span> | <span class="wpp-comments">' . $num_comments . ' comments</span></span>';
			$output = $output . '</div></a></li>';

			echo $output;
		}
		wp_reset_postdata();
		echo '</ul>';

		/* 最後に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'] ) ) {
			/*
				フォームに設定された文字列が空でない場合は
				strip_tagsを実行後の文字列をタイトルの設定値に設定
			*/
			$instance['title'] = strip_tags( $new_instance['title'] );
		} else {
			/* 空の場合は「新しいタイトル」をタイトルに設定 */
			$instance['title'] = '新しいタイトル';
		}

		/* 表示数のサニタイズ */
		if ( ! empty( $new_instance['num'] ) ) {
			/* フォームに設定された文字列が空でない場合 */
			if ( intval( strip_tags( $new_instance['num'] ) ) > 0 ) {
				/* 文字列をint化した数値が0より大きい場合のみ、その文字列を表示数として設定 */
				$instance['num'] = strip_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' );
?>
注意

ウィジェットは functions.php を変更することで作成します

functions.php の変更がうまくいかないとウェブサイトが表示されなくなる可能性がありますので、必ずバックアップを取ってから変更しましょう

また、必ず子テーマの functions.php を変更するようにしてください

「同じカテゴリの人気記事一覧」ウィジェットの使い方

使い方は、通常のウィジェット同様です。

functions.php に上記のプログラムを追加すれば、ウィジェット設定画面(ダッシュボードから「外観」→「ウィジェット」で表示される設定画面)に下のような「同じカテゴリの人気記事」ウィジェットが表示されるようになります。

同じカテゴリの人気記事一覧ウィジェットの追加画面

ドラッグ&ドロップ操作することで、サイドバーや追尾サイドバーにこのウィジェットを追加することができます。

同じカテゴリの人気記事一覧ウィジェットの追加

ウィジェット追加後に投稿記事のページを表示すれば、下のようにサイドバーに「同じカテゴリの人気記事一覧」が表示されるはずです。

同じカテゴリの人気記事一覧表示例

スポンサーリンク

ウィジェット作成プログラムの説明

「同じカテゴリの人気投稿記事一覧」ウィジェットの一般的な作り方は下記ページで紹介しており、このページで紹介しているプログラムも下記ページとほぼ内容と同じです。

同じカテゴリの人気記事一覧ウィジェット解説ページのアイキャッチ 「同じカテゴリの人気記事一覧」ウィジェットを自作する

若干サムネの表示の仕方を変更したりコメント数の追加をしたりしていますが、ほぼ上のページを読んでいただければプログラムの全容は理解していただけると思います。

ただし、上のページのものは一般的なもので、このページで表示しているウィジェットでは、さらにそこから SANGO 向けのカスタマイズを行っている。

ここではそのカスタマイズしている部分についてだけ説明します。

ページビュー数の取得

SANGO では投稿記事がページ表示される際にページビュー数がカウントされるように作られています。

このページビュー数はキーを ‘post_views_count’ としたメタデータとして各投稿記事ごとにデータベースに保存されています。

ですので、このページで紹介したプログラムでは、ページビュー数を ‘post_views_count’ キーを用いて取得するようにしています。

例えば下記では ‘post_views_count’ キーの値が大きい順(つまりページビュー数が多い順)に整列させ、上位から設定された表示数分の投稿記事を取得するためのサブクエリを発行しています。

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

また下記では ‘post_views_count’ キーを用いてページビュー数を取得しています。

/* ページビュー数取得 */
$num_views = get_post_meta( $post_id, 'post_views_count', true );

スタイル設定

また今回紹介したプログラムでは、style.css の設定は全く必要ありません。

これは「SANGO に既に用意されているスタイル設定が適用される」ように、出力する HTML のクラスを設定しているためです。

例えば下記は色々とクラス設定を行っていますが、もともと SANGO にこれらのクラスのスタイル設定が存在しますので、新たに style.cs にスタイル設定を追記する必要はないです。

$output = $output . '<span class="dfont views"> <span class="wpp-views">' . $num_views . ' views</span> | <span class="wpp-comments">' . $num_comments . ' comments</span></span>'

また、もともと SANGO に用意されているスタイル設定ですので、当然 SANGO のテーマにも合います。

スポンサーリンク

まとめ

このページでは SANGO 向けにカスタマイズした「同じカテゴリの人気記事一覧」ウィジェットの作成方法を紹介しました。

今回初めて SANGO 向けのウィジェットを作成してみましたが、もともとあるページビューカウント機能とスタイル設定を利用しての作成でしたので割とお手軽に出来たという感想です。

今後も SANGO 向けのカスタマイズが思いついた際にはまたページアップしようと思います!こんなカスタマイズして欲しい!という意見もありましたら Twitter やこのページにコメントしていただけると幸いです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です