プラグインなしで人気記事を表示する方法[WordPressカスタマイズ]

popular

人気記事を取得してサイドバーなどに表示するカスタマイズ方法です。

画像とタイトルを組み合わせた、以下のような人気記事リストを作成します。

ただ、今回はプラグインを使用しないので、アクセス数でなくコメント数で並び替えることによって人気記事リストを表示します。

人気記事リスト

photo by Enokson

スポンサーリンク
レクタングル(大)広告

functions.phpの編集

functions.phpを編集する前は必ずバックアップを取ってください。

アイキャッチを有効にする

functions.phpに以下の記述があるか確認してください。

add_theme_support('post-thumbnails');

大抵のテーマはあると思いますが、あればそのまま。なかったらfunctions.phpに追記してください。

これは、アイキャッチ画像を有効化する記述です。これがないと、投稿画面でアイキャッチが設定できません。

参考 関数リファレンス/add theme support

アイキャッチ設定項目が表示される

作成するサムネイルの大きさを指定する

次に、functions.php内に以下の記述があるか確認してください。

add_image_size('thumb75',75,75,true);

これは、簡単に言えば、作りたい大きさのサムネイルをWordpress側に作ってもらう関数です。

上のコードでは、75×75pxの大きさで画像の真ん中をくりぬいたサムネイルが作成されます。数値を変更すれば、自由に大きさを変更できます。

上記のコードがfunctions.php内になかったら追記してください。(既にあるサムネイルの大きさを使っても良いです。けど、今回のサンプルでは75×75pxのサムネイルを使用します。)

参考 関数リファレンス/add image size – WordPress Codex 日本語版

サムネイルの再生成

もしサムネイルを新たに作成するのであれば(add_image_sizeを追記した場合)、Regenerate Thumbnailsプラグインをインストールして、Wordpressダッシュボードの「ツール→Regenerate Thumbnailsを選択してください。

そして、「Regenerate All Thumbnails」ボタンを押してください。

Regenerate Thumbnails

WordPressのメディアに登録されている画像すべてに新しいサイズのサムネイルが作成されます。画像が多くある場合は、数十分~数時間かかります。

popular-entries.phpファイルの作成と編集

single.phpに関連記事を表示するPHPコードを挿入しても良いのですが、コード量が多くsingle.phpの可読性が下がるため、今回は別にテンプレートファイルを作成します。

カスタマイズするテーマ内にpopular-entries.phpというファイルを作成してください。

そのファイルに以下のように記入します。

<?php //コメント数の多い順番 ?>
<?php query_posts( '&posts_per_page=5&orderby=comment_count&order=DESC&ignore_sticky_posts=1'  ); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="popular-entry">
  
  <div class="popular-entry-thumb">
  <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
    <a href="<?php the_permalink(); ?>" class="popular-entry-title"><?php the_post_thumbnail( 'thumb75' ); ?></a>
  <?php else: // サムネイルを持っていないときの処理 ?>
    <a href="<?php the_permalink(); ?>" class="popular-entry-title"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" title="NO IMAGE" width="75" height="75" /></a>
  <?php endif; ?>
  </div><!-- /.popular-entry-thumb -->
  
  <div class="popular-entry-content">
    <a href="<?php the_permalink(); ?>" class="popular-entry-title"><?php the_title();?></a>
  </div><!-- /.popular-entry-content -->

</div><!-- /.popular-entry -->
<?php endwhile; 
else :
  echo '<p>人気記事はありません。</p>';
endif; ?>

<?php wp_reset_query(); ?>
<br style="clear:both;">

query_postsのクエリで、コメント中に並べ替えて、5個表示させています。

「&ignore_sticky_posts=1」は、先頭に固定される記事を除外しています。

sidebar.phpの編集

sidebar.phpの記事下などで、作成したテンプレートを呼び出します。

挿入したい場所に、以下のコードを記入してください。

<div id="popular-entries">
<h4>人気記事</h4>
  <?php include( TEMPLATEPATH . '/popular-entries.php' ); ?>
</div>

style.cssの編集

最後に、スタイルを整えて終わりです。

/* 人気記事 */
#popular-entries{
  line-height:150%;
  margin-bottom:20px;
}
 
#popular-entries h4{
  margin-bottom:15px;
}
 
#popular-entries .popular-entry{
  clear:both;
}
 
#popular-entries .popular-entry-thumb {
  float: left;
  margin-bottom:10px;
  padding-bottom:5px;
}
 
#popular-entries .popular-entry-content {
  margin-left:85px;
  margin-bottom:10px;
}

HTMLタグや、スタイルなどはサイトに合わせて変更してください。

まとめ

今回は、プラグインを使用しないので、コメント数を利用した人気記事リストの作成方法を紹介しました。

アクセス数で、人気記事リストを作成するには、プラグインのWP-PostViewsWordPress Popular Postsなどを利用する必要があります。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

スポンサーリンク