広告 WordPress関連

「WordPress Popular Posts」と「Post Snippets」を使って、人気記事をショートコード化する方法(続編)

スポンサーリンク

 

WordPress Popular Posts

以前の記事で、「WordPress Popular Posts」と「Post Snippets]プラグインを使って人気記事をショートコード化して、投稿記事の本文中に人気記事を挿入する方法をご紹介しました。 

今回は、以前の方法では出来なかったサイドバーへの設置や使い勝手の改善を行いましたので、その方法をご紹介します。 今回も、PHPやjQueryも使用していません。

 

注意ポイント

  • このブログはAFFINGER5(有料)テーマを使用しています。 WPPのショートコード化に当たっては、このテーマのCSS(セレクター)を使用しています。 AFFINGER5以外のテーマでは、デザインが崩れますのでご注意ください。

 

前回記事の「人気記事ショートコード化」の問題点

前回の問題点

Affinger5で使用されている、Post Snippetsのコード設定でCSSセレクターに「kanren」を共用した為に、

  1. サイドバーに設置すると、サムネール画像のスタイルが崩れる
  2. サムネールサイズが100pxで固定され変更できない。
  3. その他、抜粋の文字数(50文字に固定)や表示件数(3件に固定)を指定できない。

以上が改善できれば、サイドバーに設置する時に、サムネールサイズを小さくして、抜粋文字を(文字数をゼロに指定)無くしたり、表示件数を5件に出来るなど自由度が増します。

PCでご覧の方は、当ブログのサイドバー(最下段)に設置した人気記事(<よく読まれている記事>)をご覧ください。 この人気記事は、サムネールサイズを80px、抜粋文字数をゼロ、表示件数を5件に設定しています。

 

Post Snippetsを使ったショートコード化 (改善後)

Post Snippets(以下PSP)プラグインの使い方は、ここをクリックしてご参照ください。 ここでは、PSPの管理画面(下の画面)で、項目①〜⑥についての説明になります。

Post Snippetsの設定画面

blank

番号 項目 設定内容
タイトル名 「人気記事 表示」
コード・コンテンツ WordPress Popular Postsのショートコードを記述(後述のコード参照)
Variables(変数)

name=<よく読まれている記事>,marg_t=0px,marg_b=0px,cat_id=0,numb=3,thumbnail_size=100,chr_number=50

Shortcode レ点
PHP Code
Description

nameはタイトル名を、 タイトルの位置余白調整はmarg_tで上にmarg_bで下へ、cat_idはカテゴリid(デフォルトは0で全てカテゴリー記事になる)numberは記事数、chr_numberは文字数 注記:サイドバーに設置のとき、title_css=thumbnail_sizeを80 ,chr_numberを0に設定

エリアのコード・コンテンツは、以下の通り

コード・コンテンツのポイント

  • このコード全体は、WordPress Popular Posts(WPP)のショートコードです。 このショートコードをWordpressのビジュエディタに直接挿入すると、文字整形機能でコードが崩れてしまうので正常に表示されません。 PSPを使うことで、簡潔な記述でショートコード化し、WPPのパラメータを容易に使い回せることができます。
  • 前回・CSSセレクターの「kanren」を変更して新たな<div class="like_kanren" >にしました。
  • 中括弧{ }で囲われている部分がWPPのパラメータになります。 これを英数字に置き換えて変数(前記のVariables)として定義しています。 
  • 変数の意味は、Descriptionの説明をご覧ください。
  • 少々工夫したポイントは、5行目の dd style 以下の部分で、変数:thumbnail_size のピクセル(px)に合わせてpadding-leftの位置を指定し、margin-left:15px; で余白を与えています。 これによって、サムネールサイズを変えても自動的に文字との余白をキープしています。

完成したPSPショートコードは以下になりました。

 shortcode
[人気記事 表示 name="<よく読まれている記事>" marg_t="0px" marg_b="0px" cat_id="0" numb="3" thumbnail_size="100" chr_number="50"]

 

今回の変更によるCSSコードです。

 

完成したPSPショートコードの人気記事・サンプル例

注意ポイント

ショートコード [ ] 内の、ダブルコーテーション " " で囲まれている部分が変更できる値になります。

変数名 " " で囲まれた値の意味 デフォルト・値
name 人気記事のタイトル名 <よく読まれている記事>
marg_t 、 marg_b 人気記事のタイトル位置 上下調整値
cat_id カテゴリーID番号。0で全カテゴリ 0
numb 人気記事の項目数 3
thumbnail_size サムネイルサイズのpx数 100
chr_number 抜粋の文字数。0で抜粋無し 50

 

例ー1:デフォルト・ショートコード

【人気記事 表示 name="<よく読まれている記事>" marg_t="0px" marg_b="0px" cat_id="0" numb="3" thumbnail_size="100" chr_number="50"】

(注記:実際の【 】は半角)

 

例ー3:表題変更、カテゴリ指定

赤字が変更箇所
【人気記事 表示 name="<閑話ブログ・人気記事>" marg_t="0px" marg_b="0px" cat_id="12" numb="3" thumbnail_size="100" chr_number="50"】(注記:【 】は半角)

 

「WordPress Popular Posts」の設定を下に示します(参考)

設定 > WordPress Popular Posts > ツール での設定は、以下にしています。 

特に、「データキャッシュしない」を選択する必要があります。 ブログページ内の色々な箇所に、PSPショートコードを配置するとデータキャッシュのタイミングがずれて異なる「人気記事」が表示されてしまうのを防ぐためです。(2021/9/8 追記)

 

以上、「人気記事をショートコード化する方法」の続編でした。 WordpressテーマのAffinger5ユーザー以外の方でも、この記事を参考にCSSを変更すれば「人気記事」のショートコード化ができると思います。

 

スポンサーリンク

 

スポンサーリンク

 

t