WP関数：add_shortcode()

この関数の説明

WP関数の add_shortcode() は、ショートコードと、ショートコードが指定された時のコールバック関数を定義します。

投稿文書中にあるショートコードに対応するPHPを実行する時に利用します。

関数

add_shortcode( $shortcode , $func )

パラメータ

$shortcode（文字列）（必須）

投稿の本文から検索するショートコード

$func（関数名）（必須）

ショートコードが見つかった時に実行するコールバック関数

戻り値

この関数は値を返しません。

事例

1.単純なケース（引数がない場合）

①本文中にショートコードを記述します。

【s_code01】

②上記のショートコードを処理するプログラムをfunctions.phpに記述します。

function sumple01(){
	return 'ショートコードを実行しました';
}
add_shortcode('s_code01','sumple01');

又は

function sumple01(){
	ob_start();                                  // バッファスタート
		echo 'ショートコードを実行しました'; // バッファへの書き込み
	return ob_get_clean();                  // コールバック関数終了時に出力
}
add_shortcode('s_code01','sumple01');

③文書が表示される時にショートコードの所でファンクションが実行され下記が表示されます。

ショートコードを実行しました

2.指定したphpファイルを読み込んで実行する（引数がある場合）

①本文中にショートコードを記述します。

【load_sample file='/javascript/animation/show_hide/fade'】

②上記のショートコードを処理するプログラムをfunctions.phpに記述します。

function get_php($atts) {
  ob_start();                                            // バッファリングスタート 
  	get_template_part("/sample/$atts[file]"); // sampleフォルダにある指定ファイルを読み込む
  return ob_get_clean();                            // add_shortcode完了時に上記関数を実行する
}
add_shortcode('load_sample', 'get_php');

又、上記で読み込まれるPHPファイルには下記が定義されています。

<button type='button' class='next06' style='padding:5px 10px;'>次へ</button>
<div class='slide_target' style='position:relative;margin-top:5px;'>
	<img class='img_item06'  style='width:300px;position:absolute;top:0;left:0;' src='https://nw2.mywire.org/wp-content/uploads/2020/12/crown.jpg'>
	<img class='img_item06'  style='width:300px;position:absolute;top:0;left:0;' src='https://nw2.mywire.org/wp-content/uploads/2020/12/alphard.jpg'>
	<img class='img_item06'  style='width:300px;position:absolute;top:0;left:0;' src='https://nw2.mywire.org/wp-content/uploads/2020/12/86.jpg'>
	<img class='img_item06'  style='width:300px;position:absolute;top:0;left:0;' src='https://nw2.mywire.org/wp-content/uploads/2021/12/supra.jpg'>
</div>
<script>
	$(function(){
		var slide_no = 0;
		$('.img_item06').css('display' , 'none');              // 画像を総て非表示にする
		$('.img_item06').eq(slide_no).css('display' , 'block');// 先頭の画像を表示する
		$('.next06').click(function(){
			$('.img_item06').eq(slide_no).hide('fade',2000);// 現在の画像をフェードで非表示(2秒)
			slide_no = slide_no + 1;
			if(slide_no >= 4){slide_no = 0}
			$('.img_item06').eq(slide_no).show('fade',2000);// 次の画像をはフェードで表示(2秒)
		});
	});
</script>

上記のショートコードが実行された結果は下記になります。

次へ