WordPress HTML内でショートコードが展開されない。なぜ？
WordPressでショートコードを使いこなすと開発の幅も広がり、処理の共通化や複雑な処理の整理など、開発の効率化やメンテナンスのしやすさにつながります。
先日、Wordpress上でコーディングをしていたところ、ショートコードが展開されない事象に遭遇しました。実をいうと、これは初めてではなく、過去にも何回か本事象に遭遇した事があります。
対処方法はわかっていたのですが、今回は本事象について調べてみました。
1.ショートコードとは
あらかじめ「functions.php」などで作っておいたファンクション(関数)を、固定ページや投稿ページなどから呼び出す事ができるWordpressの機能です。
そのため例えば、functions.php内に、共通で使うような関数をあらかじめ宣言しておくと、 固定ページや投稿ページでショートコードの記述をする事で、共通処理を呼び出す事ができます。
例えば以下のような関数です。
1 2 3 4 5 6 7 8 | //----------------------------------------------------------- // url short code // shortcode:[url] //----------------------------------------------------------- add_shortcode('url','homepage_url'); //for Wordpress function homepage_url($atts) { return home_url(); } |
こちらは、ルートドメインのURLを返却する関数で、固定ページや投稿ページで、[url]と記述する事で呼び出す事ができます。[url]がショートコードです。この関数を使うと、開発環境と本番環境でドメインが異なっていたとしても共通化をする事ができます。
例1)Wordpressの固定ページや投稿ページで以下を記述
1 | <img src="[url]/img/pict01.jpg" alt=”写真1”> |
※[url]のショートコードを置くだけで、本番環境、開発環境を意識する事なく、ルートドメインのディレクトリを取得できます。
そのため、このショートコードを使いこなすと、処理の共通化や処理の整理に繋がり開発の効率化やメンテナンスのしやすさに繋がります。
2.Wordpress HTMLでショートコードが展開されない事象に遭遇
今回遭遇したのは、以下の記述において、ショートコードが展開されず、formのactionに[url]がそのまま記述されてしまっていました。
1 | <form action=”[url]/entry-service” method=”post” class=”entry-form”> |
[url]が本来であれば、展開され[url]の部分がルートドメインになるはずでした。
3.HTMLでショートコードが展開されない理由
調査したところ、HTMLの要素内の属性値(今回の場合ですと、action=)のところで、Wordpress本体がショートコードを利用する事を禁止しているようでした。
ネットの記事などを見ると、どうやらWordpressのクロスサイトスクリプティングの脆弱性の修正対応によって、HTMLの要素内の一部の属性値の中で、ショートコードを利用する事が禁止されているようでした。
それにより、今回の事象が発生している事がわかりました。
4.対応方法
HTMLでショートコードが展開されなかった箇所を、ショートコードを許容するように設定する事ができます。
今回の場合では、formタグの属性値actionで起きていましたので、ここの部分でショートコードを許容するように設定する事で、ショートコードを展開する事ができるようになります。
functions.phpに、ショートコードを許容する以下の設定を追加すればOKです。
1 2 3 4 5 6 7 8 | //----------------------------------------------------------- // formタグ内のaction要素でのショートコード([url])を許容する。 //----------------------------------------------------------- add_filter('wp_kses_allowed_html','set_wp_kses_allowed_html', 10, 2 ); function set_wp_kses_allowed_html( $tags, $context ) { $tags['form']['action'] = true; return $tags; } |
以上で、対応は完了です。
WEB DESIGN全てお任せ！ホームページ制作
RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。
「全てお任せ！ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。
運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。
しかもなんと、「全てお任せ！ホームページ制作」は、￥100,000！で提供しております。
本業が忙しい中小企業様に大変ご好評を頂いている商品です。
独自ドメイン取得
サーバー開設＆設定
レイアウト設計
レスポンシブルデザイン
(*1)
検索エンジン最適化
(SEO対策)
場所Maps
お問い合わせフォーム
SSL化
各種SNS連携
運用マニュアル
