WordPressの独自ショートコードの作り方を解説したいと思います。
私はWEB開発中心に、フロントエンド、サーバーサイド、サーバー構築など経験豊富なエンジニアです。
少しでも分かりやすく解説していきたいと思います。
さて、今回の解説では、グーテンベルクエディタで独自ショートコードを入力すると、引数1と引数2が足し算されるという簡単なものを作ります。
イメージは次のような内容です。
グーテンベルクエディタ:

プレビュー画面:

また、テーマに依存しないように独自プラグインを作成して、この中でショートコードを作成していきます。
それでは行きましょう!
目次
独自プラグインの作成
まず、独自プラグインを用意しましょう。
独自プラグインのフォルダ作成、ファイル作成、プラグインの有効化を行います。
プラグインフォルダの作成
「[worepressルートフォルダ]\wp-content\plugins」フォルダ配下に「short-codes」フォルダを作成します。(フォルダ名は任意です。)

プラグインファイルの作成
次に「short-codes」フォルダ内に「short-code.php」ファイルを作成します。

次から、この「short-code.php」の中にショートコードを書いていきます。
独自ショートコードを記述する
では本題の独自ショートコードを定義しましょう。
次のソースコードを「short-codes.php」にコピペしてください。
<?php /* Plugin Name: ShortCodes Plugin URI: Description: ショートコード集 Version: 1.0.0 Author: NAGA Author URI: https://nagablog.info License: GPLv2 */ /** * 足し算する */ function calcAdd($arg) { // 引数は配列で渡って来るので、自分で振り分ける $left = (int)$arg[0]; $right = (int)$arg[1]; // 足し算の結果を返す return $left + $right; } // ショートコード「calc_add」を定義する add_shortcode('calc_add', 'calcAdd'); ?>
ソースコードの内容
独自プラグインのコメント
「/* Plugin Name: ・・・ */」のコメント部分はWordpress独自プラグインのお決まりなので、この形式で自分の内容を書きます。
calcAdd関数の定義
足し算をする関数「calcAdd」を定義します。
WordPressショートコードの引数はarrayを受け取るように「$arg」を宣言しています。
配列引数「$arg」を自分で「引数1、引数2」に振り分けて足し算したものをreturnします。
add_shortcodeの定義
この「add_shortcode」がWordpressに独自ショートコードを知らせる関数となっています。
グーテンベルクエディタから呼び出す名称「calc_add」を引数1に指定して、先ほど定義した関数「calcAdd」を引数2にセットします。
このままでは独自プラグインは動かないので、次はプラグインの有効化を行います。
独自プラグインの有効化
WordPress管理画面を開いて、プラグイン画面を表示します。
「short-codes.php」のコメントに記載した「Plugin Name: ShortCodes」がプラグイン一覧に出てきますので「有効化」をクリックします。

これで独自ショートコードの準備が完了です。
記事に独自ショートコードを埋め込む
独自ショートコードを利用してみましょう。
グーテンベルクエディタを開いて、ブロックの選択から「ショートコード」を選択します。

今回作成したショートコードに「10、5」の引数を半角スペースで区切って入力します。

この記事を保存して、次はプレビュー画面で確認しましょう!
プレビューで確認
プレビュー画面で確認します。

「10 + 5 = 15」になりますので「15」が表示されます。
まとめ
WordPress独自ショートコードの作成について次の内容で解説しました。
- 独自プラグインの作成(フォルダ、ファイルを作成)
- 独自ショートコードを記述する(ソースコードで説明)
- 独自プラグインの有効化
- 記事に独自ショートコードを埋め込む
- プレビューで確認
独自ショートコード内の関数は、多少PHPの知識が必要になりますが、Wordpressの独自ショートコードが作成できると作業効率が上がりますので、色々なショートコードを作ってみてはいかがでしょうか。