頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

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

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

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

はじめに

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

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

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

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

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

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

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

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

複数行の記述方法

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

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

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

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

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

出力されたHTMLの例

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

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

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

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

参考

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

PHP: nl2br – Manual


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

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

ブログ記事のご紹介
すべて展開 | すべて省略

Rakuten Promotion

ページ
すべて展開 | すべて省略

 - WordPress

  関連記事

eye_wordpress
09.共有-Jetpack by WordPress.com

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

eye_statcounter
StatCounter無料アクセス解析の利用にStatCounter_v1.6.5-wordpressプラグインを利用

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

eye_wordpress
20.モバイル用テーマ-Jetpack by WordPress.com

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

eye_wordpress
14.コンタクトフォーム-Jetpack by WordPress.com

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

eye_wordpress
wordpressでテーブルタグの簡易作成方法

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

eye_wordpress
JetPackをWordPress.comアカウント連携せずに利用できる機能

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

eye_wordpress
WordPressのサイドバーにGoogle™サイト内検索(カスタム検索エンジンv2)を設置する方法

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

eye_php
PHPを1行目の[#!php-cgi]を省いて(書かずに)CGI実行する方法

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

eye_amazon
Amazonアソシエイトとwordpressキャッシュプラグインの併用にご注意

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

eye_wordpress
wordpress.comメールアドレスを利用してJetpack by WordPress.comのメール投稿する

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