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

WPプラグイン

三上龍志

投稿日： 2017.04.25

最終更新日： 2019.01.31

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>
          
            {date}
            {category}
            {author}
          
        </article>
      </li>
    '
  );
?>

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


  

人気の記事


      
        
          
          ダミータイトル1
          2017.03.07
          カテゴリー名
          author-name
        
      
    
      
        
          
          ブログタイトルテスト
          2017.04.23
          カテゴリー名
          author-name