Post Snippets Pluginで出来ること（小技・事例集）

2020年1月2日

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

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

注意ポイント

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

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

〜

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

　ー目次ー　

1 ビジュアルモードで投稿記事の中にHTMLコードを挿入できる
2 HTMLコードの挿入・応用編　「はてなブログカード」の挿入事例
3 ショートコード化の事例　
4 PHPのショートコード化の事例
5 「Post Snippets」事例を紹介している当ブログの過去記事

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

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

項目番号	項目	設定内容
①	タイトル名	「HTMLコード挿入」
②	snippet	{htmlコード}
③	Variables（変数）	htmlコード
④	Shortcode	ー
⑤	PHP Code	ー
⑥	Description	htmlコードをペーストしてください

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

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

<h5>こんにちは</h5>
<p>この表示はpost snippetsで設定した変数（htmlコード）に上記HTMLコードをコピペ入力してビジュアルエディタに挿入しています。</p>

1 2	<h5>こんにちは</h5> <p>この表示はpost snippetsで設定した変数（htmlコード）に上記HTMLコードをコピペ入力してビジュアルエディタに挿入しています。</p>

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

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

ポイント

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

こんにちは

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

メモ

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

（事例−２）
Amazon商品リンクを投稿記事に挿入してみます。

ポイント

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

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

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

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

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

項目
番号

項目

設定内容

①

タイトル名

はてなブログ利用・外部ブログカード

②

snippet

<center>
<iframe  src="https://hatenablog.com/embed?url={リンク先のURL}" 
frameborder="0" scrolling="no" 
style="width: 100%; max-width: 500px;">
</iframe>
</center>

frameborder="0" scrolling="no"

style="width: 100%; max-width: 500px;">

</iframe>

</center>

③

Variables（変数）

リンク先のURL

④

Shortcode

ー

⑤

PHP Code

ー

⑥

Description

リンク先のURLのURLをペーストする。
（注意）はてなブログ利用しているのでサービス停止の場合あり！

（事例−３）
ブログカードを表示させてみます。

ポイント

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

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

ショートコード化の事例　

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

項目
番号

項目

設定内容

①

タイトル名

CSSの挿入

②

snippet

<style>{css}</style>

1	<style>{css}</style>

③

Variables（変数）

css

④

Shortcode

レ点を入れる

⑤

PHP Code

ー

⑥

Description

cssコードをショートコードで挿入します。

ポイント

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

#css{
width:250px;
background-color:white; 
padding: 10px; 
margin-bottom: 10px; 
border: 1px solid #333333;
}

#css{

width:250px;

background-color:white;

padding: 10px;

margin-bottom: 10px;

border: 1px solid #333333;

}

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

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

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

<div id="css">
<h5>こんにちは</h5>
<p>この表示はpost snippetsで設定した変数（htmlコード）に上記HTMLコードをコピペ入力してビジュアルエディタに挿入しています。</p>
</div>

<h5>こんにちは</h5>

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

</div>

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

こんにちは

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

（事例−５）
複雑なショートコードをマトメてショートコード化する事例

参照

: 「WordPress Popular Posts」と「Post Snippets」を使って、カテゴリー人気記事をショートコード化する方法
　 WordPress Popular Posts 当サイトは、人気記事が表示出来るプラグインWordPress Popular Posts(以下WPP)でウィジェットを使ってサイドバーに人気記事一覧 ...

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

項目
番号

項目

設定内容

①

タイトル名

＜よく読まれている記事＞

: iPhoneのボイスメモで撮った音を大きく、クリアーにするには
たまたま、外で今まで聞いたことのない、鳥の鳴き声が聴こえたので、ボイスメモで録音...

: アナログ・レコードのここがダメ「CD音質と比較して」
これまでの当ブログ記事（テストレコードなどのブログ）の知見を通して、...

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

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

（事例−６）
PHPを使った経過年数計算・ショートコード化の事例

参照

: PHPの小技　ブログ記事内の「経過年」表記を自動更新させるには
例えば、『このブログをはじめて3年になります』などブログ投稿記事内で経過年を表記することが多々あります。　ところが、年月を経て行くと、この経過年に矛盾が生じます。　ブログ管理上この矛盾を訂正する必 ...

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

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

項目
番号

項目

設定内容

①

タイトル名

経過年計算

②

snippet

$a ='{year}' ;
$b = '{month}';
if ( $a == ""  ) { $a=0 ; }  //引数の空をチェック
if ( $b == ""  ) { $b=0 ; } //引数の空をチェック
echo intval ( (date('Y') +  date('m')  / 12 ) - ($a + $b / 12 )   ) . "年"; //月を年に変換、 整数へ変換[現在年 - 始点の年]

$a ='{year}' ;

$b = '{month}';

if ( $a == "" ) { $a=0 ; } //引数の空をチェック

if ( $b == "" ) { $b=0 ; } //引数の空をチェック

echo intval ( (date('Y') + date('m') / 12 ) - ($a + $b / 12 ) ) . "年"; //月を年に変換、整数へ変換[現在年 - 始点の年]

③

Variables（変数）

year,month=1　

④

Shortcode

レ点を入れる

⑤

PHP Code

レ点を入れる

⑥

Description

指定する始点西暦年と月を入力

ポイント

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

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

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

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

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

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

日時を表示させると

: Amazonアソシエイトのサーチウィジェット広告を使ってみました。
今まで、このブログはAmazonアソシエイトは、商品リンク（単品広告）だけを使用していて、ウィジェット広告は使用していませんでした。　ウィジェット広告ユニットは６種類あり（2019年8月現在）この中で ...
続きを見る