KumaTechLab
2020-10-22/2023-05-23

ショートコードの作成方法

ショートコードの作成方法

ショートコードの作成方法を見ていきたいと思います。

投稿や固定ページの中で少々phpを使用した内容をを出力したい場合や、ある程度決まった方で出力する場合に便利です。

ショートコードには2種類あり

ショートコードのみで出力を行う方法

ショートコードで囲った内容にアプローチする方法

です。

どちらのタイプの作成方法も見てみたいと思います。

ショートコードのみで出力を行う方法

まず、ショートコードのみで出力を行うタイプのものです。

[same_category_post num="3"]

現在の投稿とカテゴリーが同じ投稿を3つリストで返すものとします。

上の通りショートコード名と引数を指定しています。

これらを使用できるよう「add_shortcode」で定義します。

add_shortcode( 'same_category_post', function( $atts ) {
	$atts = shortcode_atts( [
		'num' => 5
	], $atts );


	global $post;
	$categories = get_the_category( $post->ID );
	$cat_id = [];
	foreach ( $categories as $category ) {
		$cat_id = $category->term_id;
	}
	$args = [
		'post_type'      => 'post',
		'category__in'   => $cat_id,
		'post__not_in'   => [ $post->ID ],
		'posts_per_page' => $atts['num']
	];


	ob_start();
	$query = new WP_Query( $args );
	echo '<ul>';
	if( $query->have_posts() ) :
		while( $query->have_posts() ) :
			$query->the_post();
	?>
		<li><a href="<?php echo get_the_permalink(); ?>"><?php the_title(); ?></a></li>
	<?php
		endwhile;
	endif;
	wp_reset_postdata();


	return ob_get_clean();
} );

「add_shortcode」に指定する関数では引数を3つとります。

「$atts」・・・ショートコードの引数の配列。

「$content」・・・ショートコードで囲った場合の囲った内容(次で使用します)。

「$shorcode_name」・・ショートコードの名前。

$attsで予期しない引数が指定されないように「shortcode_atts」によって引数を調整しています。

shortcode_attsの引数の一つ目は「調整するための配列」を指定します。

仮に引数が指定されなくてもshortcode_attsの第一引数で指定した値が指定されます。

また、予期しない値が引数が指定された場合でもshortcode_attsのキーにない場合除外することができます。

第2引数は第一引数を上書きする値です。

[same_category_post post_type="foo" num="3"]
//上のコードでショートコードが呼ばれた場合
add_shortcode( 'same_category_post', function( $atts ) {
	$atts = shortcode_atts( [
		'num' => 5
	], $atts );


//$attsは
$atts = [
    'num' => 3
];

ショートコードで囲った内容にアプローチする方法

次にショートコードで囲った内容にアプローチする方法です。

ここでは簡単にショートコードで囲われた内容にマーカー用の「span」タグを付与するものとします。

[marker color="#123456"]マーカーで線をひきます[/marker]

ショートコード側は以下のようになります。

add_shortcode( 'marker', function ( $atts, $content ) {
	$atts = shortcode_atts( [
		'color' => '#333'
	], $atts );


	$span_css = '<span style="background: linear-gradient(transparent 60%,'. $atts['color']. ' 60%)">';


	returnn $span_css. $content. '</span>';
} );

先ほど同様にショートコードの整理を行っています。

ショートコードで囲まれた内容を<span>で囲い、指定されたカラースタイルを付与しています。

さいごに

これでショートコードの仕様ができると思います。

ショートコードでは文字列を返すようにしましょう。

ob_startなど使わずそのまま出力してしまうと、予期しない場所にショートコードの内容が出力されてしまいます。

2020 KumaTechLab.