前に、
を書きました。
この記事内で説明し切れなかった、WordPress Popular PostsのHTML Markupに関して、どのようなオプションというか、どういう変数/テンプレート文字列のようなものが使用できるか、などを解説していきたいと思います。
なお、主にウィジェットで設定する場合について述べますが、だいたい関数に設定するときやショートコードを考えるときにもちょっとした助け程度には、なると思います…？
広告
HTMLマークアップのカスタマイズのメリット
WPPでこの項目を使う理由は、色々と表示項目をカスタムできる、というのもありますが、好きにタグにクラスを設定できるので、CSSで装飾を行うのが楽になるというのが大きいです。
なお、このとき、この時設定したクラスや、デフォルトでWPPに設定されているHTMLタグに対し、どのCSSを適用するかは決めておく必要があります。
プラグイン内CSSを使う場合は、前述の記事で説明したとおり、設定→WordPress Popular PostsのToolタブからMiscellaousのUse plugin’s stylesheetをEnabledにしてください。サイト全体に適用している独自CSSなどから一気に適用したい場合はDisabledでどうぞ。
HTML Markup Settingsの設定
さてそれでは、本題に入ります。
まず、ウィジェット設置画面の各設定項目の軽い説明を。なお、一応各設定項目に対して、ショートコードあるいはテンプレートタグにおける対応するパラメータ名を示しておきます。ついでに設定例も。
| 設定項目名 | 対応するパラメータ名 | 説明 | 例 |
|---|---|---|---|
| Before / after title: | header_start / header_end | ウィジェットのタイトル（『人気の投稿』という見出しが付いている部分）をどういうタグで囲むか | <h2> / </h2> |
| Before / after Popular Posts: | wpp_start / wpp_end | 人気の投稿リストをどういうタグで囲むか | <ul class=”wpp-list”> / </ul> |
| Post HTML Markup | post_html | <li>{thumb} {title} {stats}</li> |
ちなみに私は、最後のPost HTML Markupを
<li><div class=”wpp-post-title-custom”>{title}</div><div class=”wpp-post-stats-custom”> {views} view | category: {category}</div></li>としています。投稿の題名を表示する部分と、閲覧数・カテゴリを表示する部分にクラスを指定することで、CSSからこれらの部分の装飾をできるようにしています。
このようにして、『人気の投稿』としてリストアップされる項目を、どうコーディングするかを決定できます。
なお、どうやら私の設定例のように、HTMLタグのみではなく、タグで挟んだ中身の文字列をどうするかをある程度指定可能。このコードの場合だと、例えばCSSの設定によっては「記事名 1view | catrgory: 例」のような感じで表示することが出来ます。
さてこの設定をする中で使われている{thumb}といったように、{}で囲んだ部分は、囲まれた文字列によって、例えば{thumb}ならばサムネイル、{title}ならば記事の題名、といったように、あらかじめ対応するものにおきかえられます。どうやらこれを{}も含めてコンテンツ・タグと呼ぶ模様。
私のカスタマイズ例だと、それぞれ{title}、{views}、{category}と記述することで、題名・閲覧数・カテゴリーを表示する設定にしています。尚サイドバーの関係や画像の使用頻度を考えて、サムネイルは使用しない設定にしています（閲覧数・カテゴリーは、まだデザインが固まっていないので、プラグイン側ではなくCSSで非表示の状態です）。
使えるコンテンツ・タグ一覧
というわけで、ざっと使えるコンテンツ・タグを表にすると、こんな感じです。
| コンテンツ・タグ | 表示されるもの |
|---|---|
| {thumb} | サムネイル（リンクつき） |
| {thumb_img} | サムネイル（リンクタグ抜きの画像のみ） |
| {title} | 投稿の題名（リンクつき） |
| {summary} | 投稿の抜粋を、抜粋分の長さが0で無ければ表示 |
| {stats} | デフォルトで設定されている集計結果のタグを表示 |
| {rating} | WP-PostRatingsプラグインが入っていればそれによって得られた評価値を表示 |
| {score} | こちらもWP-PostRatingsプラグインが入っていればそれによって得られた評価値を表示 なお、こちらではInteger（整数）形式で表示する |
| {url} | URLを表示 |
| {text_title} | 投稿の題名（リンクつき） |
| {author} | 投稿者名 |
| {catregory} | 投稿のカテゴリ |
| {views} | 閲覧数。 閲覧数オンリーなので、viewsとかつけたい場合は自分でつける。 |
| {comments} | コメント数。 views同様コメント数オンリーなので、commentsとかつけたい場合は自分でつける。 |
| {date} | 投稿日時。 |
なお、一部のコンテンツ・タグは、ウィジェットの設定で「表示する」というのを選択していないと出ない場合があります。
まあ確かに、「カテゴリーを表示する」のチェックをOFFにしているのにコンテンツ・タグで{category}を記入する、ということがあると、判定に困りますものね…。
まとめ・私個人のコメントなど
以上、WPPにおけるHTMLマークアップの設定について書きました。
これらを活用するにはHTML/CSSの知識がいるとは思いますが、このあたりまでカスタマイズする方はその方面の知識もそれなりに持っていらっしゃる可能性が高いかな、と思いつつ、とりあえず私個人でのカスタマイズ例も入れてあります。
JetPackの人気の投稿ウィジェットよりも細かなカスタマイズが可能で、色々便利そうなので、暫くはこのサイトではこれをつかっていこうかな、と思っています。