「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=0 view数は0で非表示、1で表示
range='last30days' 最近30日間
cat=0 cat=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 Popular Posts」と「Post Snippets」を使って、人気記事をショートコード化する方法(続編)

WordPress Popular Posts 以前の記事で、「WordPress Popular Posts」と「Post Snippets]プラグインを使って人気記事をショートコード化して、投稿記 ...

続きを見る

 

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

 

スポンサーリンク

 

関連記事(一部広告含む)

 

 

Blog オススメ記事(コンテンツ選択)

ボタンを押してコンテンツ選択

レコード音質とハイレゾ化

CD音質と圧縮音源 AAC等

WebデザインやiPhone・PCなど

ツールと閑話ブログ

スポンサーリンク

© 2021 ハイレコのブログ Powered by AFFINGER5