「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関連の人気記事>
ロリポップサーバー PHP7.4(CGI版)への移行とPHPバージョンの確認方法

当ブログのレンタルサーバー先であるロリポップは、2020年5月14日 か...

WordPress5.4.1・Gutenbergトラブル顛末記

使い難さから、Gutenbergエディタを使うことを敬遠し、今までWordpress...

WordPressのAudio ショートコード(埋込プレーヤ)を使用する

当ブログは、LPレコードのハイレゾ化をメインテーマにしていますので、オーディオ用の埋込メディ...

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

 

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

 

スポンサーリンク


〜〜〜〜〜〜〜〜〜〜〜

オススメ記事

レコードのハイレゾ化
オススメ記事

LPレコードのハイレゾ化のススメ(ハイレゾ録音のヒント集)

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

MCカートリッジとMMカートリッジの音質比較

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

DENON MCカートリッジ DL103Rのクロストーク「 原理編」

今更ながら、「我が家のB級プレーヤ」に取り付けた「DL103Rカートリッジのクロストーク(セパレーション)をテストレコード(AD-1 2面のバンド4:基準レベル、1kHz、3.54cm/sec(尖頭値 ...

テストレコード(AD-1)で出来ること

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

レコードをハイレゾ化するならDSDかPCMか?

ことの 発 端 ことの発端は、あるハイレゾDLサイトから、チャイコのバイオリンコンチェルトをPCM(Flacファイル 192Khz、24Bit)で購入しました。WAVファイルも平行販売されています。 ...

CD音質関連 その他
オススメ記事

アナログ・レコードのここがダメ「CD音質と比較して」

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

CDフォーマットのここがダメ「ハイレゾと比較して」

CDフォーマットのサンプリング周波数は44.1khzでビット深度は16bitです。 特にビット深度は録音レベルが低下するに伴い音質に問題が生じます。 CDの開発時点では先端技術で市場を席巻しましたが昨 ...

Sony HAP-Z1ESのDSEE機能/確認

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

Apple Digital MastersのAAC音質(その1)

2019年7月付けの「Apple Digital Masters テクノロジー概要」によれば、iTunesやApple Musicで配信される楽曲は、「Apple Digital Masters テク ...

Post Snippets Pluginで出来ること(小技・事例集)

 WordPressで記事を書いているビジュアルエディタ派の方でPost Snippets Plugin(以下PSPに略します)を使わずにいませんか? または、PSPをインストールしているのにも関わら ...

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