「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の設定画面

番号項目設定内容
タイトル名「人気記事 表示」
コード・コンテンツ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"】

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

例ー2: 表示項目5 、サムネイル70、抜粋文無し

赤字が変更箇所
【人気記事 表示 name="<よく読まれている記事>" marg_t="0px" marg_b="0px" cat_id="0" numb="5"  thumbnail_size="70" chr_number="0"】(注記:実際の【 】は半角)

 

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

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

例ー4: 表示項目5 、サムネイル50、抜粋文無し

赤字が変更箇所
【人気記事 表示 name="<よく読まれている記事>" marg_t="0px" marg_b="0px" cat_id="0" numb="5" thumbnail_size="50" chr_number="0"】(注記:【 】は半角)

 

 

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

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

〜〜〜〜〜〜〜〜

オススメ記事

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

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をインストールしているのにも関わら ...

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