WordPressの独自ショートコードを設定し複数行HTMLを出力
2014/11/22
Google or AdMax Promotion(it)
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> |
プロモーション(btm)
Google or AdMax Promotion (it)
さいごに
この出力の方法はヒアドキュメント構文という記述方法を利用して、
改行コードをnl2br()関数にて<br>タグとして出力しています。
こうして複数行を一気に書いてしまってから、
その内容を変数に格納し、ショートコードの戻り値に指定することで、
後から読んでも読みやすい記述が行えます。
ヒアドキュメント構文とnl2br()関数については以下のヘルプに記載されています。
参考
WordPressはWordPress Foundation の登録商標(第5049965号)です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。
*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください
最後までお読みいただきありがとうございました。
アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
AdMax Promotion
関連記事
-
-
18.タイルギャラリー-Jetpack by WordPress.com
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
VaultPress™を利用して別のサイトに復旧(テスト・一時)サイトを構成する手順
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
headタグ挿入にAdd Text To Head(Add Code to Head)-wordpressプラグインを利用
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
ローカル環境へのApache設置
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
Google™AdSenseポリシーを準拠した自ページビューに対する対応
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
サブディレクトリに新規インストールする(した)場合のトップページURLの変更
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
07.メール投稿-Jetpack by WordPress.com
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
WordPressバージョンとJetPackバージョンの対応表
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
Gravatar™プロフィールウィジェットをJetpackを利用して表示する
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
(phpMyAdmin)タイムアウト設定の動作と確認
Google or AdMax Promotion(it) 禁断の機能がau公式 …