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

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

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

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

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

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

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

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

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

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

Shortcorderのインストールと設定
Shortcoderの使い方
活用例
インポート・エクスポート
まとめ

Shortcorderのインストールと設定

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

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

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

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

Shortcoderの使い方

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

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

ショートコードの登録

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPress開発者なら目にする機会が多い「ショートコード」。活用シーンは様々ですが、ショートコードについて簡単に説明すると、繰り返し使用する関数や処理、HTMLや文章を予め一塊のコードとして登録しておき、利用時は[]（ブラケット）で囲んだ簡単な短いコードで呼び出して再利用できるようにするための仕組みです。少し大げさに言うと、長くて煩雑なコードで書かれた内容を任意の1行で呼び出せるように…

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

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

図3：Shortcoderのコード作成画面（paramerter埋め込み） — 図3：Shortcoderのコード作成画面（パラメータ埋め込み）

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

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

図4：Shortcoderのコード作成画面（Custom paramerter埋め込み）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

図10：Gutenbergエディタ時の記事編集画面（Classi Paragraph）

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

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