
WordPressで記事を書いているビジュアルエディタ派の方でPost Snippets Plugin(以下PSPに略します)を使わずにいませんか? または、PSPをインストールしているのにも関わらず殆ど使っていない人は宝の持ち腐れと言わざるを得ません。 主にビジュアルエディタで投稿記事を作成されている方はPSPを使うことで効率的に投稿記事が書けるようになると思います。
ネットではPSPの事例があまり無く、今回ご紹介するPSPの事例がヒントになればと思います。
注意ポイント
ー 目次 ー
ビジュアルモードで投稿記事の中にHTMLコードを挿入できる
投稿記事を書いていて、Amazon商品リンクなどHTMLコードを挿入したいときがあると思います。 ビジュアルモードでは、HTMLを挿入できず、テキストモードに変更して追加するか、「Paste Raw HTML」プラグイン等を追加しなければいけません。 PSPを使えば、ビジュアルモードのままでHTMLを簡単に埋め込むことができます。 基本は、項目番号②のsnippetは、中括弧の間に変数{変数}を指定するだけ(たった1行)でOKです。
項目番号 | 項目 | 設定内容 |
① | タイトル名 | 「HTMLコード挿入」 |
② | snippet | {htmlコード} |
③ | Variables(変数) | htmlコード |
④ | Shortcode | ー |
⑤ | PHP Code | ー |
⑥ | Description | htmlコードをペーストしてください |
以上のPSP設定画面は下の通りで、最後に「Updat snippets」ボタンをクリックして保存します。
(事例−1)
「簡単なHTML」コードを投稿記事に挿入してみます。
1 2 |
<h5>こんにちは</h5> <p>この表示はpost snippetsで設定した変数(htmlコード)に上記HTMLコードをコピペ入力してビジュアルエディタに挿入しています。</p> |
ポイント
「簡単な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 | ー | ||
⑥ | 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で指定していますので、例えば、事例ー1で使用した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コードをコピペ入力してビジュアルエディタに挿入しています。
(事例−5)
複雑なショートコードをマトメてショートコード化する事例
ポイント
続 編で作成した「人気記事を表示させるショートコード」は以下になります。 このショートコードをコピペすれば記事中にもサイドバー内にも配置できます。 ショートコード [ ] 内の、ダブルコーテーション" " で囲まれている値を変更すれば、サムネールの大きさなどの変更も可能です。 (注記:WordpressテーマのAffinger5以外では、CSS等の変更が必要です。)
[/] shortcode
[人気記事 表示 name="<よく読まれている記事>" marg_t="0px" marg_b="0px" cat_id="0" numb="3" thumbnail_size="100" chr_number="50"]
-
iPhoneのボイスメモで撮った音を大きく、クリアーにするには
たまたま、外で今まで聞いたことのない、鳥の鳴き声が聴こえたので、ボイスメモで録音...
-
FLACのファイル容量(サイズ)と圧縮率
当サイトでは、通常192khz 24bitのFLACフォーマット(圧縮レベル5)でレコードをハイ...
-
ピュアー音源から見た「MP3、AAC」の音質比較
前回ブログの正弦波の組合せで作ったエイリアシングノイズの無いノコギリ波(ピュアー音源)をViny...
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で表示→ | 2021年1月28日 18時01分34秒 |
紹介事例−2
紹介事例−3
jQuery とPostSnippetsプラグインを併用してスライドボックスに「閉じる」ボタンを実装する方法です。(2020/9/4 追記)
-
-
AFFINGER5のスライドボックスに「閉じる」ボタンを追加する(PostSnippets使用)
WordPress・有料テーマのAffinger5にあるスライドボックスは、コンテンツの表示をトグル動作で展開したり閉じたりできて大変有用なのですが「閉じる」ボタンがありません。 長いコンテンツの場 ...
紹介事例−4
おすすめ記事記事をブログカードを2コラム タイル配列で表示します。(2020/5/23 追記)
-
-
Affinger5(WordPress )「オススメ記事一覧」のスタイルをカスタマイズする
WordPress テーマのAffinger5は、オススメ記事一覧が簡単に投稿ページの下に表示することが出来ますが、あまりスマートでありません。 独自デザインで、ブログカードをタイルとして2コラム表示 ...
Before Design

After Design

紹介事例−5
PostSnippesを使った、PHPバージョンを調べる方法です。(2020/5/23 追記)
-
-
ロリポップサーバー PHP7.4(CGI版)への移行とPHPバージョンの確認方法
当ブログのレンタルサーバー先であるロリポップは、2020年5月14日 からPHP7.4の提供が開始されました。 このグレードアップで、PHPの処理速度の向上やセキュリティの向上などが図れるとのことで、 ...
ショートコードを記事に挿入してプレビューで確認すると PHPバージョンが確認できます。
現在のPHP バージョンは、PHP7.4.12 です。
紹介事例−6
PostSnippesを使った、QRコードを簡単に設置する方法です。(2021/1/5 追記)
-
-
ブログページにQRコードを簡単に設置する方法(WordPressプラグインのPostSnippets利用)
スマホ画面 例えば知り合いに自分のブログページ(Webページ)を教えたい時がありませんか? こんな時にブログページ内にQRコードを設置していれば、知り合いのスマホでQRコードを読み取ることで、簡単に当 ...
ショートコードを記事に挿入してプレビューで確認すると このページ(URL)のQRコードが表示されます。