gutenbergのブロックエディタを使っている場合は、WordPress Popular Posts専用のブロックを利用した方がいいと思います。
使い方は別記事(WordPress Popular Postsの使い方【専用ブロック編】)で用意しましたのでよければご覧くださいまっせm(_ _)m
サイト制作をする人
ブログをカスタマイズしたい人
本記事はクラシックエディタを使っている人が主なターゲットになります。
(ブロックエディタ利用の人も対象の記事になりますが、専用ブロック利用の方が直感的でわかりやすいので専用ブロック編の方法をお勧めします。)
もくじ
投稿や固定ページでショートコードを使う
ショートコードを設置すると、直近24時間以内に最も見られているページが10件まで表示されます。
使い方は以下の画像通り、[[wpp]]と書くだけ！
以上！！！
もしブロックエディタを使っている場合はショートコードブロックを使ってください。(*公式に記載があります。)
出力結果はこんな感じ。
デフォルトでタイトルとページビュー数が表示されるくらいです。
枠や文字の色はこのブログのテーマ(SANGO)によるものです。
(データが揃ってないので5件までしか表示されていませんが通常10件まで表示されます。)
<ul class="wpp-list"> <li> <a href="リンク先" class="wpp-post-title" target="_self">キャッシュを残さずcssを反映する方法</a> <span class="wpp-meta post-stats"><span class="wpp-views">8件のビュー</span></span></li> <!-- ×10件分 --> </ul>
- ulタグにwpp-listクラスがついている
- aタグにwpp-post-titleクラスがついている
- ビュー数はwpp-viewsクラス、その親にwpp-metaクラスとpost-statsクラスを持っている
以上のクラスがデフォルトでついていることがわかっているので、
もしcssでスタイリングをしたい場合はこの辺りのクラス名を指定してあげればいいと思います。
ショートコードを使ってカスタマイズする
ショートコードをカスタマイズすることができます(例えば表示件数の変更、view数の表示/非表示の変更などができる)。(どんなカスタマイズができるかは以下私が作成した表をサクッと見ればなんとなくわかるかなと思います。)
カスタマイズするにはショートコードにパラメーターをつける必要があります。
全パラメータは公式が提示してくれています。
以下に私がわかるように日本語でパラメータ一覧を作成しました。適当なので正しくないです。時間があるときに改良していきます！
公式(ショートコード内で使えるパラメータ:英語)が正しいのでそちらをみた方がいいです。
パラメータ名 + = + “値”
[wpp range="last30days" limit=3 stats_views=0 order_by='comments']上記例では、
- 集計は直近30日以内
- 記事の表示は3件まで
- view数を非表示にする
- コメント数で並び替える
といったカスタマイズがされている。
パラメータ一覧
よく使うパラメータには緑マーカーを引いています。
| パラメータ | 解説 | 入れられる値 | デフォルト値 | 例 |
|---|---|---|---|---|
| header | 見出しの設定 | テキスト文字列 | none | [[wpp header=’見出しです’]] |
| header_start, header_end | 見出しの開始タグ、 見出しの終了タグ | テキスト文字列, テキスト文字列 | <h2>, </h2> | [[wpp header=’Popular Posts’ header_start='<h3>’ header_end='</h3>’]] |
| limit | 何件まで表示するか(リストの最大値) | 正の整数 | 10 | [[wpp limit=3]] |
| range | 集計する期間 | last24hours, last7days, last30days, all, custom | last24hours | [[wpp range=’last7days’]] |
| time_quantity | rangeパラメータの値がcustomのとき数字のみの指定 (time_unitパラメータと組み合わせて使う) | 正の整数 | 24 | [[wpp range=’custom’ time_quantity=1 time_unit=’hour’]] |
| time_unit | rangeパラメータの値がcustomのときunitを指定 (time_quantityパラメータと組み合わせて使う) | minute, hour, day, week, month | hour | [[wpp range=’custom’ time_quantity=1 time_unit=’hour’]] |
| freshness | 集計期間内に投稿された記事のみカウントするか否か | 1 (true), 0 (false) | 0 | [[wpp range=’last7days’ freshness=1]] |
| order_by | 何を基準に並び替えるかを指定する | comments, views, avg (for average views per day) | views | [[wpp order_by=’comments’]] |
| post_type | 表示したいリストのpost typeの定義 | テキスト文字列 | post | [[wpp post_type=’post, page, my-custom-post-type’]] |
| pid | 特定のIDを除外する | テキスト文字列 | none | [[wpp pid=’60, 25, 31′]] |
| cat | 指定されたIDを指定。マイナスがついている場合除外。 | テキスト文字列 | none | [[wpp cat=’1, 55, -74′]] |
| taxonomy | 指定したタクソノミーでフィルターする。複数のタクソノミーを使う場合、タクソノミーとそれらのterm idを区切るためにセミコロン(;)を使う。 | テキスト文字列 | none | [[wpp taxonomy=’post_tag’ term_id=’118, 75, 15′]] [[wpp taxonomy=’category; post_tag’ term_id=’1, 55, -74; 118, 75, 15′]] |
| term_id | 指定したterm idでフィルターする。マイナスがついている場合除外される。 | テキスト文字列 | none | [[wpp taxonomy=’category’ term_id=’1, 55, -74′]] |
| author | 指定したauthor id(s)でフィルターする。 | テキスト文字列 | none | [[wpp author=’1, 7′]] |
| title_length | タイトルの長さを制限する | 正の整数 | 25 | [[wpp title_length=35]] |
| title_by_words | 1に設定するとタイトルの長さを（文字ではなく）ワード数で制限 | 1 (true), (0) false | 0 | [[wpp title_length=10 title_by_words=1]] |
| excerpt_length | 抜粋の文字数を制限 | 正の整数 | 0 | [[wpp excerpt_length=55 post_html='<li>{title} <div class=”wpp-excerpt”>{excerpt}</div></li>’]] |
| excerpt_by_words | 1に設定すると抜粋の長さを（文字ではなく）ワード数で制限 | 1 (true), (0) false | 0 | [[wpp excerpt_length=25 excerpt_by_words=1 post_html='<li>{title} <div class=”wpp-excerpt”>{excerpt}</div></li>’]] |
| excerpt_format | 抜粋にあるすべてのスタイリングタグ（strong, italicなど）とハイパーリンクを維持するか否か | 1 (true), (0) false | 0 | [[wpp excerpt_length=55 excerpt_format=1 post_html='<li>{title} <div class=”wpp-excerpt”>{excerpt}</div></li>’]] |
| thumbnail_width | 値が設定されていて、現在のサーバー構成で許可されている場合は、投稿のサムネイルを表示。サムネイルの幅を設定。 | 正の整数 | 0 | [[wpp thumbnail_width=100 thumbnail_height=75]] |
| thumbnail_height | 値が設定されていて、現在のサーバー構成で許可されている場合は、投稿のサムネイルを表示。サムネイルの高さを設定。 | 正の整数 | 0 | [[wpp thumbnail_width=100 thumbnail_height=75]] |
| rating | 1が設定されていて、WP-PostRatingsのプラグインがインストールされて有効になっている場合、訪問者が人気の投稿についてどのように評価しているかを示す。 | 1 (true), (0) false | 0 | [[wpp rating=1 post_html='<li>{title} <div class=”wpp-rating”>{rating}</div></li>’]] |
| stats_comments | 指定した期間に何件のコメントがついたかを表示するか否か | 1 (true), (0) false | 0 | [[wpp stats_comments=1]] |
| stats_views | 指定した期間にどれだけのpvがあったかを表示するか否か | 1 (true), (0) false | 0 | [[wpp stats_views=0]] |
| stats_author | 著者の名前を表示するか否か | 1 (true), (0) false | 0 | [[wpp stats_author=1]] |
| stats_date | 投稿日を表示するか否か | 1 (true), (0) false | 0 | [[wpp stats_date=1]] |
| stats_date_format | 日付のフォーマットを指定 | テキスト文字列 | ‘F j, Y’ | [[wpp stats_date=1 stats_date_format=’Y-m-d’]] |
| stats_category | カテゴリーを表示するか否か | 1 (true), (0) false | 0 | [[wpp stats_category=1 post_html='<li>{title} {category}</li>’]] |
| stats_taxonomy | タクソノミーを表示するか否か | 1 (true), (0) false | 0 | [[wpp taxonomy=’post_tag’ stats_taxonomy=1 post_html='<li>{title} {taxonomy}</li>’]] |
| wpp_start, wpp_end | リストタグの開始タグと終了タグ指定 | テキスト文字列 | <ul>, </ul> | [[wpp wpp_start='<ol>’ wpp_end='</ol>’]] |
| post_html | それぞれの投稿のhtml構造を設定する (liタグ内の構造をカスタムする) | テキスト文字列, カスタム HTML (カスタムHTML内ではcontent tagが使える。使えるタグについてはContent Tagsを参照) | <li>{thumb} {title} <span class=”wpp-meta post-stats”>{stats}</span></li> | [[wpp thumbnail_width=100 thumbnail_height=75 post_html='<li>{thumb} <a href=”{url}”>{text_title}</a></li>’]] |
パラメータpost_htmlについて
上記表の一番下post_htmlについてです。
このパラメータを使うとliタグ内のhtml構造を変更することができます。
デフォルトでのhtml構造は以下の通り。
<li>{thumb} {title} <span class="wpp-meta post-stats">{stats}</span></li>上記デフォルトの構造以外のhtml構造にカスタマイズしたい場合にpost_htmlを利用します。
さらに、WordPress Popular Postsが準備してくれているContent Tagsをpost_htmlに組み込むことで簡単にwordpressのタイトルやサムネイル(その他多数)を設置することができます。
content tagsはわかりやすので説明はありません(突然投げ出してすみませぬ)。
ほんとに{thumb}、{title}、{url}とかわかりやすいので！説明もいらないかなという感じです。
stats_○○○パラメータについて
ちょっとクセがあるなと思うパラメータがstats_○○○プロパティです。
stats_○○○プロパティは全部で7つあります。
- stats_comments
- stats_views
- stats_author
- stats_date
- stats_date_format
- stats_category
- stats_taxonomy
以下ショートコードは[[wpp]]のデフォルトのhtml構造ですが、
<li>{thumb} {title} <span class="wpp-meta post-stats">{stats}</span></li>stats_○○○プロパティの値に1を指定し、表示するように命令を出すと全てcontent tagsの{stats}に入ってきます。
html構造上stats_○○○をそれぞれバラすにはより高度なカスタマイズが必要になるので、
興味のある方は以下のURLをご覧ください。
この辺も解説していきたいのですがなかなか説明が難しいので後ほど時間があれば別記事で…。
ショートコードを設置したのに表示されませんという方
WordPress Popular Postsのプラグインを導入したばかりの場合、データが取れていないので投稿や固定ページにショートコードを設置しても「まだデータがありません」と表示されます。
その場合はサイト訪問者が集まるまでしばらく待つと表示されるようになります。
おわりに
WordPress Popular Postsはデフォルトで使う以外は結構難しいプラグインだなーと思います。
デフォルトでも結構いい感じ？だと思いますしブロガーさんとかもデフォルトで使っていいんじゃないかな〜。
とはいえ、カスタマイズ性は高いプラグインなので、サイト制作者さんには便利なプラグインだと思います。
使用を理解するまでは時間がかかるかもしれないけど理解してしまったらこっちのもんさ( ˙-˙ )
おわりー
