WordPress記事でショートコードを活用しよう!プラグインPost Snippetsの使い方

定型文やコード(HTMLやPHP)をショートコード化し、記事に簡単に挿入できるプラグインPost Snippetsを紹介します。

Post Snippetsの基本的な使い方

インストール&有効化

プラグイン「Post Snippets」をインストールします。詳しい方法はこちら>>

http://pulpfingers-com.check-xserver.jp/273

ショートコードを追加する

Post Snippetsをインストール&有効化できたら、
サイドメニューの「設定」→「Post Snippets」を選択します。

「Add New Snippet」をクリックしてください。
「untitled」というタイトルのショートコードが追加されます。

ショートコードを編集する

「untitled」にカーソルを合わせ、右端の三角マークをクリックしてください。

 

編集画面が開きます。

①:鉛筆マークからタイトルを編集します
②:定型文やタグ(HTML、PHP)を入力します。変数を使うことも可能です
③:補足説明は、あれば投稿画面で選ぶ時に分かりやすいです
④:②で変数を使っていれば入力します
⑤:※
Shortcode:ショートコード化したいとき&PHPでコードを書くときにチェック
PHP Code:PHPコードを入力するときにチェック

定型文を登録

定型文やよく使うアフィリエイトのリンクなども同じように登録すると、投稿画面で簡単に挿入できるようになり、便利です。

登録手順

ショートコードの編集画面で下記を入力します。

 

「Update Snippets」をクリックして保存します。

記事の投稿画面で呼び出す

記事の投稿画面に移動します。

ビジュアルエディタの場合】
下記のマークを選択します。

 

テキストエディタの場合】
「Post Snippets」のボタンを選択します。

 

登録したショートコードが表示されます。
選んで「Insert」をクリックすると挿入できます。

 

通常の文章と同じように表示されます。

変数を使う

たとえば「こんにちは、〇〇です。」の名前部分にツイッターアカウントなどのリンクを貼ったショートコードを作成できます。

登録手順

入力項目は下記の通りです。画像下で詳しく説明します。

さきほどの定型文と違うのは②④⑤です。

①タイトル:こんにちは
②定型文:こんにちは、<a href=”{url}” target=”_blank”>{name}</a>です。
③説明:挨拶の定型文
④変数:url,name
⑤Shortcode:チェックを入れる

 
「Update Snippets」をクリックして保存します。

記事の投稿画面で呼び出す

投稿画面でのショートコードの呼び出し方は既出の通りです(詳しくはこちら>>記事の投稿画面で呼び出す)。
 
変数は呼び出し画面から入力することができます。
「Insert」で文中に挿入します。

2度目以降はその前に入力した変数が入りますが、この画面から編集可能です。
 

投稿画面ではこのように表示されます。

 

プレビューで記事を確認すると、このように表示されます。

変数の値をデフォルト設定する

Post Snippetsのショートコード編集画面を開きます。

 
Variablesに変数と値を入力してください。
url=〇〇,name=〇〇」のようになります。

 
「Update Snippets」をクリックして保存します。

記事の投稿画面で呼び出す

投稿画面でのショートコードの呼び出し方は既出の通りです(詳しくはこちら>>記事の投稿画面で呼び出す)。

挿入したいショートコードを選ぶと、すでにurlとnameが入力されています。
「Insert」で文中に挿入してください。

PHPのタグを登録

登録手順

PHPの登録方法はほかのタグとは少し違うので注意してください。

  • 開始タグ「<?php」と終了タグ「?>」は書かない
  • 「Shortcode」と「PHP code」に必ずチェックを入れる

実際の入力画面はこのようになります。

①PHPタグ:echo ‘Hello!’;
②Shortcode:チェックする
③PHP Code:チェックする

 
「Update Snippets」をクリックして保存します。

記事の投稿画面で呼び出す

投稿画面でのショートコードの呼び出し方は既出の通りです(詳しくはこちら>>記事の投稿画面で呼び出す)。
文中に挿入します。

 
投稿画面ではこのように表示されます。

 
プレビューで記事を確認すると、このように表示されます。