【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】ワードプレスのカスタムメニュー機能を使う

WordPressではバージョン3.0より、管理画面内でメンテナンスができるカスタムメニューの機能が加わりました。WordPressで作成した固定ページや投稿記事のリンクをメニューに反映したり、動的にメニューを構築することができる便利な機能です。今回は、ワードプレスのカスタム...続きを読む

2015.08.18WordPress

焼津おんぱく2018 「No30.焼津のスポットを歩き巡る インスタ映えする写真の撮り方講座」

カメラマンとして、焼津おんぱく2018 「No30.焼津のスポットを歩き巡る インスタ映えする写真の撮り方講座」のプログラムの案内人をしました。 風が強く、雲が少し多い日でしたが、天気にも恵まれ、タイミングにもめぐまれ、参加者さんみんなに楽しんでいただき、焼津の魅力を再発見...続きを読む

2018.02.14フォトギャラリー焼津

画像・動画の素材サイト 「PIXTA」で写真を販売しています

画像・動画の素材サイト 「PIXTA」で写真を販売しています。桜やコスモス、紅葉など自然の花々、風景を中心に公開中です。 また、写真撮影のご依頼も受け付けておりますので、ホームページや各種印刷物にて写真が必要になる場合は、お気軽にご相談ください。 PIXTA 写...続きを読む

2019.04.15

【CSS】リンクフォーカスを利用したナビゲーションのボタン操作

CSSの{a:hover}を使うとマウスオーバーの操作によって背景の色や画像を変えることができます。ナビゲーションメニューなどによく使われる手法ですが今回は{a:focus}に着目してみました。 {a:focus}はリンクにフォーカスされているとき。クリックされた時やT...続きを読む

2015.02.08CSSHTMLコーディング

ChatGPTで生成するHTMLはなぜ実務で扱いづらいのか ─ HTML / CSS / Bootstrap視点で考える

ChatGPTで生成したHTMLは正しいのか、それとも“たまたま動いているだけ”なのか? ChatGPTで生成したHTML、表示は崩れていない。エラーも出ていない。 それなのに、いまいち腑に落ちない。コードを読むのに時間がかかる。余計なコードが多くて、触るのが...続きを読む

2026.01.05BootstrapCSSHTMLコーディング