「WordPress Popular Posts」と「Post Snippets」を使って、カテゴリー人気記事をショートコード化する方法

更新日:

スポンサーリンク

 

 
WordPress Popular
Posts

当サイトは、人気記事が表示出来るプラグインWordPress Popular Posts(以下WPP)でウィジェットを使ってサイドバーに人気記事一覧を表示しています。 

今回、Post Snippetsプラグインを併用してウィジェットを使わず(PHPも使わない)カテゴリー別人気記事を(ショートコード化して、)本文記事などに埋め込む方法をご紹介します。

 

注意ポイント

  • このブログはAFFINGER5(有料)テーマを使用しています。 WPPのショートコード化に当たっては、このテーマのCSS(クラス)を使用しています。 AFFINGER5以外のテーマでは、デザインが崩れますのでご注意ください。
  • 当ブログのサイドバーに人気記事を表示していますが、この設定については下のリンク記事を参考にさせて頂いています。

 

 

スポンサーリンク

 

WPPのショートコードとパラメータについて

WPPプラグインによる「人気記事一覧」は、サイドバーにウィジェットを使って表示するのが一般的で設定も分かりやすいのですが、記事中の不特定位置に「人気記事一覧」を表示できません。 そこでWPPのショートコードを使えば、投稿記事中に「人気記事」を表示させることができるようになります。 下に一例を示します。

例えば、直近30日間で人気上位の3記事をリストアップしたい場合、

【wpp stats_views=0 range='last30days' cat=0 limit=3 】(【】は半角)とすれば、下の様に人気記事がリストアップされます。

ポイント

【wpp stats_views=0 range='last30days' cat=0 limit=3 】パラメータの意味について

stats_views=0view数は0で非表示、1で表示
range='last30days'最近30日間
cat=0cat=0で全カテゴリ。カテゴリに特定する場合カテゴリidを入力 
limit=3人気上位3記事
  • 各パラメータ間は半角スペースで区切ります。
  • その他のパラメータ詳細は、Wordpressの管理画面の設定WordPress Popular Postsをクリック。 パラメータをクリックすると詳細が表示されますのでご参照ください。

 

サムネール画像を含めた人気記事一覧のショートコード化

 

step
1
WPPのショートコードの問題

WPPはHTMLを含めたパラメータを使用し、サムネール画像含めたショートコード化できますが、以下の問題があります。

  • 相当に長いショートコードになり分かりにくい。
  • HTMLまで含めたパラメータを使うと、HTMLに使用されるタグ(</>)で、Wordpressのビジュアルエディタでショートコードを表記すると、自動整形機能で人気記事がうまく表示されない。
  • カテゴリidなど、変数をいれて使い回せない。

※以上の問題を解決するために、Post Snippetsプラグインを使います。

 

step
2
Post Snippetsを使ってショートコード化する

WordPressの管理画面の設定→Post Snippetsに入り、以下の画面の様に記述します。

1)ショートコードの名前:「人気記事 表示」

2)コード(変数含む)

Affinger5の記事一覧と略同じスタイルになるWPPショートコードをPost Snippetsの設定に入れます。 

3)Variable
name=<よく読まれている記事>,cat_id=0,marg_t=0px,marg_b=0px

4)Description
nameはタイトル名を入力 cat_idはカテゴリid(デフォルトは0で全てカテゴリー記事になる)トップページではmarg_tは10pxに marg_bは-30pxに

以上を入力したらUpdateボタンを押して保存します。

 

step
3
CSSコードの設定

最後に、CSSコードは以下の通りです。 このコードをAffinger5のチャイルドスタイルシートに追記します。

 

それでは、カテゴリーの人気記事を表示させてみます

WordPress のビジュアルエディタで、Post Snippetsボタンをクリックして、「人気記事 表示」を選択すればショートコードが記事中に挿入されます。

下段「Wordpress関連の人気記事」は記事中にショートコード【人気記事 表示 name="<Wordpress関連の人気記事>" cat_id="13" marg_t="0px" marg_b="-20px"】を挿入しますと、ブラウザでは下の様に示されます。

<Wordpress関連の人気記事>
Post Snippets Pluginで出来ること(小技・事例集)

 WordPressで記事を書いているビジュアルエディタ派の方でPost Snippets...

サイトページ表示遅延と「502 Bad Gateway」発生 のためロリポップの低負荷サーバへ移設(顛末記)

モバイルで、自サイトを見ると表示スピードが極端に遅く(10秒以上)なる時があり、最悪「502 B...

WordPressのページスピード改善(顛末記)

RapidWeaverから移転して、ほぼ1ヶ月。 静的ページからWordPressの動的ページに...

以上の「カテゴリー別・人気記事」のショートコードは当ブログのトップページで多用していますので、よろしければご覧ください。

 

以上、「WPP」と「Post Snippets」を使って、カテゴリー人気記事をショートコード化する方法でした。

 


スポンサーリンク

〜〜〜〜〜〜〜〜〜〜〜

 

おすすめ記事

1

  レコードのハイレゾ録音へのヒント(Tips)   ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご ...

2

  これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあ ...

3

年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...

4

eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードをMCカートリッジとMMカートリッジでハイレコした音源の音質比較を試みました。 MCカートリッジは、オルトフォ ...

5

「HAP-Z1ESのDSEEとDSDリマスタリングエンジンの効果検証」(以前のブログ記事)は、 実際のLPレコードからハイレゾ化したリアルサウンドでDSEEを評価したものでした。 今回は、正弦波の組 ...

Copyright© ハイレコのブログ , 2020 All Rights Reserved Powered by AFFINGER5.