WordPressで「電話番号やボタンを複数ページで使い回したい」「クライアントが特定のテキストだけ編集できるようにしたい」という場面、コーディングしているとよく出てきますよね。そんなときに便利なのが Shortcoder プラグインです。コードを書かずにショートコードを作れるので、制作効率がぐっと上がります。
Shortcoderをインストールする
WP管理画面の「プラグイン」→「新規プラグインを追加」から「Shortcoder」と検索すると一番上に表示されます。「今すぐインストール」→「有効化」で完了です。
ZIPファイルで入れる場合
公式サイトからZIPファイルをダウンロードして、管理画面の「プラグイン」→「新規追加」→「プラグインのアップロード」からインストールすることもできます。
Shortcoderの使い方
有効化すると管理画面のメニューに「Shortcoder」が追加されます。「新規追加」からショートコードを作成できます。
エディター内にHTML・テキスト・CSSなど自由に入力できます。作成したショートコードは投稿やテーマファイルで呼び出して使い回せます。
ショートコードの呼び出し方
今回は電話番号とリンクをショートコード化した例で解説します。
テーマファイル（PHPファイル）で使う場合
テーマファイル内に以下のコードを追加してください。
<?php echo do_shortcode('012-345-6789'); ?>"tel" の部分はShortcoderで設定したショートコード名に合わせて変更してください。
WPエディタで使う場合
Gutenbergエディタの場合は「+」ブロック追加ボタンから「Shortcoder」と検索するとブロックが表示されます。
⊕ボタンを押し、検索窓にて「Shortcoder」と検索すると出てきます。
「Select shortcode」ボタンを押して該当のショートコードを選び「挿入」すれば完了です。
躓きやすいポイント
ショートコードが表示されず文字列のまま出てしまう
テーマファイルで使う場合、echo do_shortcode() を使わず直接ショートコードを書いてしまうと文字列がそのまま表示されることがあります。PHPファイルでは必ず do_shortcode() 関数を使って呼び出してください。
ショートコード名に日本語や記号を使った場合
ショートコード名は半角英数字とハイフン・アンダースコアのみ使用することをおすすめします。日本語や特殊文字を使うと正常に動作しないことがあります。
まとめ
Shortcoderを使えば、コードを直接テーマファイルに書かずに共通パーツを管理できるようになります。電話番号・CTAボタン・注意書きなど、複数ページで使い回す要素の管理がシンプルになるので、制作・運用どちらにも役立つプラグインです。ぜひ一度試してみてください。
コーディングでお困りなら、、、
コーディングの実装でお困りの場合は https://coding-shop.net/contact/ こちらよりお問い合わせください。
またコーディングの委託など、お仕事に関するお問い合わせも上記リンクよりお気軽にご連絡ください。
