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

関連記事

【JavaScript】カルーセルパネルを手軽に実装できるライブラリ『Owl Carousel』

カルーセル(carousel)とは、回転木馬(メリーゴーランド)や空港の回転コンベアーなどの意味を持つ言葉です。 WEBデザインにおいて、カルーセルは複数の画像やコンテンツなどが配置されくるくる回るように動く仕組みを指します。 今回は、このカルーセルを手軽に実装で...続きを読む

2015.02.10HTMLコーディング

【デザイン】シングルページデザイン海外のクリエイティブWEBサイトまとめ

シングルページデザインは、1ページ内に「お知らせ」「コンセプト」「サービス紹介」「会社概要」「お問い合わせ」などのサイトを構成する一般的な情報をすべて集約したデザインです。従来サイトで、訪問者がページを見て必要な情報が無いと判断して離脱してしまうことを防ぐことから設計されたデ...続きを読む

2015.02.16インスピレーション

LGP(ラッキーガールズプロモーション)様WEBサイト制作

静岡を拠点に活動している『LGP(ラッキーガールズプロモーション)』様のWEBサイトを制作いたしました。ラッキーガールズプロモーション様では、カットモデル・サロンモデル・カメラマン派遣・体験モニター・撮影会・モデルイベント・パーティー企画・変身ビフォーアフター、ホームペー...続きを読む

2015.02.06WEBサイト制作

【フォト】皆既月食「スーパー・ブルー・ブラッドムーン」

みなさんは皆既月食ご覧になりましたか? 2018年1月31日の満月は「スーパームーン」として、普段みることができる月よりも大きく光り輝く月をみることができます。さらに、満月が1カ月に2回見られる「ブルームーン」であり、皆既月食のときにみられる「ブラッドムーン」という、月に関する...続きを読む

2018.01.31フォトギャラリー

【WP】ソーシャルブックマークのボタンを追加するプラグイン

WordPressで構築したサイトやブログの記事にソーシャルブックマーク(またはソーシャルメディア)のボタンを追加することができるプラグインをまとめてみました。 ほとんどのプラグインが管理画面のプラグインの検索より探すことができます。 Sharebar 投稿した...続きを読む

2015.02.20WordPress