WordPress で関連記事を表示するウィジェットを、プラグインを使わず自作する
WordPressを本格的に勉強しはじめてからもうすぐ半年。このブログでようやくガチガチのWordPressエントリを書ける日がやってきました。今日の記事の対象は、WordPressのソースをいじりはじめた初心者〜中級者の方々と思われます。まだ中級がどんなものか分かってませんが( ´ ▽ ` )ﾉ
WordPressで作られたサイトでよく見る「関連記事」エリア。プラグインでやれば一発ですが、クライアントの要望に細やかに対応するため、それから自分自身がコードを勉強するために、いろいろごにょごにょとやってみました。
検索でたどり着いてくださった方は、はじめましてですね。名古屋でWordPressを中心としたWEB制作を行っている gutchino と申します。ぐっちーの。グッチーノ。イタリア人きどりですみません。新潟出身の父と愛知出身の母を持つ、純粋な日本人です。最近言ってみたいのはイギリスとスペインとニッポンの田舎です。
さて、今日ご紹介するのは、WordPress で関連記事を表示するウィジェットを、プラグインを使わず自作する（＝ファイルにコード書く）という、需要があるのかないのかよく分からないものです。万が一「キターーーーー(・∀・)ーーーーー！」って方がいたらコードもってってください。ダブルクリックで全選択できます。それでは早速。
おしながき
1. 関連する記事一覧を表示する
2. ウィジェットを作る
3. あとはいつも通りウィジェット設定
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 の中身を他のテンプレートファイルにごそっと移す方法。
いつもそうですが、今回もコードを作る上でたくさんの先人たちに助けられました。この場を借りてお礼申し上げます。
また、ここでご紹介しているコードはコピペしたり手を加えたりしてどんどん使ってください。その際にバグを発見された方はぜひお知らせください。