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

WordPress Popular Postsをカスタマイズ

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でレイアウトを調整すれば、サイトにあった形でカスタマイズができると思います。

三上 龍志|株式会社シンシエイト
この記事を書いた人
三上 龍志|株式会社シンシエイト
2005年からWeb制作に従事。システム開発ベンチャーでエンジニアとしてWeb開発、Webコンサルティング会社でマーケター・新規事業開発を経て2015年に当社を創業。顧客の成果に顧客よりも本気になることをテーマに、Webを通じて顧客の事業を加速させるために日々奮闘中。
関連する記事
YARPPでタイトルと内容が選択できない
【YARPP】関連スコア設定のタイトルと内容を「検討する」に変更する方法(上級者向け)
WPプラグイン
YARPP 上級編
YARPPのデザインテンプレートを自作に変更する方法(制作者向け)
WPプラグイン
NO IMAGE
WPプラグインJetpackでオススメの厳選10の機能と設定方法
WPプラグイン
さよならスパム!ワードプレスのAkismetプラグインの設定・アクティベート方法
WPプラグイン
YARPP
Yet Another Related Posts Plugin(YARPP)のオススメ設定と機能概要
WPプラグイン
NO IMAGE
WPプラグインのAll in One SEO Packでサイトマップ生成時のエラー解決策
WPプラグイン
WordPressプラグイン TwentyTwenty
2枚の画像を比較するWordPressプラグインTwentyTwentyの使い方
WPプラグイン
YARPP
YARPPの表示位置を任意の場所に変更する方法(上級者向け)
WPプラグイン
tinyMCE advanced
WP必須プラグイン!TinyMCE Advancedの使い方・設定方法
WPプラグイン
WordPress Popular Postsとは
WordPress Popular Posts(WPP)の使い方とオススメの設定方法
WPプラグイン
マーケティングとWeb制作で
貴社の経営課題を解決します

市場調査や競合調査を始め、企業やサービスの優位性を理解した上で、UI/UX設計やコンテンツマーケティング、SEO・ネット広告を中心としたWebマーケティングを通じて、ビジネスを加速させるご提案をしています。