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の独自ショートコードが作成できると作業効率が上がりますので、色々なショートコードを作ってみてはいかがでしょうか。