【WP】オリジナルショートコードの作り方

creating-wordpress-shortcodes

WordPressでは、shortcodes(ショートコード)という簡単な記述で、事前の用意された処理コードを実行することができます。

ショートコードを作成する

ショートコードの作成はPHP関数の基本的な必要になりますが、オリジナルのショートコードは簡単に作成することができます。“Hello, World” を表示するショートコードを例に、作成手順をまとめてみました。

1.テーマファイルの「functions.php」を開く

ショートコードはテーマファイル内の「functions.php」に記述をします。「functions.php」が無い場合は、「functions.php」を作成します。

2.実行する関数を記述する

「functions.php」に“Hello, World” を返す関数を記述します。「hello」と言う名前の関数(function)、処理内容は’Hello, World!’を返す(return)簡単な内容になっています。

function hello() {
    return 'Hello, World!';
}

3.新しいショートコードを作成する

「functions.php」に新しいショートコードを作成するコードを追記します。「add_shortcode」によってコードを作成することができます。

「add_shortcode」の第1引数(hw)がショートコード名、第2引数(hello)が呼び出す関数になっています。

add_shortcode('hw', 'hello');

4.ショートコードを実行する

記事の投稿エディタでHTMLモードにして、ショートコードを記述します。

ショートコードの[hw]を記述すると、Hello, World! が表示されます。

[hw]

引数付のショートコードを作成する

ショートコードに引数を与えて変化ある処理を行うことができます。サンプルコードは記事内の画像を取得するコードです。

サンプルコード

ショートコードの引数を作成する場合は、最初に、関数の第1引数の「$atts」を付け、変数が格納される受け皿を用意します。続けて引数の作成するためにPHP関数の「extract()」を使用します。

サンプルコードの記述において、変数「size」「float」をショートコードで指定した値として扱うことができ、変数の初期値として「thumbnail」「none」が指定されている記述になります。

function sc_postimage($atts, $content = null) {
	extract(shortcode_atts(array(
		"size" => 'thumbnail',
		"float" => 'none'
	), $atts));
	$images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() );
	foreach( $images as $imageID => $imagePost )
	$fullimage = wp_get_attachment_image($imageID, $size, false);
	$imagedata = wp_get_attachment_image_src($imageID, $size, false);
	$width = ($imagedata[1]+2);
	$height = ($imagedata[2]+2);
	return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';
}
add_shortcode("postimage", "sc_postimage");

Link: Sources

サンプルコードの実行

サンプルコードを実行する際に、引数として「size」、「float」の値を利用することができるようになります。

[postimage size="full" float="left"]

関連記事

【WP】管理画面をカスタマイズできるプラグイン「AG Custom Admin」

今回紹介するプラグイン「AG Custom Admin」を使用すると、WordPressの管理画面のログイン、メニュー項目、ダッシュボードなどをカスタマイズできるようになります。 ダッシュボードなど個々にカスタマイズできるプラグインなどはありますが、「AG Custom A...続きを読む

2016.07.08WordPress

2015年のウェブサイトのデザイントレンド

2015年も4月新年度を迎えますね。年度の切り替わるこの時期はウェブサイトのリニューアルも多いと思います。今回は、2015年の注目されるウェブサイトのデザイントレンドをご紹介します。 Startup Framework 「Startup」タイプのウェブサイトは1ページ...続きを読む

2015.03.26WEB

美容室グランディール様折込チラシ制作

富士宮市にある『美容室グランディール』様の折込チラシを制作いたしました。お店で開催されるキャンペーン、お店の基本情報を告知するための折込チラシです。 [gallery link="file" columns="4" ids="725,726"] クライ...続きを読む

2015.03.19チラシ制作美容室

【デザイン】バレンタインカードにぴったりなデザインワークスまとめ

今日は、バレンタインにちなんだカードのデザインワークスをまとめみました。ツールのキットやハウツーが掲載されており実際にカードを作るときの参考にもなります。 Hearts a Flutter ツールキットを組み合わせて制作されたカードです。ハートやリボンの組み合わせがか...続きを読む

2015.02.15インスピレーション

【デザイン】フード&ドリンクのメニューデザインまとめ

先日、レストランの店舗様のWEBサイトやメニュー表、名刺などのデザインワークスを手掛けさせていただくことになりました。 今日は、フードやドリンクのメニューデザインで参考になったデザインワークスのまとめです。 Discover YOUR WAY Cafe - Patra...続きを読む

2015.02.15インスピレーション