【WordPress】おすすめ記事をプラグインなしでサイドバーに表示する方法を解説【テーマ開発】

2020/12/22 2023/05/07

今回は、WordPressで「おすすめ記事ウィジェット」の作り方について解説していきます。

【WordPress】おすすめ記事ウィジェットを設置する方法①

1.WordPressの管理画面にログインして、「外観→ウィジェット」に移動

2.「おすすめ記事ウィジェット」をクリックして、設置したいウィジェットエリアを選択

これで設置は完了です。 pic.twitter.com/a8Hbv5CnRF

— マルユメ@WordPressテーマ開発してブログ運営 (@maruyumeblog) December 23, 2022

おすすめ記事を表示させたいけど、やり方がわからない・・・

今使っているテーマだと、機能がなくておすすめ記事を表示できない

という方は、本記事が参考になるはずです。

また、WordPressテーマ「SIMPLE」では、おすすめ記事ウィジェットを実装済みです。

すぐに使いたい方は、ダウンロードしてみてください。

WordPressテーマ「SIMPLE」-ダウンロードページ-

Contents

【WordPress】おすすめ記事ウィジェットの作り方【テーマ開発】

【WordPress】おすすめ記事ウィジェットの作り方【テーマ開発】

具体的な手順は、下記の通りです。

ウィジェットを作る
作ったウィジェットを登録する
記事編集画面におすすめ記事用の設定を追加する
custom-widget.phpをfunctions.phpに読み込ませる
ウィジェットを設置する
ウィジェットに表示したい記事を選ぶ

順番に解説していきます。

ウィジェットを作る

まずは、おすすめ記事ウィジェットを作ります。

今回は、「custom-widget.php」という名前のファイルを新たに作成して、ここにおすすめ記事ウィジェットのコードをまとめて記述していきます。

最終的にはテーマディレクトリ直下にある「functions.php」に、custom-widget.phpを読み込ませる形になるので、functions.phpに直接コードを追加しても問題ありません。

少し長いですが、おすすめ記事ウィジェットのコードは下記のとおりです。

//カスタムウィジェットの作成~おすすめ記事ウィジェット~
<?php
class Recommend_Posts_Widget extends WP_Widget {



	//①WordPress管理画面に表示するウィジェット名と説明を設定する
	function __construct() {
		parent::__construct(
			'Recommend_Posts_widget', // Base ID
			__( 'おすすめ記事ウィジェット', 'text_domain' ), // Name
			array( 'description' => __( '記事編集画面でおすすめ記事のチェックボックスをオンにした記事がアイキャッチ付きで表示されます。', 'text_domain' ), ) // Args
		);
	}



	//②ウィジェットのフロントエンド表示（サイトの表示）の設定
	public function widget( $args, $instance ) {
		$title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
		$numbers = apply_filters( 'widget_body', empty( $instance['numbers'] ) ? '' : $instance['numbers'], $instance, $this->id_base );
		echo $args['before_widget'];
		if ( ! empty( $title ) ) {
			echo $args['before_title'] . $title . $args['after_title'];
		} ?>
		<div id="new-entry-box">
			<ul>
				<?php
					$rec = Array(
						'post_type' => 'post', //投稿記事から
						'orderby' => 'rand', //ランダム表示
						'posts_per_page' => $numbers, //表示件数
						'meta_key' => 'recommend_posts_switch', //カスタムフィールド名
						'meta_value' => 'この記事をおすすめ記事ウィジェットに表示する' //カスタムフィールド値
					);
					$recommend_item = new WP_Query($rec);
				?>
				<?php if( $recommend_item -> have_posts()) : ?>
				<?php while ( $recommend_item -> have_posts()) : $recommend_item -> the_post(); ?>
					<li class="new-entry-item">
						<div class="new-entry" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
							<figure class="eyecatch">
								<?php if (has_post_thumbnail()): ?>
									<a href="<?php the_permalink() ?>" rel="bookmark">
										<?php the_post_thumbnail('custom_thumbnail'); ?>
									</a>
								<?php else: ?>
									<a href="<?php the_permalink() ?>" rel="bookmark">
										<img width="640" height="360" src="<?php echo get_template_directory_uri(); ?>/images/no-image.jpg" alt="アイキャッチ画像はありません">
									</a>
								<?php endif; ?>
							</figure>
						</div>
						<div class="new-entry-item-meta">
							<h3 class="new-entry-item-title" itemprop="headline"><?php esc_html(the_title()); ?></h3>
						</div>
						<p class="date"><?php echo get_the_date(); ?></p>
					</li>
				<?php endwhile; ?>
				<?php else: ?>
					<li>おすすめ記事はありません</li>
				<?php endif; ?>
			</ul>
		</div>
		<?php wp_reset_query(); ?>
		<?php
		echo $args['after_widget'];
	}



	//③バックエンドのウィジェットフォーム（WordPress管理画面で設定するウィジェットの中身）の設定
	public function form( $instance ) {
		$defaults = array(
			'title' => '',
			'numbers' => '5'
		);
		$instance   = wp_parse_args( (array) $instance, $defaults );
		$title  = sanitize_text_field( $instance['title'] );
		$numbers  = sanitize_text_field( $instance['numbers'] );
		?>
		<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('numbers'); ?>"><?php _e('表示する記事数'); ?></label>
			<input class="widefat" id="<?php echo $this->get_field_id('numbers'); ?>" name="<?php echo $this->get_field_name('numbers'); ?>" type="text" value="<?php echo esc_attr( $numbers ); ?>" />
		</p>
		<?php
	}



	//④ウィジェットフォームの値を保存用にサニタイズ（文字列を無害化）
	public function update( $new_instance, $old_instance ) {
		$instance = $old_instance;
		$instance['title']  = sanitize_text_field( $new_instance['title'] );
		$instance['numbers']  = sanitize_text_field( $new_instance['numbers'] );
		return $instance;
	}
}

簡単に説明すると、

WordPress管理画面に表示するウィジェット名を設定する
ウィジェットをサイト上でどのように表示させるかを記述する
WordPress管理画面で設定するウィジェットの設定項目を記述する

①

②

③

という感じです。

とりあえず、↑のコードをcustom-widget.phpに追加すれば、ウィジェットの作成は完了です。

サニタイズ(無害化)とは？

ちなみに、④ではサニタイズ（無害化）という処理を行っています。

サニタイズとは、特殊文字を一般文字に変換して、サイバー攻撃を防ぐ役割を持ちます。

特殊文字とは、例えばHTMLで言うと<>などです。これはHTMLではタグを表す文字として使われていますよね。このようにコードとして特別な意味を持つ文字を特殊文字と呼びます。

この特殊文字をお問合せフォームなどでそのまま送信してしまうと、情報を抜き出す・サイトを壊すなどの攻撃につながることがあり、セキュリティ上よろしくないわけです。

そのため、サニタイズ（無害化）という処理を行って、ユーザーが特殊文字を入力したとしても、その文字から特別な意味をなくして、ただの文字に変換しているという感じです。

今回は、おすすめ記事ウィジェットの設定項目として「ウィジェットのタイトル」と「記事数」を設定できるようにしています。

ですが、ここにはユーザーが自由に文字を入力できてしまうので、サニタイズをして無害化する処理を入れています。

作ったウィジェットを登録する

続けて、作ったウィジェットを登録するため、↓のコードも追加します。

//カスタムウィジェットの登録
function register_profile_widget() {
	register_widget('Recommend_Posts_Widget');
}
add_action( 'widgets_init', 'register_profile_widget' );

このコードを追加することで、下記のようにWordPress管理画面の「外観→ウィジェット」のページにおすすめ記事ウィジェットが表示されます。

記事編集画面におすすめ記事用の設定を追加する

任意の記事をウィジェットに表示させる方法として、下記のように記事編集画面に設定を追加して、チェックを入れた記事をウィジェットに表示する、という感じにしていきます。

custom-widget.phpに下記のコードを追加します。

//記事編集画面にオススメ記事ウィジェットに使用する設定項目を追加

function add_myrecommend() {
	add_meta_box( 'recommend_posts_switch', 'おすすめ記事', 'insert_myrecommend', 'post', 'side', 'low', array('この記事をおすすめ記事ウィジェットに表示する'));
	add_meta_box( 'recommend_posts_switch', 'おすすめ記事', 'insert_myrecommend', 'page', 'side', 'low', array('この記事をおすすめ記事ウィジェットに表示する'));
}
add_action('admin_menu', 'add_myrecommend');

function insert_myrecommend($post, $metabox){
	wp_nonce_field( plugin_basename(__FILE__), 'myplugin_noncename' );
	for($i=0; $i<count($metabox['args']); $i=$i+1){
		$check = $metabox['args'][$i];
		echo '<label><input type="checkbox" name="recommend_posts_switch" value="' . $check . '"';
		if ( get_post_meta($post->ID, 'recommend_posts_switch', true) == $check ) echo ' checked';
		echo ' />' . $check . '</label><br />';
	}
}

function save_myrecommend($post_id){
	if ( ! isset($_POST['myplugin_noncename']) )
		return $post_id;
	if ( ! wp_verify_nonce( $_POST['myplugin_noncename'], plugin_basename(__FILE__) )) 
		return $post_id;
	$mydata = isset($_POST['recommend_posts_switch']) ? $_POST['recommend_posts_switch'] : '';
	if( ! empty($mydata) )
		update_post_meta($post_id, 'recommend_posts_switch', $mydata);
	else
		delete_post_meta( $post_id, 'recommend_posts_switch' );
	return $mydata;
}
add_action('save_post', 'save_myrecommend');

コードを追加すると、投稿と固定ページの編集画面にチェックボックスが追加されます。