WordPress:「WordPress Popular Posts」の出力内容をカスタマイズする方法

WordPress:「WordPress Popular Posts」の出力内容をカスタマイズする方法

「WordPress Popular Posts」の出力内容をカスタマイズする方法をいくつか紹介します。
簡易的なものだけでなく全体的にカスタマイズできる方法もあるので、このプラグインをよく利用する方は覚えておくとデフォルトとは大きく異なる見栄えや出力にも容易に対応できると思います。

※紹介している内容は、WordPress Popular Posts Ver 4.2.2を使用した際のものになります。
プラグインの概要や使用方法などについては「WordPress Popular Posts」で確認してください。

デフォルトの出力HTML

単純に「WordPress Popular Posts」を呼び出した場合は、デフォルトで下記のようなul, liで構成されたリンク付きのページタイトルと閲覧数が出力されます。

HTML

<ul class="wpp-list">
  <li>
    <a href="https://example.com/postname1/" title="Post Title 01" class="wpp-post-title" target="_self">Post Title 01</a>
    <span class="wpp-meta post-stats"><span class="wpp-views">000ビュー</span></span>
  </li>
  <li>
    <a href="https://example.com/postname2/" title="Post Title 02" class="wpp-post-title" target="_self">Post Title 02</a>
    <span class="wpp-meta post-stats"><span class="wpp-views">000ビュー</span></span>
  </li>
  <li>
    <a href="https://example.com/postname3/" title="Post Title 03" class="wpp-post-title" target="_self">Post Title 03</a>
    <span class="wpp-meta post-stats"><span class="wpp-views">000ビュー</span></span>
  </li>
</ul>

※インデントや改行については実際の出力と異なります。

HTMLは別のタグを使用したいとか日付やカテゴリーといった情報も表示させたいなど、この出力内容を変更したいときは以下で紹介する方法でカスタマイズすることができます。

呼び出し時のパラメータ指定を使う

ulolに変更したい」「.wpp-listを別のclass名にしたい」「各記事の出力内容(li要素の中身)を変更したい」ぐらいであれば、プラグイン呼び出し時のパラメータ指定で対応することができます。
例えば、デフォルトでは.wpp-listというclassが付いたul要素で括られていますが、それを任意のclass名が指定されたol要素に変更したいときは、呼び出し時に下記のようにwpp_startwpp_endのパラメータ指定を行います。
それぞれ名前の通りwpp_startは開始タグ指定をする箇所になるので任意のclass付きの<ol>を記述し、wpp_endで終了タグである</ol>を記述します。

PHP

if ( function_exists( 'wpp_get_mostpopular' ) ) {
  $args = array(
    'wpp_start' => '<ol class="ranking-list">',
    'wpp_end' => '</ol>',
  );
  wpp_get_mostpopular( $args );
}

また、各記事の出力内容(デフォルトでli要素に括られている部分)はpost_htmlを利用することで任意の内容に変更することができます。
下記の場合はシンプルにリンクが設定されたページタイトルが出力されるよう指定したもので、記述内にある{url}{text_title}はプラグインが用意しているコンテンツタグと呼ばれるものになります。

PHP

if ( function_exists( 'wpp_get_mostpopular' ) ) {
  $args = array(
    'post_html' => '<li><a href="{url}">{text_title}</a></li>',
  );
  wpp_get_mostpopular( $args );
}

コンテンツタグはページのタイトルやURLといった動的な出力を容易に指定することができるタグで、他にもサムネイルイメージを表示する{thumb}や閲覧数を表示する{views}なども用意されており、他にどのようなものがあるかはプラグイン有効化後に追加されるページの「パラメーター」最下部にある「post_html」で確認できます。
また、フックを利用して任意の内容を出力させるオリジナルのコンテンツタグも作成でき、以下で作成方法について紹介しているので興味ある方は試してみてください。

フックで各記事の出力内容を変更する

上で紹介したようにpost_htmlを利用しても各記事の出力内容の変更できますが、例えばコンテンツタグでは用意されていない情報を出力したいとか複数箇所で呼び出しているのをまとめて設定・変更したい場合は、wpp_postというフックを使うと便利です。
フックには出力HTMLを取得する$post_html、記事のIDやタイトルの情報を取得する$popular_post、表示件数・記事取得時間の範囲・記事の並び順といった細かい設定情報を取得する$instanceの3つが引数として用意されており、今回のサンプルでは行なっていませんが上手く利用すれば特定の条件のときに見栄えや出力内容を変えるといったことも可能です。
実装にはこれらを利用しながらfunctions.phpへ下記のように記述します。

functions.php

add_filter( 'wpp_post', 'custom_wpp_single', 10, 3 );
function custom_wpp_single( $post_html, $popular_post, $instance ) {
  $permalink = get_permalink( $popular_post->id );
  $title = $popular_post->title;
  $category = '';
  $terms = get_the_terms( $popular_post->id, 'category' );
  if ( $terms ) {
    foreach ( $terms as $term ) {
      $category .= $term->name . ', ';
    }
    $category = rtrim( $category, ', ');
  }
  $date = get_the_date( 'Y.m.d', $popular_post->id );
  $pageviews = $popular_post->pageviews;
  $output = '<li class="custom-class"><a href="' . $permalink . '"><span class="post-title">' . $title . '</span><span class="post-category">' . $category . '</span><time class="post-date">' . $date . '</time> / <span class="post-view">' . $pageviews . ' view</span></a></li>';
  return $output;
}

上記は各記事のリンク・タイトル・カテゴリー・日付・閲覧数を任意のclassを指定したli要素で括った状態で出力させたもので、フロントでは下記のようなHTMLで出力されます。

HTML

<li class="custom-class">
  <a href="https://example.com/postname/">
    <span class="post-title">Post Title</span>
    <span class="post-category">カテゴリー</span>
    <time class="post-date">0000.00.00</time> / <span class="post-view">000 view</span>
  </a>
</li>

※インデントや改行については実際の出力と異なります。

ちなみに、そこまで大幅な変更はせずにデフォルトで出力されるものに少し手を加えたいとかであれば、下記のように$post_htmlの内容をstr_replace()で変更する方法もあり、このサンプルの場合は任意のclassをli要素に付与するものになります。

functions.php

add_filter( 'wpp_post', 'custom_wpp_single', 10, 3 );
function custom_wpp_single( $post_html, $popular_post, $instance ) {
  $output = str_replace( '<li>', '<li class="custom-class">', $post_html );
  return $output;
}

フックで全体的に出力内容を変更する

各記事だけでなく親要素も含めて全体的に出力内容を変更したい場合は、wpp_custom_htmlというフックを使います。
こちらも$popular_post$instanceの引数を利用することで各種情報や設定を取得することができ、これらを利用しながらfunctions.phpへ下記のように記述します。

functions.php

add_filter( 'wpp_custom_html', 'custom_wpp_html_list', 10, 2 );
function custom_wpp_html_list( $popular_posts, $instance ) {
  $output = '<div class="ranking-list">' . "\n";
  foreach( $popular_posts as $popular_post ) {
    $permalink = get_permalink( $popular_post->id );
    $title = $popular_post->title;
    $date = get_the_date( 'Y.m.d', $popular_post->id );
    $output .= '<article class="ranking-item">' . "\n";
    $output .= '<a href="' . $permalink . '"><time class="post-date">' . $date . '</time><span class="post-title">' . $title . '</span></a>' . "\n";
    $output .= '</article>' . "\n";
  }
  $output .= '</div>' . "\n";
  return $output;
}

上記は各記事のリンク・タイトル・日付をそれぞれclass付きのarticle要素で括り、さらにそれらすべてを任意のclassを指定したdiv要素で括ったものになり、フロントでは下記のようなHTMLで出力されます。

HTML

<div class="ranking-list">
  <article class="ranking-item">
    <a href="https://example.com/postname01/">
      <time class="post-date">0000.00.00</time>
      <span class="post-title">Post Title 01</span>
    </a>
  </article>
  <article class="ranking-item">
    <a href="https://example.com/postname02/">
      <time class="post-date">0000.00.00</time>
      <span class="post-title">Post Title 02</span>
    </a>
  </article>
  <article class="ranking-item">
    <a href="https://example.com/postname03/">
      <time class="post-date">0000.00.00</time>
      <span class="post-title">Post Title 03</span>
    </a>
  </article>
</div>

※インデントや改行については実際の出力と異なります。

Close the search window,
please press close button or esc key.