PR

【WordPress】ショートコード作成とプラグイン化の方法を簡単解説

ワードプレスで自作したショートコードをプラグイン化してみましょう。

プラグインの基本の形が分かれば、貼りつけるだけ、
みたいな感じで簡単にできると思います。

ここでは最初にショートコード作成法の基本をサンプルを使って見つつ、続いて実際にそのショートコードをプラグイン化してみます。

ショートコードの事は分かってる!という場合には、
目次の「2. プラグイン化する」から直接見てみてください。

※)ワードプレスのプラグイン作成の基本は以下で解説してます。
【WordPress】プラグイン作成法を分かりやすく解説!

ショートコード作成の基本

まずはショートコードの基本の確認から。

ワードプレスでショートコードを自作するには、
以下の形式で記述するだけになりますね。

PHP
function 関数名A( $属性 ){
  	実行させたいコードを記述
  }

  // WordPressの初期化(init)タイミングでショートコードを安全に登録する
  function jin_register_shortcodes() {
  	add_shortcode( 'ショートコード名', '関数名A' );
  }
  add_action( 'init', 'jin_register_shortcodes' );
Jin Simple Code Block
  • 【関数名】:関数名は他と被らないように付ける
  • 【$属性】:ショートコードの引数が入る連想配列。
    ショートコードで指定する引数がこの$属性に連想配列で引き渡される
    (引数がない場合には省略可)
  • 【ショートコード名】:ショートコードで指定する文字列(名前)

参照)ショートコードAPI(ワードプレス公式)

ここを押さえた上で、実際にプラグイン化してみます。

ショートコードの基本を更に具体的に確認する場合には、
以下のサンプルを見てみてください。

【Sample1】引数がない例

単純に”本日を「年月日」の形式で表示するだけ”、
といった【引数なしのショートコード】を考えてみる。

【想定するショートコード】

Code
[show_today]
Jin Simple Code Block
  • 1)ショートコード名:show_today とした
  • 2)引数:なし
  • 3)ショートコードの結果:「xx年xx月xx日」の形式で本日を表示する

このショートコードを実現するには、例えば以下のようなコードになりますね。

【ショートコードのコード例】

Auto
function jin_shortcode_show_today() {
  	// WordPressのタイムゾーンに合わせた日付取得(wp_date)に変更
  	return wp_date( 'Y年m月d日' );
}

// 安全なタイミング(init)でショートコードを登録する
function jin_register_shortcode_today() {
  	add_shortcode( 'show_today', 'jin_shortcode_show_today' );
}
add_action( 'init', 'jin_register_shortcode_today' );
Jin Simple Code Block
  • 1行目:関数名を「jin_shortcode_show_today」とした(引数無し)
  • 3行目:xxxx年xx月xx日の形式で本日を返す(表示させる)
  • 8行目:ショートコード名(show_today)と、
    それに対して実行する関数名(jin_shortcode_show_today)を書く

(メモ)命名規則(関数名や変数名など)

  • 変数、アクション、関数の名前にはアルファベット小文字を使う。
  • camelCase は使わない
    (複数の単語で命名する場合、単語の区切りを明確にするために単語の先頭を大文字する、という形は使わない)
  • 単語を区切る場合にはアンダースコア( _ )を使う
  • 不必要に変数名を省略しない(分かりやすくするため)

参照)
ワードプレス:PHPコーディング規約(ワードプレス公式)
(⇒「命名規則」より)

関連)
日付と時刻の書式(ワードプレス公式)

【Sample2】引数が1つの例

引数が1つと言えば、芸能人をよく扱うトレンド記事や、
そうでなくても人物のプロフィールを書く場合に良くある「生年月日からの年齢表示」がありますね。

1つの引数(生年月日)を与えることで、
現在の年齢を計算して表示するショートコードを考えてみる。

(これを入れておくと、年が変わった時の記事更新がいらなくて楽!笑)

【想定するショートコード】

Auto
[cal_age ymd="20010102"]
Jin Simple Code Block
  • 1)ショートコード名:cal_age とする
  • 2)引数:ymd(の1つ)のみとする
  • 3)ymd:生年月日の形式を、年(4ケタの西暦)+月(2桁)+日(2桁)とする
  • 4)ショートコードの結果:「xx歳」と「歳」を付けて返す

これを実際のショートコードとして書いてみると
たとえば以下のようになりますね。

【ショートコードのコード例】

Auto
function jin_shortcode_cal_age( $args ) {
  	$a = shortcode_atts(
  		array(
  			'ymd' => 'none',
  		),
  		$args
  	);

  	// 未定義エラー(Warning)を防ぐためissetで存在チェック
  	$birtydate = isset( $a['ymd'] ) ? $a['ymd'] : 'none';

  	if ( 'none' === $birtydate ) {
  		$age = '不明';
  	} else {
  		// 安全で現代的なDateTimeクラスによる年齢計算に刷新
  		try {
  			$b_date = new DateTime( $birtydate );
  			$t_date = new DateTime( wp_date( 'Y-m-d' ) );
  			$interval = $b_date->diff( $t_date );
  			$age = $interval->y . '歳';
  		} catch ( Exception $e ) {
  			$age = '不明';
  		}
  	}

  	return $age;
  }

  // 安全なタイミング(init)で登録
  function jin_register_shortcode_age() {
  	add_shortcode( 'cal_age', 'jin_shortcode_cal_age' );
  }
  add_action( 'init', 'jin_register_shortcode_age' );
Jin Simple Code Block
  • 1行目:
    ショートコードで実行される関数名を「jin_shortcode_cal_age」とし、引数を連想配列「$args」で受け取ります。
  • 2~5行目:
    shortcode_atts() を使って引数をチェックし、結果を配列「$a」に入れます。
  • 10行目:
    現在のPHP環境でエラー(Warning)が出ないよう、isset() を使って引数 ymd の値が安全に存在するかチェックしながら取り出します。
  • 12行目:
    誕生日が指定されていない(初期値のままの)場合には「不明」とします。
  • 14行目~22行目:
    【重要】安全で現代的なDateTimeクラスを使い、現在の年月日(wp_dateで取得)と誕生日の日付を比較して、正確な年齢を計算します。
  • 26行目:
    計算された年齢(xx歳)を画面に返します。
  • 29行目~32行目:
    【重要】WordPressの初期化(init)のタイミングに合わせて、ショートコード名(cal_age)と実行する関数を安全に登録します。

引数が必要なショートコードでは、上の2行目~4行目のように shortcode_atts() を使い、存在しない引数が指定されたり、そもそも引数が無かったりする場合を考慮する必要がある、っていうのがポイントになりますね。

参照)
関数リファレンス/shortcode atts

関連)
日付と時刻の書式(ワードプレス公式)
DateTimeクラス(php公式)

【Sample3】引数が2つ以上の例

引数が2つ以上でも上の例同様 shortcode_atts() を使って、引数のチェックはしっかり行います。

複数の引数を使う場合というと、
例えば、商標系の記事(物販アフィリエイト系の記事)でよくありそうな、

・商品の初回購入価格がxxx円
・2回目以降の価格がyyy円
・最低購入回数といった縛りが3回

みたいな場合、
最低購入回数購入時の合計金額から、
1回あたりの金額(その商品の1つあたりの平均価格)を出す、

といった計算がありますね。

【想定するショートコード】

Auto
[heikin_tanka shokai="980" nikaime="1980" shibari="3"]
Jin Simple Code Block
  • 1)ショートコード名:heikin_tanka とする
  • 2)引数:3つ
    ・shokai(初回のお値段)、
    ・nikaime(2回目以降のお値段)、
    ・shibari(最低購入回数といった縛りの回数)
  • 3)shokai, nikaime, shibari:単純に数値で入れる
  • 4)ショートコードの結果:
    千円以上の場合には「x,xxx円」と3桁区切りの「,」を付け、
    最後に「円」を付けて返す

さて引数が3つになりましたが、引数が1つの場合とやり方は同じで、
実際のコードはたとえば以下のような感じ。

【ショートコードのコード例】

Auto
function jin_shortcode_heikin_tanka( $args ) {
  	$a = shortcode_atts(
  		array(
  			'shokai'  => '0',
  			'nikaime' => '0',
  			'shibari' => '1',
  		),
  		$args
  	);

  	// 各属性を安全に取得(未定義エラー対策)
  	$price1  = isset( $a['shokai'] ) ? $a['shokai'] : '0';
  	$price2  = isset( $a['nikaime'] ) ? $a['nikaime'] : '0';
  	$shibari = isset( $a['shibari'] ) ? $a['shibari'] : '1';

  	if ( $shibari < 1 ) {
  		$heikin = 'shibari は1以上にしてね';
  	} else {
  		$heikin = round( ( $price1 + $price2 * ( $shibari - 1 ) ) / $shibari );
  		$heikin = number_format( $heikin ) . '円';
  	}

  	return $heikin;
  }

  // 安全なタイミング(init)で登録
  function jin_register_shortcode_tanka() {
  	add_shortcode( 'heikin_tanka', 'jin_shortcode_heikin_tanka' );
  }
  add_action( 'init', 'jin_register_shortcode_tanka' );
Jin Simple Code Block
  • 1行目:
    ショートコードで実行される関数名を「jin_shortcode_heikin_tanka」とし、3つの引数を連想配列「$args」で受け取ります。
  • 2行目~9行目:
    shortcode_atts() を使って引数をチェックし、結果を配列「$a」に入れます。
  • 12行目~14行目:
    【重要】現在のPHP環境でエラー(Warning)が出ないよう、isset() を使って、指定された3つの属性(引数)の値が安全に存在するかチェックしながら取り出します。
  • 16,17行目:
    19行目の割り算で「0で割るエラー」が起きないよう、購入回数(shibari)が1未満の場合のエラーチェックを入れておきます。
  • 19行目:
    最低購入回数分を購入したときの平均単価を計算します。(round関数を使って四捨五入)
  • 20行目:
    number_format関数を使って数値を3桁区切り( , )にし、最後に「円」を付けて画面に返します。
  • 26行目~29行目:
    【重要】WordPressの初期化(init)のタイミングに合わせて、ショートコード名(heikin_tanka)と実行する関数を安全に登録します。

参照)
関数リファレンス/shortcode atts

関連)
round関数(php公式)
number_format関数(php公式)

プラグイン化する

作ったショートコードをプラグイン化するのは簡単で、
プラグインの基本形に当てはめればOK。

つまりプラグイン情報ヘッダーに加えて、プラグイン用のコードを追加する、ってことになりますね。

・プラグインの基本形は以下参照
【WordPress】プラグイン作成法とサンプルから有効化まで

プラグイン情報ヘッダーで最低必要なのはプラグイン名称のみですが、
例として、簡単な説明やバージョン、著作者ぐらいも付けて以下のような感じ。

Auto
<?php
/*
Plugin Name: jin-shortcode-sample01
Description: ショートコードのプラグイン化のテストだよ~ん
Version: 0.1
Author: Jinなのだ
*/

// 不正な直接アクセスを防止
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

function 関数名A( $属性 ) {
	実行させたいコードを記述
}

// 安全なタイミング(init)でショートコードを登録する
function jin_register_shortcodes_sample() {
	add_shortcode( 'ショートコード名', '関数名A' );
}
add_action( 'init', 'jin_register_shortcodes_sample' );
?>
Jin Simple Code Block
  • 2行目~7行目:プラグインの情報ヘッダー
    必須は「Plugin Name」のみ。
    ここではおまけとして、Description, Version, Authorも記載。
  • 9行目~12行目:不正アクセスのためのセキュリティ対策(基本
  • 14行目~16行目:実行させたいコードを記述
  • 18行目~21行目:ショートコードの登録

※)情報ヘッダーなどプラグインの基本形はこちらの記事参照

これだけでショートコードもプラグイン化できるなんて、簡単すぎる!

これを基本に、上の方で解説した「ショートコードサンプル1」(引数がない例)をプラグイン化してみると、以下のようになりますね。

【Sample1】プラグイン化(引数がない例)

Auto
<?php
  /*
  Plugin Name: jin-shortcode-sample01
  Description: ショートコードのプラグイン化のテスト(引数がない例)
  Version: 0.1
  Author: Jinなのだ
  */

  // 不正な直接アクセスを防止
  if ( ! defined( 'ABSPATH' ) ) {
  	exit;
  }

  function jin_shortcode_show_today() {
  	// WordPressのタイムゾーンに合わせた日付取得に変更
  	return wp_date( 'Y年m月d日' );
  }

  // 安全なタイミングで登録
  function jin_register_show_today() {
  	add_shortcode( 'show_today', 'jin_shortcode_show_today' );
  }
  add_action( 'init', 'jin_register_show_today' );
  ?>
Jin Simple Code Block
  • 2行目から7行目の情報ヘッダーを適宜変更
  • 14行目~17行目:ショートコードのサンプル1(引数がない例)を貼りつけ

プラグインの情報ヘッダーに加えて、ショートコード用のコードを追加しただけ。

実際にプラグインをインストールすると以下のように表示されます。

情報ヘッダーで設定した以下もしっかり表示されてます。

・プラグイン名(jin-shortcode-sample01)
・簡単な説明(ショートコードのプラグイン化のテスト(引数がない例))
・バージョン(0.1)
・作者(Jinなのだ)

このショートコードの実際の動作を試してみると、以下のようになりますね。

※)ショートコードをコピペで記事中に貼り付けると、
自動的にショートコードブロックに貼り付けられます。
(テスト環境はワードプレス5.8.2:テーマはCocoon))

動作を試した年月日が「2021年11月15日」なので、そのように表示されました。

【Sample2】プラグイン化(引数が1つの例)

Auto
<?php
  /*
  Plugin Name: jin-shortcode-sample02
  Description: ショートコードのプラグイン化のテスト(引数が1つの例)
  Version: 0.1
  Author: Jinなのだよ、ワトソン君
  */

  // 不正な直接アクセスを防止
  if ( ! defined( 'ABSPATH' ) ) {
  	exit;
  }

  function jin_shortcode_cal_age( $args ) {
  	$a = shortcode_atts(
  		array(
  			'ymd' => 'none',
  		),
  		$args
  	);

  	// 未定義エラー(Warning)を防ぐためissetで存在チェック
  	$birtydate = isset( $a['ymd'] ) ? $a['ymd'] : 'none';

  	if ( 'none' === $birtydate ) {
  		$age = '不明';
  	} else {
  		// 安全で現代的なDateTimeクラスによる年齢計算に刷新
  		try {
  			$b_date = new DateTime( $birtydate );
  			$t_date = new DateTime( wp_date( 'Y-m-d' ) );
  			$interval = $b_date->diff( $t_date );
  			$age = $interval->y . '歳';
  		} catch ( Exception $e ) {
  			$age = '不明';
  		}
  	}

  	return $age;
  }

  // 安全なタイミング(init)で登録
  function jin_register_shortcode_age() {
  	add_shortcode( 'cal_age', 'jin_shortcode_cal_age' );
  }
  add_action( 'init', 'jin_register_shortcode_age' );
  ?>
Jin Simple Code Block
  • 2行目から7行目の情報ヘッダーを適宜変更
  • 14行目~40行目:こちらもショートコードのサンプル2(引数が1つの例)を貼りつけただけ

こちらも実際プラグインをインストールして有効すると、
以下のようにプラグインの一覧で表示されます。

プラグイン名から、簡単な説明、バージョン、作者、と、
プラグインの情報ヘッダーで設定した値(文字列)が表示されているのが分かります。

※動作検証時の日付に基づいた年齢や日付が正しく表示されると思います。

【Sample3】プラグイン化(引数が2つ以上の例)

Auto
<?php
  /*
  Plugin Name: jin-shortcode-sample03
  Description: ショートコードのプラグイン化のテスト(引数が2つ以上の例)
  Version: 0.1
  Author: Jinなのだ、これでいいのだ
  */

  // 不正な直接アクセスを防止
  if ( ! defined( 'ABSPATH' ) ) {
  	exit;
  }

  function jin_shortcode_heikin_tanka( $args ) {
  	$a = shortcode_atts(
  		array(
  			'shokai' => '0',
  			'nikaime' => '0',
  			'shibari' => '1',
  		),
  		$args
  	);

  	// 各属性の存在チェックを安全に行う
  	$price1  = isset( $a['shokai'] ) ? $a['shokai'] : '0';
  	$price2  = isset( $a['nikaime'] ) ? $a['nikaime'] : '0';
  	$shibari = isset( $a['shibari'] ) ? $a['shibari'] : '1';

  	if ( $shibari < 1 ) {
  		$heikin = 'shibari は1以上にしてね';
  	} else {
  		$heikin = round( ( $price1 + $price2 * ( $shibari - 1 ) ) / $shibari );
  		$heikin = number_format( $heikin ) . "円";
  	}

  	return $heikin;
  }

  // 安全なタイミングで登録
  function jin_register_heikin_tanka() {
  	add_shortcode( 'heikin_tanka', 'jin_shortcode_heikin_tanka' );
  }
  add_action( 'init', 'jin_register_heikin_tanka' );
  ?>
Jin Simple Code Block
  • 2行目から7行目の情報ヘッダーを適宜変更
  • 14行目~37行目:こちらもショートコードのサンプル3(引数が2つ以上の例)を貼りつけただけ

実際にこのプラグインをインストールして有効化すると、
プラグイン一覧で以下のように表示されます。

プラグインファイル中の情報ヘッダーで設定した値もしっかり表示されてますね。

初回の購入金額を300円、
2回目以降の価格を3,000円、
最低購入回数を3回としたので、
1回あたりの価格の計算は以下になります。

3回合計金額 = 300円(初回)+3,000円×2(2回目、3回目)
= 6,300円。

この3回合計金額を3で割るので、2,100円。

正しく動作できてますね。

【Sample4】複数のショートコードをまとめてプラグイン化

ここまでの例は、1つのショートコードに対してそれをプラグイン化するというもの。

でも1つのプラグインで複数のショートコードを含めたい、
ということもありますね。

この場合には、ここまで見てきたのと同様、
単にその複数のショートコードを入れればOK。

Auto
<?php
  /*
  Plugin Name: Jin ShortCord Samples
  Description: JINのショートコードサンプル集
  Version: 0.1
  Author: JIN
  */

  if ( ! defined( 'ABSPATH' ) ) {
  	exit;
  }

  /* ------------------------------------ *
   * 本日の年月日を表示する
  ------------------------------------ */
  function jin_shortcode_show_today() {
  	return wp_date( 'Y年m月d日' );
  }

  /* ------------------------------------ *
   * 誕生日から年齢を表示する
  ------------------------------------ */
  function jin_shortcode_cal_age( $args ) {
  	$a = shortcode_atts(
  		array(
  			'ymd' => 'none',
  		),
  		$args
  	);
  	$birtydate = isset( $a['ymd'] ) ? $a['ymd'] : 'none';

  	if ( 'none' == $birtydate ) {
  		$age = '不明';
  	} else {
  		try {
  			$b_date = new DateTime( $birtydate );
  			$t_date = new DateTime( wp_date( 'Y-m-d' ) );
  			$interval = $b_date->diff( $t_date );
  			$age = $interval->y . '歳';
  		} catch ( Exception $e ) {
  			$age = '不明';
  		}
  	}

  	return $age;
  }

  /* ------------------------------------ *
   * 初回の価格、2回目以降の価格、購入回数から
   * 1回あたりの価格を計算して表示
  ------------------------------------ */
  function jin_shortcode_heikin_tanka( $args ) {
  	$a = shortcode_atts(
  		array(
  			'shokai' => '0',
  			'nikaime' => '0',
  			'shibari' => '1',
  		),
  		$args
  	);

  	$price1  = isset( $a['shokai'] ) ? $a['shokai'] : '0';
  	$price2  = isset( $a['nikaime'] ) ? $a['nikaime'] : '0';
  	$shibari = isset( $a['shibari'] ) ? $a['shibari'] : '1';

  	if ( $shibari < 1 ) {
  		$heikin = 'shibari は1以上にしてね';
  	} else {
  		$heikin = round( ( $price1 + $price2 * ( $shibari - 1 ) ) / $shibari );
  		$heikin = number_format( $heikin ) . "円";
  	}

  	return $heikin;
  }

  // すべてのショートコードをひとつのinitフックで安全にまとめて登録
  function jin_register_all_shortcodes() {
  	add_shortcode( 'show_today', 'jin_shortcode_show_today' );
  	add_shortcode( 'cal_age', 'jin_shortcode_cal_age' );
  	add_shortcode( 'heikin_tanka', 'jin_shortcode_heikin_tanka' );
  }
  add_action( 'init', 'jin_register_all_shortcodes' );
  ?>
Jin Simple Code Block

複数の自作ショートコードをまとめて1つのプラグインにするには、
単にそれらショートコードをまとめて記載すればOK。

  • 16行目~18行目:ショートコードSample1を記述
  • 23行目~46行目:ショートコードSample2を記述
  • 52行目~74行目:ショートコードSample3を記述
  • 77行目~81行目:すべてのショートコードを安全にまとめて登録

プラグインファイル内に、単に複数のショートコードの記述を入れてるだけ。
簡単にできますね。^-^)

ショートコードをプラグイン化したら、
実際に動作するかテストしてみてくださいね。
テスト環境を作って試すのがおススメ

プラグインファイルの保存やアップロードの仕方については以下参照。

【WordPress】プラグイン作成法とサンプルから有効化まで

自作プラグインをWordPressにインストールする手順

作成したPHPファイルをWordPressに認識させるには、以下の手順で行うのが最も簡単です。

  1. PC上で新しいフォルダを作り、好きな名前(例:jin-my-shortcode)をつける。
  2. そのフォルダの中に、先ほど作成したPHPファイル(例:jin-shortcode.php)を入れる。
  3. フォルダごと「ZIP形式」で圧縮する
    (jin-my-shortcode.zip が出来る)
  4. WordPress管理画面の「プラグイン > 新規追加 > プラグインのアップロード」から、このZIPファイルを選択してインストールすれば完了!

今回のポイント

ワードプレスで、ショートコードをプラグイン化するには、プラグインの基本形さえ押さえておけば、あとは作ったショートコードのコードを貼りつけるだけで簡単にできますね。

ポイントはプラグインの基本形を押さえておくこと。
(情報ヘッダーを付け、安全性を高めるコードを入れ、初期化タイミングで関数を登録する)

これさえ分かれば、すぐプラグイン化ができると思います。

またブログで収益化をしたい、ブログのスキルをもっと得たい、そのスキルがお金に変わると嬉しいな、などあれば、以下のメルマガにも登録してみてくださいね。

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短で月収10万円稼げるようになる方法 ~

お名前/ニックネーム

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

迷惑メールは一切配信されませんので、ご安心くださいね

自らの手で未来を変える力を手に入れる!

コメント