WordPress で関連記事を表示するウィジェットを、プラグインを使わず自作する


WordPress Widget

WordPressを本格的に勉強しはじめてからもうすぐ半年。このブログでようやくガチガチのWordPressエントリを書ける日がやってきました。今日の記事の対象は、WordPressのソースをいじりはじめた初心者〜中級者の方々と思われます。まだ中級がどんなものか分かってませんが( ´ ▽ ` )ノ

WordPressで作られたサイトでよく見る「関連記事」エリア。プラグインでやれば一発ですが、クライアントの要望に細やかに対応するため、それから自分自身がコードを勉強するために、いろいろごにょごにょとやってみました。

検索でたどり着いてくださった方は、はじめましてですね。名古屋でWordPressを中心としたWEB制作を行っている gutchino と申します。ぐっちーの。グッチーノ。イタリア人きどりですみません。新潟出身の父と愛知出身の母を持つ、純粋な日本人です。最近言ってみたいのはイギリスとスペインとニッポンの田舎です。

さて、今日ご紹介するのは、WordPress で関連記事を表示するウィジェットを、プラグインを使わず自作する(=ファイルにコード書く)という、需要があるのかないのかよく分からないものです。万が一「キターーーーー(・∀・)ーーーーー!」って方がいたらコードもってってください。ダブルクリックで全選択できます。それでは早速。

おしながき

1. 関連する記事一覧を表示する
2. ウィジェットを作る
3. あとはいつも通りウィジェット設定

WordPress Widget

1. 関連する記事を表示させる

sidebar.php などに直書き、またはそれをテンプレート化して使います。関連する=同じタグが付いていると解釈し、今回はアイキャッチ無しで作りました。もちろん有りにもできますが、その方法はまた別エントリで。

コードはこちら。
※おなじみWebクリエイターボックスさんの記事を参考にさせていただきました。ありがとうございました!

<ul>
<?php 
global $wp_query;
$post = $wp_query->get_queried_object();
$tags = wp_get_post_tags($post->ID);
$tagIDs = array();
if ($tags) {
	$tagcount = count($tags);
		for ($i = 0; $i < $tagcount; $i++) {
			$tagIDs[$i] = $tags[$i]->term_id;
		}
	$args=array(
		'tag__in' => $tagIDs,
		'post__not_in' => array($post->ID),
		'showposts'=>4,
		'caller_get_posts'=>1
	);
	$my_query = new WP_Query($args);
	if( $my_query->have_posts() ) {
		while ($my_query->have_posts()) : $my_query->the_post(); ?>
			<li class='relatedPost'>
				<a href='<?php the_permalink();?>' title='<?php the_title_attribute(); ?>'><?php the_title(); ?></a>
			</li>
		<?php endwhile; wp_reset_query(); ?>
	<?php } else { ?>
		関連する記事は見当たりません。
	<?php } ;
} ?>
</ul>

2. ウィジェットを作る

上記コードを参考にしてウィジェット用に書き直した次のコードを functions.php に貼り付けます。

class WP_Widget_relation extends WP_Widget {

	function WP_Widget_relation() {
		$widget_ops = array(
			'classname' => 'WP_Widget_relation',
			'description' => 'アイキャッチ付きの関連記事一覧',
		);
		$this->WP_Widget('relation', '関連記事一覧作った!', $widget_ops);
	}

	function widget($args, $instance) {
		extract( $args );
		$title = apply_filters('widget_title', $instance['title']);
		?>
				<?php 
				echo $before_widget;
				if ( $title ) echo $before_title . $title . $after_title;
					<ul>
					<?php 
					global $wp_query;
					$post = $wp_query->get_queried_object();
					$original_post = $post;
					$tags = wp_get_post_tags($post->ID);
					$tagIDs = array();
					if ($tags) {
						$tagcount = count($tags);
							for ($i = 0; $i < $tagcount; $i++) {
								$tagIDs[$i] = $tags[$i]->term_id;
							}
						$args=array(
						'tag__in' => $tagIDs,
						'post__not_in' => array($post->ID),
						'showposts'=>4,
						'caller_get_posts'=>1
						);
						$my_query = new WP_Query($args);
						if( $my_query->have_posts() ) {
							while ($my_query->have_posts()) : $my_query->the_post(); ?>
								<li>
									<a href='<?php the_permalink();?>' title='<?php the_title_attribute(); ?>'><?php the_title(); ?></a>
								</li>
							<?php endwhile; wp_reset_query(); ?>
						<php } else { ?>
							関連する記事は見当たりません。
						<?php } ;
					} ?>
					</ul>
				echo $after_widget; ?>
		<?php
	}

	function update($new_instance, $old_instance) {
		return $new_instance;
	}

	function form($instance) {
		$title = esc_attr($instance['title']);
		?>
			<p><label for='<?php echo $this->get_field_id('title'); ?>'><?php _e('Title:'); ?> <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; ?>' /></label></p>
		<?php
	}
} // class WP_Widget_relation

// register WP_Widget_relation widget
add_action('widgets_init', create_function('', 'return register_widget('WP_Widget_relation');'));

3. あとはいつも通りウィジェット設定

1で書いたコードの代わりに、

<?php dynamic_sidebar( 'secondary-widget-area' ); ?>

と書いて、管理画面 > 外観 > ウィジェット から、先ほど作成したウィジェットを選べば無事表示され…ましたよね!?

ウィジェットエリアを増やすなど、需要の高いハウツーは他の方がたくさん良記事を書いてくださっているので、Googleで探してみて下さい。

さいごに

長くなるので今回は書きませんでしたが、次回以降に書こうと考えているのは次の通りです。
・ウィジェットの作り方の解説。
・ウィジェットで表示させる中身の作り方。
・プラグインをしれっと functions.php に引越させる方法。
・長くなった functions.php の中身を他のテンプレートファイルにごそっと移す方法。

いつもそうですが、今回もコードを作る上でたくさんの先人たちに助けられました。この場を借りてお礼申し上げます。

また、ここでご紹介しているコードはコピペしたり手を加えたりしてどんどん使ってください。その際にバグを発見された方はぜひお知らせください。