WordPressの独自ショートコードを設定し複数行HTMLを出力

2014/03/11 2014/11/22

WordPress™の投稿本文内に対して埋め込み挿入を行いたいものがあるときに、
投稿本文内では動作しない場合はよくあります。

そんなときに利用すると便利なのがショートコードです。
ショートコードをfunctions.phpに対して定義した際に多くの行のHTMLを出力したい場合もあるでしょう。

そんな複数行を簡単にショートコードで出力する方法をご紹介します。

はじめに

functions.phpの編集やショートコードの埋め込みと聞いて、
面倒くさそうとしりごみしてしまう方もおられるかもしれませんが、
実際にやってみると難しいものではありません。

ショートコードの埋め込みにあたっては、
WordPressの子テーマも合わせて利用するとカスタマイズとは関係のない部分を、
誤って触ってしまうこともなく便利です。

子テーマを利用したfunctions.phpのカスタマイズについては以下でご紹介しています。
WordPressのfunctions.php編集には子テーマを利用

ショートコードの定義と複数行出力

ショートコードを指定して、あらかじめ定義したHTMLなどを、
出力する方法としては以下のようなコードを指定する方法があります。

<?php

function my_shortcode_handler($atts, $content=null) {
	return '<p>my-shortcodeによって出力されています</p>';
}
add_shortcode('my-shortcode', 'my_shortcode_handler');
?>

<?php

function my_shortcode_handler($atts, $content=null) {

return 'my-shortcodeによって出力されています';

}

add_shortcode('my-shortcode', 'my_shortcode_handler');

上記のショートコードの詳細については以下でご紹介しています。
WordPressで独自のショートコードをプラグインレスで設定

このショートコードでは[ my-shortcode ]というショートコードを投稿エリアに記述すると、
「my-shortcodeによって出力されています」と出力される単純なものです。

こうしたショートコードから出力される内容には、複数行にわたるHTMLなどを出力したい場合もあるでしょう。

複数行の記述方法

そうした場合には、以下のように記述すると、
大きな内容のショートコード埋め込みも簡単に利用することができるようになります。

<?php
function my_shortcode_html_handler($atts, $content=null) {
$str=<<<eot
<p>my_shortcode_htmlによって出力されています
複数の行にわたるような出力結果であっても、
自在に出力を行うことができるようになります。</p>
eot;
$str=nl2br($str);
	return $str;	
}
add_shortcode('my-shortcode_html', 'my_shortcode_html_handler');
?>

<?php

function my_shortcode_html_handler($atts, $content=null) {

$str=<<<eot

my_shortcode_htmlによって出力されています

複数の行にわたるような出力結果であっても、

自在に出力を行うことができるようになります。

eot;

$str=nl2br($str);

return $str;

}

add_shortcode('my-shortcode_html', 'my_shortcode_html_handler');

このように指定を行うことで、以下のように複数行を、
ショートコードから出力させることができるようになります。

実際にショートコードを埋め込んで表示した例が以下のようになります。

ショートコードによる複数行出力

出力されたHTMLの例

<p>my_shortcode_htmlによって出力されています<br />
複数の行にわたるような出力結果であっても、<br />
自在に出力を行うことができるようになります。</p>

my_shortcode_htmlによって出力されています

複数の行にわたるような出力結果であっても、

自在に出力を行うことができるようになります。

さいごに

この出力の方法はヒアドキュメント構文という記述方法を利用して、
改行コードをnl2br()関数にて タグとして出力しています。

こうして複数行を一気に書いてしまってから、
その内容を変数に格納し、ショートコードの戻り値に指定することで、
後から読んでも読みやすい記述が行えます。

ヒアドキュメント構文とnl2br()関数については以下のヘルプに記載されています。

参考

PHP: 文字列 – Manual #ヒアドキュメント構文

PHP: nl2br – Manual

WordPressはWordPress Foundation の登録商標（第５０４９９６５号）です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。

- WordPress WordPress

: 16.WP.me 短縮 URL－Jetpack by WordPress.com

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: WordPressの独自ショートコードを設定しJavaScriptを出力

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: Pinterest™への共有をJetpack by WordPress.comで行う動作

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: wordpressがエラーとなった場合に最初に確認すべきこと

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: 投稿の前後に任意のタグを挿入にEZ Zenback－wordpressプラグインを利用

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: WordPressに作成される.htaccessの動作を改めて確認しておこう

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: 当サイトもお陰さまでスパムコメント(163data.com.cn)ラッシュ頂きました

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: Googleがプラグインを作るとこうなるのか！直観的IFに脱帽した件（Google Publisher Plugin）

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: ヘッダー・フッターバー表示にはHeader and Footer Commander－wordpressプラグインを利用

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: Welcart e-Commerce_v1.3.15プラグインに商品を登録する

Google or AdMax Promotion(it) 禁断の機能がau公式 …

PREV: WordPressで独自のショートコードをプラグインレスで設定
NEXT: WordPressの独自ショートコードを設定しJavaScriptを出力

WordPressの独自ショートコードを設定し複数行HTMLを出力

はじめに

ショートコードの定義と複数行出力

複数行の記述方法

さいごに

参考

関連記事