Featured image of post 【使いこなすと最強】Wordpressでショートコードを作って効率化をしてみた

【使いこなすと最強】Wordpressでショートコードを作って効率化をしてみた

WordPressのショートコード機能の作り方。functions.phpに登録したPHP関数を記事投稿画面から呼び出せるので、動的な処理やHTMLを簡単に挿入できます。クイックタグとの違い、独立型と引数型のサンプルつき♪

1626文字

Wordpressのショートコード機能

What’s?

Wordpressには、標準機能として搭載されているショートコード機能というものがあります。

これは、あらかじめfunctions.phpに登録しておいたPHP関数を、記事投稿画面から呼び出して利用することが出来る機能です。

この機能を使うことで、計算文字列整形を自分でやらずにPHP関数を利用した動的処理簡単に実行することが出来ます。

クイックタグとはどう違う?

Wordpressには、よく使う文章をボタン一つで簡単に挿入するための機能としてクイックタグというものがあることは以前ご紹介致しました。
関連記事 【QuickTagsで効率化】Wordpressのクイックタグをカスタマイズして記事投稿をスピードアップ! 2018/02/23 1391文字 約3分で読めます 副業 Wordpress お小遣い稼ぎ カスタマイズ ブログ

しかし、クイックタグはあらかじめ登録している文字列をそのまま貼り付ける機能となるので、動的処理をした結果を挿入したい!という用途では利用することが出来ません。
あくまで静的な挿入に限られます。

この機能はとても便利

前述の通り、この機能を使うこなすことで複雑なHTML構造を簡単かつ動的に挿入したり数字の計算を行うことが出来るので、記事の作成スピードが格段に上がります!
また、ショートコードの作り方もとても簡単です。

今回はショートコードの作り方をまとめてみましたのでご紹介致します。

手順

[adsense]

前提

ショートコードは使用しているテーマのfunctions.phpを編集することになります。
このファイルが壊れてしまうとWordpressの管理画面が表示されなくなってしまうので必ずバックアップを取った上で作業を行うようにしてください。
また、作業は自己責任でお願い致します。

独立型ショートコード

まずは、単純にテキストを挿入するだけのショートコードを作ってみましょう。
functions.php以下のコードを追記して保存をしてください。

functions.php
function helloWorldShotCode() {
    return "Hello, World!!";
}
add_shortcode('helloWorld', 'helloWorldShotCode');


保存が完了したら、投稿の編集画面テキストビューにて以下のコードを追加してプレビューしてみてください。

テキストビュー
[helloWorld]

すると、以下のようにテキストが表示されたと思います。

これは、Wordpressのadd_shortcode( $tag , $func )という関数を利用しています。

$tagにはテキストエディターで呼び出す際の文字列を指定し、$funcにはfunctions.phpで定義したPHP関数名を指定します。
そして、テキストエディターから[$tag]という形で呼び出すことが可能になっています。

引数型ショートコード

次に、テキストエディターから呼び出す際に値を受け取ってそれを利用して処理を行うショートコードを作ってみましょう。
functions.phpに以下のコードを追記して保存してください。

functions.php
function oldCheckShortCode( $atts ) {
	$atts = shortcode_atts(
		array(
			'old' => NULL,
		), $atts, 'oldCheck' );
		if (is_null($atts['old'] )){
			echo 'oldを指定してください。';
		}elseif($atts['old'] < 20 ){
			return '未成年です。';
		}else{
			return '成年です。';
		}
}
add_shortcode( 'oldCheck', 'oldCheckShortCode' );

保存が完了したら、投稿の編集画面テキストビューにて以下のコードを追加してプレビューしてみてください。

テキストエディター
[oldCheck]

すると、以下のように表示されると思います。

次に以下のように修正してプレビューしてみてください。

テキストエディター
[oldCheck old=18]

すると、以下のようにoldで指定した値を元に判定処理が行われ表示テキストが変わりました。

さらに以下のように修正してプレビューしてみてください。

テキストエディター
[oldCheck old=20]

同じようにoldで指定した値を元に判定が行われ表示テキストが変わりました。

shortcode_atts($defaultArray, $inputArray, $targetShortCode)という関数は、引数を必要としているショートコードで、引数が指定されなかった場合の初期状態の値で上書きするための記述になります。

終わりに

以上のように、PHP関数をエディター画面から呼べるようになるので、複雑な処理を簡単に挿入することが可能になります。

ただ、前述したようにfunctions.phpの編集はリスクが高いことなので、やりすぎないように注意しながらショートコードを使いこなすように心がけて使ってみてください。