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

スポンサーリンク

 

 WordPressで記事を書いているビジュアルエディタ派の方でPost Snippets Plugin(以下PSPに略します)を使わずにいませんか? または、PSPをインストールしているのにも関わらず殆ど使っていない人は宝の持ち腐れと言わざるを得ません。 主にビジュアルエディタで投稿記事を作成されている方はPSPを使うことで効率的に投稿記事が書けるようになると思います。 

ネットではPSPの事例があまり無く、今回ご紹介するPSPの事例がヒントになればと思います。

 

注意ポイント

Post Snippets Plugin(以下PSPに略します)の詳細やインストール方法は、ネットでググると沢山紹介されていますのでそちらを参考にしてください。 

今回の事例紹介は、PSPの管理画面(下の画面)で、項目についての説明になります。

なお、PSPの設定画面の上に「Options」というタグを開いた時、「Exclude from Custom Editors」(カスタムエディターから除外する)かの選択にレ点は入れていません。(レ点を入れても入れなくても変化しませんでしたので)

 

ビジュアルモードで投稿記事の中にHTMLコードを挿入できる

投稿記事を書いていて、Amazon商品リンクなどHTMLコードを挿入したいときがあると思います。 ビジュアルモードでは、HTMLを挿入できず、テキストモードに変更して追加するか、「Paste Raw HTML」プラグイン等を追加しなければいけません。 PSPを使えば、ビジュアルモードのままでHTMLを簡単に埋め込むことができます。 基本は、項目番号snippetは、中括弧の間に変数{変数}を指定するだけ(たった1行)でOKです。

項目番号項目設定内容
タイトル名「HTMLコード挿入」
snippet{htmlコード}
Variables(変数)htmlコード
Shortcode
PHP Code
Descriptionhtmlコードをペーストしてください

以上のPSP設定画面は下の通りで、最後に「Updat snippets」ボタンをクリックして保存します。

 

(事例−1)
「簡単なHTML」コードを投稿記事に挿入してみます。

PSPボタンを押して「HTMLコード挿入」を選択します。

変数(htmlコード)の入力窓に「簡単なHTML」コードをコピペしてInsertボタンを押します。

ポイント

「簡単なHTML」挿入結果は以下のように表示されました。

こんにちは

この表示はpost snippetsで設定した変数(htmlコード)に上記HTMLコードをコピペ入力してビジュアルエディタに挿入しています。

メモ

※PSP変数窓への入力は、HTMLコードをコピペしていますが、当然、HTMLコードを手入力して頂いて構いません。

 

(事例−2)
Amazon商品リンクを投稿記事に挿入してみます。

ポイント

例えば、Amazonアソシエイトから、「カフカのヴィジュアルな語り」の商品リンクコードを取得して記事に挿入してみました。


Amazonのアソシエイトの商品リンク(広告コード)はHTMLのインラインフレームタグ(<iframe>〜</iframe>)で構成されいますので、このコードをコピーして、先程のPSPを呼び出して変数(htmlコード)にペーストすれば、簡単に商品リンクが表示できます。

 

HTMLコードの挿入・応用編 「はてなブログカード」の挿入事例

「はてなブログカード」を利用すると簡単に外部ブログカードを表示することができます。 ただし、「はてなブログカード」は、はてなブログサービスを利用していますので、このサービスが継続して利用することが不明ですので注意を要します。

「はてなブログカード」はインラインフレームタグ(<iframe>〜</iframe>)で構成されブログのURLを指定してブログカードを表示しますので、ブログURLを変数にしてPSPを以下のように設定します。

項目
番号
項目設定内容
タイトル名はてなブログ利用・外部ブログカード
snippet
Variables(変数)リンク先のURL
Shortcode
PHP Code
Descriptionリンク先のURLのURLをペーストする。
(注意)はてなブログ利用しているのでサービス停止の場合あり!

(事例−3)
ブログカードを表示させてみます。

ポイント

例えば当ブログ記事のURLを指定してみました。

変数に(リンク先のURL:
「https://pianoforte32.com/furtwangler_s_eroica-pseudo-stereo-record/」を指定

 

スポンサーリンク

 

ショートコード化の事例 

(事例−4)
CSSをショートコード化して投稿記事に挿入してみます。

項目
番号
項目設定内容
タイトル名CSSの挿入
snippet
Variables(変数)css
Shortcodeレ点を入れる
PHP Code
Descriptioncssコードをショートコードで挿入します。

ポイント

例えば、要素に「四角枠で囲む」簡単なCSSコードを以下の様に設定してみます。

PSPボタンを押して「CSSの挿入」を選択して上記のCSSコードを変数入力欄にペーストして記事に挿入します。 ショートコードはビジュアルモードでは以下の様にに表示されます。(【 】は半角です。)

【CSSの挿入 css="#css{ width:250px;background-color:white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333; }"】

CSSをidで指定していますので、例えば、事例ー1で使用したHTMLコードをdivで囲み、id指定します。(下記)

上記コードをコピーしてPSPの「HTMLコード挿入」の変数にペーストして、記事に挿入するとCSSで指定された内容の通りに表示されます。
下のように、要素背景が白で250pxの四角枠で囲まれまています。

こんにちは

この表示はpost snippetsで設定した変数(htmlコード)に上記HTMLコードをコピペ入力してビジュアルエディタに挿入しています。

 

(事例−5)
複雑なショートコードをマトメてショートコード化する事例

ポイント

続 編で作成した「人気記事を表示させるショートコード」は以下になります。 このショートコードをコピペすれば記事中にもサイドバー内にも配置できます。 ショートコード [ ] 内の、ダブルコーテーション" " で囲まれている値を変更すれば、サムネールの大きさなどの変更も可能です。 (注記:WordpressテーマのAffinger5以外では、CSS等の変更が必要です。)

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

 

PHPのショートコード化の事例

(事例−6)
PHPを使った経過年数計算・ショートコード化の事例

参照
PHPの小技 ブログ記事内の「経過年」表記を自動更新させるには

例えば、『このブログをはじめて4年になります 』などブログ投稿記事内で経過年を表記することが多々あります。  ところが、年月を経て行くと、この経過年に矛盾が生じます。 ブログ管理上この矛盾を訂正する必 ...

この事例は、現在から何年経過しているかを計算表示させます。 PHPですので、サーバーにアクセスされた時点から指定された西暦年月を引き算していますので、アクセス毎に経過年数が自動更新されます。

上記記事のPSPをピックアップ

項目
番号
項目設定内容
タイトル名経過年計算
snippet
Variables(変数)year,month=1 
Shortcodeレ点を入れる
PHP Codeレ点を入れる
Description指定する始点西暦年と月を入力

ポイント

例えば、1960年4月が現在から何年経過しているかを表示できます。

PSPボタンを押して「経過年計算」を選択して変数入力欄に1960年と4月を入力して記事にショートコードを挿入します。

1960年4月は、【経過年計算 year="1960" month="4"】経過しています。 
結果は以下になります。

1960年4月は60年経過しています。

 

「Post Snippets」事例を紹介している当ブログの記事

紹介事例−1

WordPressに『日時』表示。PHPとJavaの使い分け

Javascriptで表示 WordPressのサイドバーなどに『日時』表示したい時がありますよね。 その時に初心者が悩むのがPHPを使うかJavascriptを使うかではないでしょうか? 夫々の言語 ...

日時を表示させると

javaで表示→
PHPで表示→2020年9月29日
18時10分54秒

 

紹介事例−2

Amazonアソシエイトのサーチウィジェット広告を使ってみました。

今まで、このブログはAmazonアソシエイトは、商品リンク(単品広告)だけを使用していて、ウィジェット広告は使用していませんでした。 ウィジェット広告ユニットは6種類あり(2019年8月現在)この中で ...

Amazonのサーチウィジェット広告を表示させると

+ クリック 『wordpress』カタログを見る

 

 

紹介事例−4

おすすめ記事記事をブログカードを2コラム タイル配列で表示します。(2020/5/23 追記)

Affinger5(WordPress )「オススメ記事一覧」のスタイルをカスタマイズする

WordPress テーマのAffinger5は、オススメ記事一覧が簡単に投稿ページの下に表示することが出来ますが、あまりスマートでありません。 独自デザインで、ブログカードをタイルとして2コラム表示 ...

Before Design

このデザインは、AFFINGER5 おすすめ記事一覧」のデフォルトデザインです。

After Design

ブログカードをタイルとして2コラム表示にして独自デザインで作成しました。

 

紹介事例−5

PostSnippesを使った、PHPバージョンを調べる方法です。(2020/5/23 追記)

ロリポップサーバー PHP7.4(CGI版)への移行とPHPバージョンの確認方法

当ブログのレンタルサーバー先であるロリポップは、2020年5月14日 からPHP7.4の提供が開始されました。 このグレードアップで、PHPの処理速度の向上やセキュリティの向上などが図れるとのことで、 ...

ショートコードを記事に挿入してプレビューで確認すると   PHPバージョンが確認できます。

現在のPHP バージョンは、PHP7.4.4 です。

 

以上、Post Snippets Pluginの事例をご紹介しました。 PSPは非常に有用なプラグインだと思いました。

 

スポンサーリンク


〜〜〜〜〜〜〜〜〜〜〜

オススメ記事

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

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