【WordPress】アイキャッチ付き最近の投稿ウィジェットの作り方【テーマ開発】

2021/03/04 2023/04/13

今回は、WordPressでアイキャッチ付き最近の投稿ウィジェットの作り方を解説していきます。

【WordPress】アイキャッチ付きの最近の投稿ウィジェットを設置する方法

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

2.「最近の投稿【アイキャッチ画像付き】」を選択して、設置したいウィジェットエリアに設置する

これで完了です👍 pic.twitter.com/vo6Wmadmq1

— マルユメ@WordPressテーマ開発してブログ運営 (@maruyumeblog) January 31, 2023

最近の投稿ウィジェットにアイキャッチ画像をつけたい

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

※下記のようなウィジェットをWordPress管理画面から作成できます。

また、WordPressテーマ「SIMPLE」では、アイキャッチ付き最近の投稿ウィジェットを実装済みなので、すぐに使いたい方はダウンロードしてみてください。

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

Contents

【WordPress】アイキャッチ付き最近の投稿ウィジェットの作り方【テーマ開発】

【WordPress】アイキャッチ付き最近の投稿ウィジェットの作り方【テーマ開発】

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

ウィジェットを作る
作ったウィジェットを登録する
作ったphpファイルをfunctions.phpに読み込ませる
WordPress管理画面でウィジェットを設置する
ウィジェットの設定をする

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

ウィジェットを作る

まずは、ウィジェットを作成します。

空のphpファイル「custom-widget.php」を作成して、コードを書いていきます。

アイキャッチ付き最近の投稿ウィジェットの全コードは、下記の通り。

<?php

//カスタムウィジェットの作成~アイキャッチ画像付きの最近の投稿ウィジェット~
class Eyecatch_Recent_Posts_Widget extends WP_Widget {
	//WordPress でウィジェットを登録
	function __construct() {
		parent::__construct(
			'Eyecatch_Recent_Posts_widget', // Base ID
			__( '最近の投稿【アイキャッチ画像付き】ウィジェット', 'text_domain' ), // Name
			array( 'description' => __( 'アイキャッチ画像付きの最近の投稿ウィジェットを作成したい場合は、このウィジェットを使用してください。', 'text_domain' ), ) // Args
		);
	}
	//ウィジェットのフロントエンド表示
	public function widget( $args, $instance ) {
		if ( ! isset( $args['widget_id'] ) ) {
			$args['widget_id'] = $this->id;
		}
		$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Recent Posts' );
		$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
		$number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 5;
		if ( ! $number ) {
			$number = 5;
		}
		$show_date = isset( $instance['show_date'] ) ? $instance['show_date'] : false;
		$r = new WP_Query(
			apply_filters(
				'widget_posts_args',
				array(
					'posts_per_page'      => $number,
					'no_found_rows'       => true,
					'post_status'         => 'publish',
					'ignore_sticky_posts' => true,
				),
				$instance
			)
		);
		if ( ! $r->have_posts() ) {
			return;
		}
		?>
		<?php echo $args['before_widget']; ?>
		<?php
		if ( $title ) {
			echo $args['before_title'] . $title . $args['after_title'];
		}
		?>
		<ul>
			<?php while ( $r->have_posts() ) : $r->the_post(); ?>
				<?php
				$post_title   = get_the_title( $recent_post->ID );
				$title        = ( ! empty( $post_title ) ) ? $post_title : __( '(no title)' );
				$aria_current = '';
				if ( get_queried_object_id() === $recent_post->ID ) {
					$aria_current = ' aria-current="page"';
				}
				?>
				<li>
					<div itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject" class="thumbnail">
						<?php if (has_post_thumbnail()) : ?>
							<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" itemprop="url" itemscope="" class="thumbnail-img">
								<?php the_post_thumbnail('custom_thumbnail'); ?>
							</a>
						<?php else: ?>
							<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" itemprop="url" itemscope="" class="thumbnail-img">
								<img width="640" height="360" src="<?php echo get_template_directory_uri(); ?>/images/no-image.jpg" alt="アイキャッチ画像はありません">
							</a>
						<?php endif; ?>
					</div>
					<a href="<?php the_permalink( $recent_post->ID ); ?>"<?php echo $aria_current; ?>><?php echo $title; ?></a>
					<?php if ( $show_date ) : ?>
						<p class="date"><?php echo get_the_date( '', $recent_post->ID ); ?></p>
					<?php else: ?>
						<p class="clear-both"></p>
					<?php endif; ?>
				</li>
			<?php endwhile; ?>
		</ul>
		<?php
		echo $args['after_widget'];
	}
	//ウィジェットフォームの値を保存用にサニタイズ
	public function update( $new_instance, $old_instance ) {
		$instance              = $old_instance;
		$instance['title']     = sanitize_text_field( $new_instance['title'] );
		$instance['number']    = (int) $new_instance['number'];
		$instance['show_date'] = isset( $new_instance['show_date'] ) ? (bool) $new_instance['show_date'] : false;
		return $instance;
	}
	//バックエンドのウィジェットフォーム
	public function form( $instance ) {
		$title     = isset( $instance['title'] ) ? esc_attr( $instance['title'] ) : '';
		$number    = isset( $instance['number'] ) ? absint( $instance['number'] ) : 5;
		$show_date = isset( $instance['show_date'] ) ? (bool) $instance['show_date'] : false;
		?>
		<p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></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 $title; ?>" /></p>
		<p><label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( 'Number of posts to show:' ); ?></label>
		<input class="tiny-text" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="number" step="1" min="1" value="<?php echo $number; ?>" size="3" /></p>
		<p><input class="checkbox" type="checkbox"<?php checked( $show_date ); ?> id="<?php echo $this->get_field_id( 'show_date' ); ?>" name="<?php echo $this->get_field_name( 'show_date' ); ?>" />
		<label for="<?php echo $this->get_field_id( 'show_date' ); ?>"><?php _e( 'Display post date?' ); ?></label></p>
		<?php
	}
}

1.サイトに表示されるウィジェットの設定

↓の関数で、サイトに表示されるウィジェットの設定をしています。

<?php
//ウィジェットのフロントエンド表示
public function widget( $args, $instance ) {
・・・
}

2.サニタイズ(無害化)処理

↓の関数では、サニタイズ(無害化)の処理をしています。

<?php

//ウィジェットフォームの値を保存用にサニタイズ
public function update( $new_instance, $old_instance ) {
・・・
	$instance['title']     = sanitize_text_field( $new_instance['title'] );
・・・
}

sanitize_text_field() → WordPressの関数で、文字列を無害化してくれます。
リファレンス：関数リファレンス/sanitize text field

サニタイズについては、下記の記事でも解説しています。

3.WordPress管理画面のウィジェット設定

↓の関数は、WordPress管理画面でのウィジェット設定のコードです。

<?php

//バックエンドのウィジェットフォーム
public function form( $instance ) {
・・・
}

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

次に、作ったウィジェットを登録します。「custom-widget.php」に、下記のコードを追加します。

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

コードを追加すると、WordPress管理画面の「外観→ウィジェット」ページに、「アイキャッチ付き最近の投稿ウィジェット」が追加されます。