WordPress独自ショートコードの作り方(プラグイン未使用)

投稿日: 作成:   更新:

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