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

関連記事

【お名前.com】ドメインの申請が完了できなくなってしまった-解決方法-

WEBサイト(ホームページ)を新しく公開するときは、URLとなるドメインが必要になります。ドメインを取得するために、「お名前.com」のサービスを利用することが多いのですが、申込中にエラーが発生しました。 「お名前.com」で新しいドメインを申込した際に、『カートの内容が変...続きを読む

2018.07.23WEBサイト制作お名前.comドメイン

カフェオールドソーコ様ショップカード制作

富士市でモチモチの生パスタと焼きたてワッフルを楽しむことができる『カフェ オールドソーコ』様のショップカードを制作いたしました。WEBサイトとデザインを合わせて、手書きで可愛らしいデザインにいたしました。お店のシンボルのフクロウもポイントです。 クライアント...続きを読む

2015.02.16名刺・カード制作

【WP】5段階評価ができる「Yet Another Stars Rating」の導入方法

商品などのレビューに評価として星がついているのを見かけることがあると思います。外部からの評価として商品購入の参考にもなります。 今回はWordPress上の記事に5つ星の評価をつけることができるプラグイン「Yet Another Stars Rating」の導入方法をご...続きを読む

2015.04.15WordPress

【フォト】鬼岩寺1月28日「厄除け火渡り」

藤枝にある鬼岩寺。弘法大師が当地の人々を苦しめていた鬼を退治した話にその名前の由来があり、鬼が鋭い爪を研いだといわれる「鬼かき岩」が残っています。 毎年1月28日には厄除け火渡りの行事が行われています。 フォトギャラリー ※写真をクリックすると拡大表示します。 [...続きを読む

2017.01.28フォトギャラリー

【CSS】CSS3で実現するドロップシャドウ効果

画像処理のソフトなどには、文字やオブジェクトに影をつける「ドロップシャドウ」という機能があります。 ボタンや写真などに「ドロップシャドウ」使うことで立体的に表現することができるのでよく使われる効果のひとつです。 画像処理のソフトなどで行う「ドロップシャドウ」効果を...続きを読む

2015.02.09HTMLコーディング