WordPress Popular
Posts
当サイトは、人気記事が表示出来るプラグインWordPress Popular Posts(以下WPP)でウィジェットを使ってサイドバーに人気記事一覧を表示しています。
今回、Post Snippetsプラグインを併用してウィジェットを使わず（PHPも使わない）カテゴリー別人気記事を（ショートコード化して、）本文記事などに埋め込む方法をご紹介します。
注意ポイント
- このブログはAFFINGER5（有料）テーマを使用しています。 WPPのショートコード化に当たっては、このテーマのCSS（クラス）を使用しています。 AFFINGER5以外のテーマでは、デザインが崩れますのでご注意ください。
- 当ブログのサイドバーに人気記事を表示していますが、この設定については下のリンク記事を参考にさせて頂いています。
こちらをCHECK
WPPのショートコードとパラメータについて
WPPプラグインによる「人気記事一覧」は、サイドバーにウィジェットを使って表示するのが一般的で設定も分かりやすいのですが、記事中の不特定位置に「人気記事一覧」を表示できません。 そこでWPPのショートコードを使えば、投稿記事中に「人気記事」を表示させることができるようになります。 下に一例を示します。
例えば、直近３０日間で人気上位の３記事をリストアップしたい場合、
【wpp stats_views=0 range='last30days' cat=0 limit=3 】（【】は半角）とすれば、下の様に人気記事がリストアップされます。
ポイント
【wpp stats_views=0 range='last30days' cat=0 limit=3 】パラメータの意味について
| stats_views=0 | view数は0で非表示、1で表示 |
| range='last30days' | 最近３０日間 |
| cat=0 | cat=0で全カテゴリ。カテゴリに特定する場合カテゴリidを入力 |
| limit=3 | 人気上位３記事 |
- 各パラメータ間は半角スペースで区切ります。
- その他のパラメータ詳細は、Wordpressの管理画面の設定→WordPress Popular Postsをクリック。 パラメータをクリックすると詳細が表示されますのでご参照ください。
サムネール画像を含めた人気記事一覧のショートコード化
step
1WPPのショートコードの問題
WPPはHTMLを含めたパラメータを使用し、サムネール画像含めたショートコード化できますが、以下の問題があります。
- 相当に長いショートコードになり分かりにくい。
- HTMLまで含めたパラメータを使うと、HTMLに使用されるタグ（＜/＞）で、Wordpressのビジュアルエディタでショートコードを表記すると、自動整形機能で人気記事がうまく表示されない。
- カテゴリidなど、変数をいれて使い回せない。
※以上の問題を解決するために、Post Snippetsプラグインを使います。
step
2Post Snippetsを使ってショートコード化する
WordPressの管理画面の設定→Post Snippetsに入り、以下の画面の様に記述します。
１）ショートコードの名前：「人気記事 表示」
２）コード（変数含む）
Affinger5の記事一覧と略同じスタイルになるWPPショートコードをPost Snippetsの設定に入れます。
|
1 2 3 4 5 6 7 8 9 10 11 |
[wpp header='{name}' header_start=' <h6 class="title" style="margin-top: {marg_t}; margin-bottom:{marg_b};">' header_end='</h6>' wpp_start='<div class="kanren">' wpp_end='</div>' cat={cat_id} range='last30days' thumbnail_width=100 thumbnail_height=100 limit=3 excerpt_length=50 post_html=' <dl class="clearfix number"> <dt>{thumb}</dt> <dd> <h5 class="kanren-t">{title}</h5> <div class="smanone2"> <p>{summary}</p> </div> </dd> </dl>'] |
３）Variable
name=＜よく読まれている記事＞,cat_id=0,marg_t=0px,marg_b=0px
４）Description
nameはタイトル名を入力 cat_idはカテゴリid（デフォルトは0で全てカテゴリー記事になる）トップページではmarg_tは10pxに marg_bは-30pxに
以上を入力したらUpdateボタンを押して保存します。
step
3CSSコードの設定
最後に、CSSコードは以下の通りです。 このコードをAffinger5のチャイルドスタイルシートに追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* WordPress Popular Posts */ .number { position:relative; } dl.number:before { counter-increment:ranking; content:counter(ranking); position:absolute; top:0; left:0; padding:2px 6px; background:#fbc02d; font-size:13px; font-weight:bold; color:#fff; } h4 ,h6{ counter-reset:ranking; } dl.clearfix.number{ margin-bottom:10px; padding-bottom:10px; } #side .st-author-description{ text-align:justify; } dl.number::before{ border-radius:15px; padding:2px 5px } |
それでは、カテゴリーの人気記事を表示させてみます
WordPress のビジュアルエディタで、Post Snippetsボタン
をクリックして、「人気記事 表示」を選択すればショートコードが記事中に挿入されます。
下段「Wordpress関連の人気記事」は記事中にショートコード【人気記事 表示 name="＜Wordpress関連の人気記事＞" cat_id="13" marg_t="0px" marg_b="-20px"】を挿入しますと、ブラウザでは下の様に示されます。
-
iPhoneのブラウザでvideo再生前の画面が無地になることを防ぐvideo埋め込みショートコードの作成
WordPressで動画を埋め込んだページをiPhoneのブラウザで見るとVideo画面が無地になる...
-
特定ページのヘッダーやフッターにコードを挿入できるWPCode Liteプラグインを使う
ヘッダーやフッターに、特定ページしか使われ無い(他の殆どのページにとって余計な)CSSやscript...
-
Amazonアソシエイトの「テキストと画像リンク」作成機能の廃止に伴う対応策
今までは、アソシエイトツールバーの「テキストと画像リンク」から記事内に貼り付けるコードをコピペして、...
以上の「カテゴリー別・人気記事」のショートコードは当ブログのトップページで多用していますので、よろしければご覧ください。
この記事の続編です。 続いてご覧ください
-
-
「WordPress Popular Posts」と「Post Snippets」を使って、人気記事をショートコード化する方法（続編）
以前の記事で、「WordPress Popular Posts」と「Post Snippets]プラグインを使って人気記事をショートコード化して、投稿記事の本文中に人気記事を挿入する方法をご紹介しまし ...
続きを見る