【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"]

関連記事

公式サイトをリニューアルオープンいたしました

デザインスタジオ・エフの公式WEBサイトをより見やすく、より探しやすくを目指してリニューアルをしました。 制作事例やブログ、私たちのサービスについてご案内いたします。 今後とも引き続きご愛顧のほど、よろしくお願い申し上げます。 ...続きを読む

2015.02.06

【デザイン】フォトグラファーポートフォリオサイト

今回は、フォトグラファーのポートフォリオサイトを集めてみました。サイトごと写真の見せ方に工夫がありますね。 http://www.vivienneballa.com/ Link:http://www.vivienneballa.com/ http://w...続きを読む

2015.02.15インスピレーション

インクジェットプリンタでクリーニング機能を実施しても印刷が汚れてしまう

みなさんはインクジェットプリンタで写真などを印刷したときに、印刷した面がインクで汚れていたという経験はございませんか? 写真などをキレイに印刷するため光沢紙を使ったときにインクの汚れがついてしまうとやりきれない気持ちになります。 印刷した面がインクで汚れてしまう場合、インク...続きを読む

2018.03.05プリンタ印刷

ロリポップの簡単インストールで「WordPress」のインストールに失敗した!?

WEBサイトを構築・公開するために必要となるレンタルサーバー。数あるレンタルサーバーの運営サービスで、価格も手ごろなロリポップを利用する方も多いと思います。ロリポップではWordPressを簡単にインストールすることができますが、簡単インストールの途中で「インストールできませんで...続きを読む

2017.09.17WordPressレンタルサーバロリポップ

藤枝おんぱく『村松八百蔵商店ギャラリー』(5/30)

藤枝駅前の古民家「村松八百蔵商店」を会場に藤枝おんぱくで行われたさまざななプログラムのフォトギャラリーの展示の様子をお届けします。 フォトギャラリー ※写真をクリックすると拡大表示します。 [gallery link="file" columns="4" ids="98...続きを読む

2015.08.17フォトギャラリー