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 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
Descriptionnameはタイトル名を入力 cat_idはカテゴリid
(デフォルトは0で全てカテゴリー記事になる)
トップページではmarg_tは10pxに marg_bは-30pxに

ポイント

例えば、当ブログの人気記事を表示させるショートコードは以下になります。
【人気記事 表示 name="<よく読まれている記事>" cat_id="0" marg_t="0px" marg_b="0px"】

<よく読まれている記事>
iPhoneのボイスメモで撮った音を大きく、クリアーにするには

  たまたま、外で今まで聞いたことのない、鳥の鳴き声が聴こえたので、ボイスメモで録音...

アナログ・レコードのここがダメ「CD音質と比較して」

  これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、...

MCカートリッジとMMカートリッジの音質比較

eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードを...

 

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

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

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

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

この事例は、現在から何年経過しているかを計算表示させます。 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」事例を紹介している当ブログの過去記事

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

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

続きを見る

日時を表示させると

 

 

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

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

続きを見る

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

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

 

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

 


スポンサーリンク

〜〜〜〜〜〜〜〜〜〜〜

おすすめ記事

1

  レコードのハイレゾ録音へのヒント(Tips)   ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご ...

2

  これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあ ...

3

CDフォーマットのサンプリング周波数は44.1khzでビット深度は16bitです。 特にビット深度は録音レベルが低下するに伴い音質に問題が生じます。 CDの開発時点では先端技術で市場を席巻しましたが昨 ...

4

年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...

5

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

6

「HAP-Z1ESのDSEEとDSDリマスタリングエンジンの効果検証」(以前のブログ記事)は、 実際のLPレコードからハイレゾ化したリアルサウンドでDSEEを評価したものでした。 今回は、正弦波の組 ...

Copyright© ハイレコのブログ , 2020 All Rights Reserved Powered by AFFINGER5.