WordPressの独自ショートコードを設定し複数行HTMLを出力
2014/11/22
WordPress™の投稿本文内に対して埋め込み挿入を行いたいものがあるときに、
投稿本文内では動作しない場合はよくあります。
そんなときに利用すると便利なのがショートコードです。
ショートコードをfunctions.phpに対して定義した際に多くの行のHTMLを出力したい場合もあるでしょう。
そんな複数行を簡単にショートコードで出力する方法をご紹介します。
はじめに
functions.phpの編集やショートコードの埋め込みと聞いて、
面倒くさそうとしりごみしてしまう方もおられるかもしれませんが、
実際にやってみると難しいものではありません。
ショートコードの埋め込みにあたっては、
WordPressの子テーマも合わせて利用するとカスタマイズとは関係のない部分を、
誤って触ってしまうこともなく便利です。
子テーマを利用したfunctions.phpのカスタマイズについては以下でご紹介しています。
WordPressのfunctions.php編集には子テーマを利用
ショートコードの定義と複数行出力
ショートコードを指定して、あらかじめ定義したHTMLなどを、
出力する方法としては以下のようなコードを指定する方法があります。
1 2 3 4 5 6 7 |
<?php function my_shortcode_handler($atts, $content=null) { return '<p>my-shortcodeによって出力されています</p>'; } add_shortcode('my-shortcode', 'my_shortcode_handler'); ?> |
上記のショートコードの詳細については以下でご紹介しています。
WordPressで独自のショートコードをプラグインレスで設定
このショートコードでは[ my-shortcode ]というショートコードを投稿エリアに記述すると、
「my-shortcodeによって出力されています」と出力される単純なものです。
こうしたショートコードから出力される内容には、複数行にわたるHTMLなどを出力したい場合もあるでしょう。
複数行の記述方法
そうした場合には、以下のように記述すると、
大きな内容のショートコード埋め込みも簡単に利用することができるようになります。
1 2 3 4 5 6 7 8 9 10 11 12 |
<?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'); ?> |
このように指定を行うことで、以下のように複数行を、
ショートコードから出力させることができるようになります。
実際にショートコードを埋め込んで表示した例が以下のようになります。
出力されたHTMLの例
1 2 3 |
<p>my_shortcode_htmlによって出力されています<br /> 複数の行にわたるような出力結果であっても、<br /> 自在に出力を行うことができるようになります。</p> |
さいごに
この出力の方法はヒアドキュメント構文という記述方法を利用して、
改行コードをnl2br()関数にて<br>タグとして出力しています。
こうして複数行を一気に書いてしまってから、
その内容を変数に格納し、ショートコードの戻り値に指定することで、
後から読んでも読みやすい記述が行えます。
ヒアドキュメント構文とnl2br()関数については以下のヘルプに記載されています。
参考
WordPressはWordPress Foundation の登録商標(第5049965号)です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。
関連記事
-
印刷をJetpack by WordPress.comで行う動作
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
GoogleAnalyticsの標準アナリティクスコードを取得する(追加)
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
WelCart専用テーマPayPal Vermilionのインストールと有効化手順
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
WordPressのフロントページに「投稿ページ」を指定する意味
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
GoogleAdSense,ウェブマスターツール(WMT)の確認にGoogle Publisher Plugin-v0.1.0Betaを利用
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
wordpressサイトにブックマークアイコン(Favicon/ファビコン)を追加する
Google or AdMax Promotion(cel) 禁断の機能がau公 …
-
wordpress.comメールアドレスを利用してJetpack by WordPress.comのメール投稿する
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
Google+プロフィール(バッジ)をGoogleDevelopers推奨方法で設置する
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
GoogleAnalyticsのユニバーサルアナリティクスコードを取得する(追加)
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
嬉しい悲鳴を伝えてくれるwordpressダッシュボードが可愛い
Google or AdMax Promotion(it) 禁断の機能がau公式 …