ホーム > ブログ > WordPress > WordPressプラグイン > [Shortcoder]記事作成効率アップ!よく使う定型文をショートコードに登録して簡単に呼び出す方法と使い方【超絶便利】

[Shortcoder]記事作成効率アップ!よく使う定型文をショートコードに登録して簡単に呼び出す方法と使い方【超絶便利】

この記事は約 7 分で読めます。

WordPress開発者なら目にする機会が多い「ショートコード」 。

活用シーンは様々ですが、ショートコードについて簡単に説明すると、繰り返し使用する関数や処理、HTMLや文章を予め一塊のコードとして登録しておき、利用時は[](ブラケット)で囲んだ簡単な短いコードで呼び出して再利用できるようにするための仕組みです。

少し大げさに言うと、長くて煩雑なコードで書かれた内容を任意の1行で呼び出せるようにする魔法のコードです。

ショートコードで埋め込んだ内容は登録元データを修正すれば一括修正を行うことが可能でメンテナンス性も抜群。

一方でショートコードを自前で作成する場合はfunctions.phpの中に記述するのが一般的です。

ただ、セキュリティやコードエラーのリスクから「functions.phpの中は直接さわりたくない」という人も多いはず。

今回ご紹介する「Shortcoder」プラグインを使うと、直接functions.phpを編集することなくショートコードを設定できて、WordPressの投稿や固定ページ内で利用することが可能になります。

Shortcoderでショートコードを登録して、記事作成作業を効率化しましょう。

Shortcorderのインストールと設定

公式のプラグイン配布サイトはこちらになります。
https://ja.wordpress.org/plugins/shortcoder/
星4.9の評価が付いてますね。

プラグイン新規追加ページの右上の検索窓に「Shortcoder」と入力すると、表示されますのでこちらをインストールして有効化してください。

プラグインの名前が直感的で分かりやすく好感が持てます。
Simple is Bestですね。

インストールして有効化が完了すると、管理画面サイドバーの設定メニューの中にShortcoderが表示されるので、早速のこのページに飛んでみましょう。

Shortcoderの使い方

初心者でも安心・簡単の2ステップで利用することが可能です。

それでは早速実践していきましょう。

ショートコードの登録

まずはショートコードの登録を行います。

下記図1はShortcoderの一覧画面です。
画面では既に2つのショートコードが登録されている状態ですが、右上の「Create a new shortcode」をクリックして、ショートコードの作成画面を開きます。

図1:Shortcoderの登録コード一覧画面
図1:Shortcoderの登録コード一覧画面

ショートコードの作成画面は投稿の記事作成画面(テキストエディタ)とほぼ同様のUIとなっており、ブログ記事を書くような感覚で作成することが可能です。

図2:Shortcoderのコード作成画面
図2:Shortcoderのコード作成画面

見るべきポイントは上記図2の赤枠で示した「ショートコードの名前」「ショートコードとして貼り付ける時に利用するコード」「登録内容」の3カ所のみです。

ショートコードの名前に関しては半角英数字で付けるようにしてください。
図2の例だと「copyTheTitleURL」とショートコード名を付けており、
ページ内に貼り付ける際は[sc name="copyTheTitleURL"]とになります。

Shortcode contentの欄に登録したい内容を記述してから、ページ下部にある「Save settings」いわゆる保存ボタンをクリックすると登録が完了します。

意外と保存するのを忘れやすいので注意しましょう。

なお、同じくページ下部にある「Setting」「Visiblity」「Tag」についてはオプション設定になりますが、必要がなければ特にさわる必要はありません。(一時的にショートコードを無効にしたり、デバイスごとに表示/非表示を切り替えたりする設定になります)

以下はShortcoderに先ほど「copyTheTitleURL」として登録した「記事タイトルとURLをコピーするボタン」を実際にショートコードとして記事内に貼り付けた例です。

この記事のタイトルとURLをコピーする

1行のコードを呼び出すだけでボタンが設置できました。

参考までに「記事タイトルとURLをコピーするボタン」についての解説記事のリンクも併せて貼っておきますが、以下のブログカード風リンクもショートコードで挿入しています。
※PHP制御の都合上、Shorcoderは使っていません。

また、ショートコードの登録に際してはHTML/CSS/JSに加えてWordPress独自のパラメータ(記事タイトルやURL、日付など)も利用することが可能です。

パラメータの埋め込み
パラメータを埋め込みたい場合は「Insert shortcode paramerters」ボタンから各種パラメータを参照して埋め込むことができるようになっています。

図3:Shortcoderのコード作成画面(paramerter埋め込み)
図3:Shortcoderのコード作成画面(パラメータ埋め込み)

上記ボタンの例では「WordPress infomation」から「$$title$$」で記事タイトルを、「$$url$$」で記事URLを取得して利用しています。

また、登録した定型パターンの内容を呼び出す以外に独自の引数を設定して、定型+@の形式で呼び出すことも可能となっており、「Custom paramerter」から任意の引数を設定できるようになっています。
手入力する場合は「%%任意の引数%%」(%%で囲う)でパラメータをセットしても同じ意味合いとなります。

図4:Shortcoderのコード作成画面(Custom paramerter埋め込み)
図4:Shortcoderのコード作成画面(Custom paramerter埋め込み)

仮に登録画面内で「%%url%%」「%%text%%」の引数をセットした場合、ショートコードとして使う場合は以下のようになります。

[sc name="shortcode" url="任意のURL" text="任意の文字列"]

定型パターン要素として配置したいけど「リンク先だけ都度違うものを入れたい」「文字だけ入れ替えたい」「CSSクラス名を用途に合わせて変えたい」といった時に「Custom paramerter」を設定しておくことでショートコードに設定した引数に値を渡して反映させることが可能になります。

ショートコードを引数と組み合わせて使うことで更に利便性が向上しますね。

レイアウトに関する装飾やパーツから、定型の文章や段落まで、よく使うパーツはなるべくショートコードに登録して呼び出した方が圧倒的に記事作成効率が上がるので積極的に活用してきたいですね。

記事編集画面からショートコードを挿入

登録したショートコードを実際に記事編集画面から挿入してみましょう。

Shortcoderを有効化すると、記事編集画面に専用のアイコンが表示されるようになります。

図5:記事編集画面(ビジュアルモード)
図5:記事編集画面(ビジュアルモード)
図6:記事編集画面(テキストモード)
図6:記事編集画面(テキストモード)

ビジュアルモードとテキストモードでは若干アイコンの見た目が異なりますが、機能としては同じです。

アイコンをクリックすると「Insert a Shortcode」というショートコードを挿入するためのモーダル画面が表示されます。

図7:記事編集画面(アイコンクリック時のモーダル画面)
図7:記事編集画面(アイコンクリック時のモーダル画面)

表示されている一覧から挿入したいショートコードを選択してクリックすると、「Insert Shortcode」というボタンが表示されますので、こちらをクリックすると挿入完了です。

もちろん直接エディタ内に[sc name="copyTheTitleURL"]とショートコードをタイプしても問題ありません。

ちなみにGutenbergエディタを使っている場合は、ブロックの「ウィジェット > ショートコード」を選択すると、ショートコード用のブロックが表示されますので、こちらからショートコードを挿入します。

図8:Gutenbergエディタ時の記事編集画面(ウィジェット)
図8:Gutenbergエディタ時の記事編集画面(ウィジェット)

通常テキストの段落内でショートコードを挿入しても、ショートコードとして機能するようですが、、、念の為ショートコードウィジェットから挿入した方がよいでしょう。

図9:Gutenbergエディタ時の記事編集画面(ショートコードウィジェット)
図9:Gutenbergエディタ時の記事編集画面(ショートコードウィジェット)

Gutenbergの中でClassic Paragraphを利用する場合はショートコード挿入用のアイコンが表示されます 。

図10:Gutenbergエディタ時の記事編集画面(Classi Paragraph)
図10:Gutenbergエディタ時の記事編集画面(Classi Paragraph)

ちなみにショートコードとして登録した内容は投稿や固定ページの記事編集画面内はもちろん、PHPテンプレートの中でも、どこでも呼び出して使うことが可能です。

※PHP内でショートコードを呼び出す場合は以下の形式になります。
<?php echo do_shortcode(‘[ショートコードの名前]’); ?>

活用例

ショートコード自体は元々あるもので、functions.phpに記述すれば機能としては同じものが実装できます。

ここではShortcoderを上手く活用できそうな例で思いつくものをいくつかピックアップしてみました。

  • ブログを書く時によく使う装飾や定型文を登録して記事作成効率アップ
  • 固定ページにおいて複数箇所で利用するコードを登録して内容を一元管理
  • 固定ページ内のよく変更する箇所をショートコードで管理
  • PHPテンプレートに直接書いていたHTMLコードをショートコードに移設
  • JSの呼び出しコードを登録して再利用可能(引数も渡せる)
  • ページ内に挿入するアドセンスやアフィリエイト広告用のコードを登録

非常に使いやすいShortcoderですが万能ではありません。

ここでひとつ注意点を上げるとするなら、登録編集画面ではPHPは使えません

つまりShortcoder側で用意されているWordPress独自のパラメータ以外のPHPによる制御を必要とするプログラムコードは書けないということです。

とは言え、応用の幅は広いため上手く活用すればメリットを享受できることでしょう。

インポート・エクスポート

Shortcoderにはショートコードをインポート・エクスポートする機能も付いています。

図11:インポート・エクスポートボタン
図11:インポート・エクスポートボタン

Shortcoderに登録したソースコードをtxtファイルとしてローカルでも管理できるという点では便利な機能ですが、いくつか注意点があります。

ひとつめは、日本語文字列は「東京都」⇒「\u6771\u4eac\u90fd」のように「Unicodeエスケープ」された文字列として扱わるという点。

日本語を扱う際はデーコダーなどで変換してUnicodeエスケープ形式で扱うようにしてください。
※日本語のママでインポートすると文字化けした状態になります。

ふたつめの注意点として、インポートするデータを取り込む際に2度確認のアラート画面が表示されます。

図12:インポート画面(確認)
図12:インポート画面(確認)

最初の確認は「OK」で問題ありませんが、2度目に表示される確認は「OK」を選択すると、元からあるデータを含めて全てインポートするデータで上書きしてしまいます

図13:インポート画面(2度目の確認)
図13:インポート画面(2度目の確認)

これを回避して、既存の内容に追加インポートする場合は「キャンセル」の方を選択してください。

英語の文章をよく読めば分かりますが、勢いで2度ともOKを選択しないように注意してくださいね。
※既存への追加インポートではなく、全て上書きして差し替える場合は2度ともOKで問題ありません。

まとめ

今回ご紹介した「Shortcoder」プラグインは導入コストも低く、初心者でも使い方さえ覚えれば十分に活用可能なプラグインです。

サイト運営者やブログ記事の執筆者は使い方を覚えることで記事作成効率が格段に上がるでしょう。

そう言い切れるくらい、便利なプラグインです。

しかしながら、このプラグインを最も有効活用できるのは日々クライアントワークに従事しているウェブ制作会社かもしれません。

クライアントの要望でちょっとした修正や改修対応は日常茶飯事で、時には無茶な要求をされることもあるでしょう。

日々の修正対応やページ作成作業においてShortcoderを上手く活用した設計に落とし込めば、functions.phpを直接さわるリスクもなく、改修が行いやすいメンテナンス性・拡張性の高いサイト運用を可能にしてくれるかもしれません。

使い所をしっかりと見極めて記事作成作業の効率化を図りましょう。

この記事をシェアする
この記事のタイトルとURLをコピーする

この記事を書いた人

永田 健二

石川県金沢市生まれ。大阪育ち。
14年間住んだ東京を離れて、2017年6月より生まれ故郷の金沢に移住。
デザイナー/プログラマーとして数々の制作現場を経て、現在は主にウェブディレクター/マーケティングコンサルタントとして活動中。

ウェブ業界を主戦場にしつつも、北陸地方・石川県の伝統工芸を通じた地方創生や農業をはじめとする第一次産業の新たな価値の創出を目標に掲げて活動しています。
趣味は毎日の食事、地元のスーパー巡り、温泉、ロングウォーキング、ギター。

ご相談・お問い合わせなどありましたら、こちらよりお気軽にお問い合わせください。

関連記事