WordPress Popular Postsをカスタマイズ

WPPのデザインとレイアウトをカスタマイズして自作テンプレートを作る方法

WordPress Popular Posts(WPP)では、デフォルトの表示方法の他にも、自作でレイアウトやデザインをカスタマイズする方法があります。オリジナルテーマ作成の際にはぜひ活用したい機能な…

Sponsored Links

WordPress Popular Posts(WPP)では、デフォルトの表示方法の他にも、自作でレイアウトやデザインをカスタマイズする方法があります。オリジナルテーマ作成の際にはぜひ活用したい機能なので紹介していきます。

WPPのデザインとレイアウトをフルカスタマイズする方法

WordPress Popular Postsをカスタマイズ

基本的にはPHP関数の wpp_get_mostpopular($arg); で一覧を表示するのですが、この引数で表示方法を変更することが出来ます。

引数を指定しないで関数を使った場合

引数を指定しない場合のデフォルトでは、このようなHTMLが表示されます。(※ 見やすいように改行など加えています。)

<ul class="wpp-list">
  <li>
    <a href="http://example.com/hoge/" title="ダミータイトル1" class="wpp-post-title" target="_self">ダミータイトル1</a>
    <span class="wpp-views">1 view</span>
  </li>
  <li>
    <a href="http://example.com/fuga/" title="ブログタイトルテスト" class="wpp-post-title" target="_self">ブログタイトルテスト</a>
    <span class="wpp-views">1 view</span>
  </li>
</ul>

デフォルトの引数がどうなっているかを見て見ましょう。

$arg = array(

  // 記事表示件数
  'limit' => 10,

  // ビュー数の計測範囲
  'range' => 'daily',

  // 期間外に投稿した記事表示の有無
  'freshness' => 0, // false

  // ソート基準
  'order_by' => 'views',

  // 表示する投稿タイプ
  'post_type' => 'post,page',

  // タイトルの長さ
  'title_length' => 25,

  // ビュー数の表示
  'stats_views' => 1, // true

  // 繰り返し部分の始めと終わり
  'wpp_start' => '<ul class="wpp-list">',
  'wpp_end' => '</ul>',

  // リスト表示する繰り返し部分のHTML
  'post_html' => '<li>{thumb} {title} {stats}</li>'
);

wpp_get_mostpopular($arg);

これらの引数を変更することで、人気記事の一覧を変更することができます。

WordPress Popular Posts でいい感じに見えるカスタマイズ設定

たくさんの設定があっても全ては使わないし、いい感じの見栄えになればOKという方も多いと思いますので、僕がよく使う設定をご紹介します。

<?php
  $arg = array(

    // 一覧のタイトルを設定
    'header' => '人気の記事',
    'header_start' => '<h2>',
    'header_end' => '</h2>',

    // 通算での人気記事を表示
    'range' => 'all',

    // 会社概要などを除く
    'pdi' => '8, 11, 17',

    // タイトルの長さは40文字まで
    'title_length' => 40,

    // サムネイルのサイズを指定(CSSで別途調整)
    'thumbnail_width' =>  300,
    'thumbnail_height' => 200,

    // ビュー数を表示しない
    'stats_views' => 0,

    // 一覧表示を番号付きリストに変更
    'wpp_start' => '<ol>',
    'wpp_end' => '</ol>',

    // 表示するHTML形式を変更
    // 実際には1行にしていますが見やすくするために。
    'post_html' => '
      <li>
        <article>
          <a href="{url}">
            <figure>{thumb_img}</figure>
            <h1>{text_title}</h1>
          </a>
        </article>
      </li>
    ',
  );
?>

こうすると、HTMLはこのように出力されます。(※ 一部改行等改変しています。)


どうでしょう?こんな感じになると、あとはCSSで調整しやすいのではないでしょうか?

プラスアルファのちょっとカスタマイズしてみる

サイトによってはビュー数や、日付を追加したい場合があるかもしれませんが、そんな時は上記に追加してこんな感じです。

<?php
  $arg = array(

    // ~ ここまでは同じ ~

    // 投稿者名を表示したい場合
    'stats_author' => 1, // true

    // 投稿日時を表示したい場合
    'stats_date' => 1, // true
    'stats_date_format' => 'Y.m.d',

    // カテゴリー名を表示したい場合
    'stats_category' => 1, // true

    // 表示するHTML形式を変更
    // 投稿者名やカテゴリーにリンクがつくので{thumb},{title}のリンク付きに変更
    'post_html' => '
      <li>
        <article>
          <figure>{thumb}</figure>
          <h1>{title}</h1>
          
        </article>
      </li>
    '
  );
?>

その結果のHTMLが以下のようになります。(※ 一部改行等改変しています。)

いかがでしょう。これならかなり使いやすいし汎用性も高くなったのではないでしょうか。

WordPress Popular Postsのカスタマイズまとめ

いかがでしたでしょうか。上記の設定で大体のレイアウトは可能だと思います。あとはサイトに合わせてクラスを追加して、CSSでレイアウトを調整すれば、サイトにあった形でカスタマイズができると思います。

三上 龍志
Cain 代表。1985年仙台生まれ、東京育ち。趣味は旅。 ウェブに携わって12年。ウェブデザイン・コーディング・システム開発・ディレクター・営業・運用コンサルティングなど、ウェブ制作に関する一通りを行なってきました。ウェブを使ったブランディングと集客・顧客の囲い込みなどをご提案しています。(制作もします。)