wordpressテーマカスタマイズ

プラグインなしで画像付きの人気記事をWordPressのウィジェットに追加する

更新日：2018年10月7日 | 公開日：2017年8月31日

Plusers

WordPrssにはデフォルトのウィジェットがいくつか用意されていますが、『人気記事』を出力するためのウィジェットは用意されていません。ユーザーにより多くの記事を読んでもらうためにも、『人気記事』をウィジェットに追加して簡単に出力できるようにしておきましょう。

人気記事の出力方法さえわかれば、ウィジェットで出力するだけでなく、WordPressの各テンプレートでも出力できるようになりますよ！

今回は、プラグインを使わずにウィジェットに『人気記事』を出力する方法についてご紹介します。

※人気記事を出力するためには、カスタムフィールドに記事の閲覧数をカウントするための値を保存しておく必要があります。投稿数をカスタムフィールドに追加するプラグインを有効化するか、link:『記事のアクセス数をプラグインなしで計測しWordPressの管理画面に表示する』を参照し、カスタムフィールドに記事の閲覧数をカウントするための設定を予め行なってください

CONTENTS

ループを使って人気記事一覧を出力する要素を作成する
1. 人気記事を出力するために必要なサブループの配列
2. ループ内の要素を追加する
ウィジェットを追加するための関数を作成する
CSSで人気記事一覧のデザインを整える

ループを使って人気記事一覧を出力する要素を作成する

ウィジェットを作成する前準備として、まずは、人気記事を出力するための要素を作成します。今から作成する要素は、後ほどfunctions.phpに入れ込むので一時的なファイルを作成し記述してください。

追加するソースコードは、下記の通りです。

一時ファイルに記述

<aside class="sidekiji">
  <ul>
    <?php get_the_ID();//記事のPV情報を取得する
      $args = array('meta_key'=> 'post_views_count',//投稿数をカウントするカスタムフィールド名
                    'orderby' => 'meta_value_num',
                    'order' => 'DESC',
                    'posts_per_page' => $number
      );
      $my_query = new WP_Query( $args );?>
      <?php while ( $my_query->have_posts() ) : $my_query->the_post(); $loopcounter++; ?>
      <li>
        <a href="<?php the_permalink(); ?>">
          <!--順位-->
          <span class="rank-count r-count<?php echo $loopcounter; ?>">
           <?php echo $loopcounter; ?>
          </span>
          <!--サムネイル画像の追加-->
          <?php if( has_post_thumbnail() ): ?>
            <?php the_post_thumbnail('thumbnail'); ?>
          <?php endif; ?>
          <div class="sidekiji-text">
            <?php the_title(); ?>
            <br>
            <!--カテゴリ-->
              <span class="cat-data">
               <?php if( has_category() ): ?>
                <?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
            <?php endif; ?></span>
          </div>
        </a>
      </li>
      <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
  </ul>
</aside>

上記のソースコードで、人気記事の一覧を出力することができます。人気記事は、サブループの『WP_Query』で出力します。また、ループの条件を指定する前に『get_the_ID();』で記事の情報を取得しましょう。一つ一つの要素については下記の通りです。

ループ内の要素を追加する

ループの記述が終わったら、『ランキングの順番』『サムネイル画像』『タイトル』『所属カテゴリ』を出力するコードをループ内に記述しましょう。

サムネイル画像

サムネイル画像は、『<?php the_post_thumbnail('thumbnail'); ?>』の部分で出力していますが、サムネイルを設定していない場合は出力されません。サムネイルの設定がない場合を考えて、条件分岐を追加しておいても良いでしょう。

<?php if( has_post_thumbnail() ): ?>
  <?php the_post_thumbnail('thumbnail'); ?>
<?php endif; ?>

<!--上記のソースを下記のソースに置き換える-->

<?php if( has_post_thumbnail() ): ?>
  <?php the_post_thumbnail('medium'); ?>
<?php else: ?>
  <img src="サムネイル画像がない時に表示したい画像へのパス(URL)" alt="no-img"/>
<?php endif; ?>

タイトル

<?php the_title(); ?>

所属カテゴリ

<span class="cat-data">
  <?php if( has_category() ): ?>
    <?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
  <?php endif; ?>
</span>

カテゴリは『if( has_category()』で条件分岐して、カテゴリの設定がある場合に『 $postcat=get_the_category(); echo $postcat[0]->name;』でカテゴリの名前を呼び出すようにしましょう。

人気記事の一覧を出力するための要素は以上です。好みに合わせて要素を省いたり、追加したりして調整してください。続いて、上記の要素をウィジェットにするための設定をしていきましょう。

ウィジェットを追加するための関数を作成する

人気記事を出力するための要素を作成したら、ウィジェットとして呼び出すための関数をfunctions.phpに定義していきます。複数の関数を使用するため、記述ミスに注意しましょう。
functions.phpを編集する際は、必ずバックアップをとって慎重に編集してください。

functions.phpに記述

/* 人気記事一覧ウィジェット */
class Popular_Posts extends WP_Widget {
 /*コンストラクタ*/
  function __construct() {
    parent::__construct(
      'popular_posts',
      '人気記事',
      array( 'description' => 'PV数の多い順で記事を表示' )
    );
   }
  /*ウィジェット追加画面でのカスタマイズ欄の追加*/
  function form($instance) {
    if(empty($instance['title'])) {
      $instance['title'] = '';
    }
    if(empty($instance['number'])) {
      $instance['number'] = 5;
    }
?>
  <p>
    <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('タイトル:'); ?></label>
    <input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>"
    name="<?php echo $this->get_field_name('title'); ?>"
    value="<?php echo esc_attr( $instance['title'] ); ?>">
  </p>
  <p>
    <label for="<?php echo $this->get_field_id('number'); ?>"><?php _e('記事表示件数:'); ?></label>
    <input type="text" id="<?php echo $this->get_field_id('limit'); ?>"
    name="<?php echo $this->get_field_name('number'); ?>"
    value="<?php echo esc_attr( $instance['number'] ); ?>" size="3">
  </p>
<?php
  }
  /*カスタマイズ欄の入力内容が変更された場合の処理*/
  function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title'] = strip_tags($new_instance['title']);
    $instance['number'] = is_numeric($new_instance['number']) ? $new_instance['number'] : 5;
      return $instance;
  }
  /*ウィジェットのに出力される要素の設定*/
  function widget($args, $instance) {
    extract($args);
    echo $before_widget;
      if(!empty($instance['title'])) {
        $title = apply_filters('widget_title', $instance['title'] );
      }
      if (!empty($title)) {
        echo $before_title . $title . $after_title;
      } else {
        echo '<h4>人気記事</h4>';
      }
    $number = !empty($instance['number']) ? $instance['number'] : get_option('number');
?>

  <!--ここにウィジェットとして呼び出したい要素を記述-->

<?php echo $after_widget;
  }
}
register_widget('Popular_Posts');

上記の記述をfunctions.phpに追加することで、ウィジェット項目に『人気記事』が追加されます。

コード内の『』の部分に、先程作成した人気記事に出力するための要素をコピペして挿入してください。

全体の構成

class ウィジェットクラス名 extends WP_Widget {

}
/*ウィジェットを実行するための処理*/
register_widget('ウィジェットクラス名');

ウィジェットをWordPressに追加するための関数です。上記の『class ウィジェットクラス名 extends WP_Widget』の中にウィジェットを構成する全ての内容を記述します。

function __construct()

function __construct() {
  parent::__construct(
    'ウィジェットのID',
    'ウィジェットの名前',
    array( 'description' => 'ウィジェットの説明' )
  );
}

自作ウィジェットの名前やidなどを定義します。IDは表示に直接影響を与えるものでなく内部的な振り分けを指定するものです。

ウィジェットの名前と説明はウィジェット管理画面に反映されます。

function form

ウィジェット管理画面上のカスタムフォームを作成します。今回作成する人気記事ウィジェットでは、タイトル(title)と記事の表示件数(number)を任意で指定できるようにしています。

function update

管理画面上の入力フォームに入力した値を保存する処理を行います。また、[number]の欄に値が入力されていない場合の処理もここで指定しています。

function widget

ウィジェットに表示させたい要素を設定します。『$before_widget』に記述した値が、ウィジェットのタイトルとして表示されます。

管理画面でタイトルが入力されてない場合のデフォルトタイトルも『else {～』で設定しておきましょう。今回は、『人気記事』がタイトルで出力されるようにしています。

functions.phpの関数がきちんと反映されていれば、管理画面上のウィジェットの項目に『人気記事』というウィジェットが新しく追加されます。設定が完了したら、ページに表示されるようにサイドバーに追加してください。

追加すると『人気記事』がサイドバーに出力されますので、要素が表示されているかを確認しましょう。

CSSで人気記事一覧のデザインを整える

人気記事の一覧が、WordPressウィジェットとして出力されているのを確認したら、CSSでデザインを整えていきましょう。下記にデモCSSを載せておきますので、自分好みにカスタムして使用してください。

style.cssに記述

.sidekiji ul {
  padding: 0;
  list-style: none;
}

.sidekiji li {
  position: relative;
  margin-top: 10px;
  padding: 0 5px 10px;
  border-bottom: dotted 1px #ddd;
}

.sidekiji a {
  display: inline-block;
  text-decoration: none;
  color: #333;
}

.sidekiji a:hover {
  background-color: #eee;
}

.sidekiji a:after {
  display: block;
  clear: both;
  content: '';
}

.rank-count {
  position: absolute;
  top: 0;
  left: 5px;
  padding: 1px 10px;
  color: #fff;
  background: rgba(66, 66, 66, .85);
}

.r-count1 {
  background: rgba(189, 161, 82, .9);
}

.r-count2 {
  background: rgba(152, 153, 173, .9);
}

.r-count3 {
  background: rgba(156, 85, 34, .9);
}

.sidekiji img {
  float: left;
  width: 70px;
  height: 70px;
}

.sidekiji-text {
  font-size: .9em;
  margin-left: 80px;
}

上記のCSSをそのまま記述すると上記の画像のように表示されます。以上で、『人気記事』のウィジェットの作成は完了です。タイトルや記事数を自由に指定して、人気記事を出力しましょう。

プラグインなしで画像付きの人気記事をWordPressのウィジェットに追加する

ループを使って人気記事一覧を出力する要素を作成する

人気記事を出力するために必要なサブループの配列

meta_key

orderby

order

posts_per_page

ループ内の要素を追加する

ランキングの順位

サムネイル画像

タイトル

所属カテゴリ

ウィジェットを追加するための関数を作成する

全体の構成

function form

function update

function widget

CSSで人気記事一覧のデザインを整える

初心者必見！自作のWordPressオリジナルテーマを作成する方法を徹底解説

1.WordPressテーマの骨組みとなるテンプレートファイルを作成する

5.WordPressのループを使い記事一覧を表示するindex.phpを作成する

3.WordPressのヘッダーにレスポンシブ対応メニューとタイトルを組込む

2.WordPressテーマの骨組みをレスポンシブレイアウトに構築する

6.WordPressブログの要!!記事を表示するsingle.phpとpage.phpを作成する

WordPress標準の検索フォームを自分の好きなデザインに変更する

WordPressサブループソースコード自動作成ツール

カスタム投稿とカスタムタクソノミーを自作しプラグインなしでWordPressに追加する

WordPressで画像のサイズをCSSで最適化してレスポンシブデザインに対応する

WordPrssに全記事をまとめたhtmlサイトマップをプラグインなしで作成する

WordPressの記事に更新日・公開日を追加し検索エンジンやユーザーに伝える