【Widget】投稿数をリンクタグの中にいれたり最新の投稿にアイキャッチを追加

ものすごく理解に苦しむタイトルですが、訪れて頂いてありがとうございます。

ウィジェットのCSSをカスタマイズしている際に、既存のマークアップだとちょっとCSSでデザインしずらいなと思うことがあります。

代表的なところとして、カテゴリーウィジェットで投稿数を表示させた時なんかは、投稿数がリンクタグの外にでているので、横幅いっぱいにリンクタグを広げることができません。

そんな時は既存ウィジェットのHTMLを修正してしまいましょう。

カテゴリーウィジェットの「投稿数」をリンクタグ内にいれる

カテゴリーウィジェットで（12）みたいな投稿数を表示させたいことがあると思います。普通に表示させるだけなら、カテゴリーウィジェットの設定から「投稿数を表示する」にチェックを入れるだけでいいんですが、カスタマイズでリンクを横幅いっぱいにしている場合に不具合が出てきます。

デフォルトではリンクタグの外に投稿数のテキストが表示される上に、spanなどで囲まれてもいないので編集のしようがありません。

そんな時は下記をfunctions.phpなどに書き込めば、リンクタグの中に投稿数を表示できるようになります。

// カテゴリの投稿数をaタグの中に
add_filter( 'wp_list_categories', 'my_list_categories', 10, 2 );
function my_list_categories( $output, $args ) {
  $output = preg_replace('/<\/a>\s*\((\d+)\)/',' ($1)</a>',$output);
  return $output;
}

マークアップ的にはどうなの？という意見もあるかもしれませんが、UI重視で考えた時自分はこの方がいいと思っています。
これでスタイリングがしやすくなりますね！

ちなみにアーカイブウィジェットで「2015年8月」みたいなやつの投稿数もリンクタグ内に入れたい場合はこちらのコードをつかってください。

// アーカイブの投稿数をaタグの中に
add_filter( 'get_archives_link', 'my_archives_link' );
function my_archives_link( $output ) {
  $output = preg_replace('/<\/a>\s*( )\((\d+)\)/',' ($2)</a>',$output);
  return $output;
}

最新記事の「日付」をリンクタグ内にいれる

こちらもカテゴリーの投稿数をリンクタグ内に入れると同じ考え方で、日付もリンクタグ内にいれてしまうことができます。

と、ここでリンクタグ内に日付を入れるために、「ウィジェットの最新の投稿をテーマ側で書き換えるサンプルコード」を紹介しようと思ったんですが、アイキャッチ画像も表示させたいって方多いですよね？

というわけで…

ついでにアイキャッチ画像も表示する

どうせなら一気にやってしまいましょう。アイキャッチ画像を表示させつつ、画像/日付

やり方は簡単で、先ほどの出力部分にアイキャッチを呼び出す関数を書くだけです。もちろんアイキャッチ画像が無かった場合のNOIMAGEも条件分岐で設定することができます。下記がサンプルコード。

// 新着記事のフォーマットを変更
Class My_Recent_Posts_Widget extends WP_Widget_Recent_Posts {
 
	function widget($args, $instance) {
	
		extract( $args );
		
		$title = apply_filters('widget_title', empty($instance['title']) ? __('Recent Posts') : $instance['title'], $instance, $this->id_base);
				
		if( empty( $instance['number'] ) || ! $number = absint( $instance['number'] ) )
			$number = 10;
					
		$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 ) ) );
		if( $r->have_posts() ) :
			
			echo $before_widget;
			if( $title ) echo $before_title . $title . $after_title; ?>
			<ul>
				<?php while( $r->have_posts() ) : $r->the_post(); ?>				
				<li class="cf">
					<a class="cf" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
						<?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
						<figure class="eyecatch">
							<?php the_post_thumbnail('home-thum'); ?>
						</figure>
						<?php else: ?>
						<figure class="eyecatch noimg">
							<img src="<?php echo get_template_directory_uri(); ?>/library/images/noimg.png">
						</figure>
						<?php endif; ?>
						<?php the_title(); ?>
						<span class="date"><?php the_time('Y.m.d'); ?></span>
					</a>
				</li>
				<?php endwhile; ?>
			</ul>
			 
			<?php
			echo $after_widget;
		
		wp_reset_postdata();
		
		endif;
	}
}
function my_recent_widget_registration() {
  unregister_widget('WP_Widget_Recent_Posts');
  register_widget('My_Recent_Posts_Widget');
}
add_action('widgets_init', 'my_recent_widget_registration');

これで最新記事のウィジェットでアイキャッチ画像を使うことができます。ただし、この方法だと最新記事ウィジェットを書き換えてしまうことになるので、デフォルトのようなタイトルだけの表示ができなくなってしまいますので、その点ご注意ください。