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は、中括弧の間に変数｛変数｝を指定するだけ（たった１行）でOKです。
| 項目番号 | 項目 | 設定内容 |
| ① | タイトル名 | 「HTMLコード挿入」 |
| ② | snippet | {htmlコード} |
| ③ | Variables（変数） | htmlコード |
| ④ | Shortcode | ー |
| ⑤ | PHP Code | ー |
| ⑥ | Description | htmlコードをペーストしてください |
以上のPSP設定画面は下の通りで、最後に「Updat snippets」ボタンをクリックして保存します。
（事例−１）
「簡単なHTML」コードを投稿記事に挿入してみます。
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 |
| ||
| ③ | Variables（変数） | リンク先のURL | ||
| ④ | Shortcode | ー | ||
| ⑤ | PHP Code | ー | ||
| ⑥ | Description | リンク先のURLのURLをペーストする。 （注意）はてなブログ利用しているのでサービス停止の場合あり！ |
（事例−３）
ブログカードを表示させてみます。
ポイント
例えば当ブログ記事のURLを指定してみました。
変数に（リンク先のURL：）
「https://pianoforte32.com/furtwangler_s_eroica-pseudo-stereo-record/」を指定
スポンサーリンク
ショートコード化の事例
（事例−４）
CSSをショートコード化して投稿記事に挿入してみます。
| 項目 番号 | 項目 | 設定内容 | ||
| ① | タイトル名 | CSSの挿入 | ||
| ② | snippet |
| ||
| ③ | Variables（変数） | css | ||
| ④ | Shortcode | レ点を入れる | ||
| ⑤ | PHP Code | ー | ||
| ⑥ | Description | cssコードをショートコードで挿入します。 |
ポイント
例えば、要素に「四角枠で囲む」簡単なCSSコードを以下の様に設定してみます。
1 2 3 4 5 6 7 | #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指定します。（下記）
1 2 3 4 | <div id="css"> <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をピックアップ
| 項目 番号 | 項目 | 設定内容 | ||
| ① | タイトル名 | 人気記事 表示 | ||
| ② | snippet |
| ||
| ③ | Variables（変数） | name=＜よく読まれている記事＞,cat_id=0,marg_t=0px,marg_b=0px | ||
| ④ | Shortcode | レ点を入れる | ||
| ⑤ | PHP Code | ー | ||
| ⑥ | Description | nameはタイトル名を入力 cat_idはカテゴリid （デフォルトは0で全てカテゴリー記事になる） トップページではmarg_tは10pxに marg_bは-30pxに |
ポイント
例えば、当ブログの人気記事を表示させるショートコードは以下になります。
【人気記事 表示 name="＜よく読まれている記事＞" cat_id="0" marg_t="0px" marg_b="0px"】
＜よく読まれている記事＞
iPhoneのボイスメモで撮った音を大きく、クリアーにするには
たまたま、外で今まで聞いたことのない、鳥の鳴き声が聴こえたので、ボイスメモで録音...
iPhone6SからiPhoneSE2（第２世代）に移行（顛末記）
iPhone6s（64Gモデル）を４年ほど使用しています。 この所、バッテリーの...
アナログ・レコードのここがダメ「CD音質と比較して」
これまでの当ブログ記事（テストレコードなどのブログ）の知見を通して、アナログ・レコー...
PHPのショートコード化の事例
（事例−６）
PHPを使った経過年数計算・ショートコード化の事例
-
PHPの小技 ブログ記事内の「経過年」表記を自動更新させるには
例えば、『このブログをはじめて3年になります 』などブログ投稿記事内で経過年を表記することが多々あります。 ところが、年月を経て行くと、この経過年に矛盾が生じます。 ブログ管理上この矛盾を訂正する必 ...
この事例は、現在から何年経過しているかを計算表示させます。 PHPですので、サーバーにアクセスされた時点から指定された西暦年月を引き算していますので、アクセス毎に経過年数が自動更新されます。
上記記事のPSPをピックアップ
| 項目 番号 | 項目 | 設定内容 | ||
| ① | タイトル名 | 経過年計算 | ||
| ② | snippet |
| ||
| ③ | Variables（変数） | year,month=1 | ||
| ④ | Shortcode | レ点を入れる | ||
| ⑤ | PHP Code | レ点を入れる | ||
| ⑥ | Description | 指定する始点西暦年と月を入力 |
ポイント
例えば、1960年４月が現在から何年経過しているかを表示できます。
PSPボタンを押して「経過年計算」を選択して変数入力欄に1960年と４月を入力して記事にショートコードを挿入します。
1960年４月は、【経過年計算 year="1960" month="4"】経過しています。
結果は以下▼になります。
1960年４月は60年経過しています。
「Post Snippets」事例を紹介している当ブログの記事
紹介事例−１
紹介事例−２
紹介事例−３
紹介事例−４
おすすめ記事記事をブログカードを２コラム タイル配列で表示します。（2020/5/23 追記）
-
レコードのパブリック・ドメイン 目安チェッカーをUPしました。
保有しているレコードがパブリック・ドメインに該当するか？知りたくなる時が希にあります。 「TPP整備法」の発効により、著作権法が改正され、2018年12月30日より著作権の保護期間が50年から70年に ...
Before Design
After Design
紹介事例−５
PostSnippesを使った、PHPバージョンを調べる方法です。（2020/5/23 追記）
-
レコードのパブリック・ドメイン 目安チェッカーをUPしました。
保有しているレコードがパブリック・ドメインに該当するか？知りたくなる時が希にあります。 「TPP整備法」の発効により、著作権法が改正され、2018年12月30日より著作権の保護期間が50年から70年に ...
ショートコードを記事に挿入してプレビューで確認すると PHPバージョンが確認できます。
現在のPHP バージョンは、PHP7.4.4 です。
