記事本文に入れたショートコードの出力位置がおかしい場合の原因と対処 WordPress

このmisleadブログは、ご覧いただくと分かる通り広告表示を行っております。

広告にはGoogle adsenseを利用しているのですが、実は同じページ内に3つまで表示されることができますが、本サイトでは記事詳細ページが2箇所なので、もう一つ増やしたいと考えていました。

そこでもう一つの広告は、記事本文中の任意の位置に表示させるたいと考えていたので、このタイミングで、「adsenseタグを表示するショートコード」を作りました。

（書き終えた記事の見直し中に、文脈を邪魔しない位置に広告を表示することができるためです）

ところが、いざショートコードを入れてみると「ん？位置が変だぞ？？」と、思っていた位置に広告が表示されない事態が発生しました。

これを解消するために調べたところ、知っているかどうかの問題だったので、本日は備忘録として、ショートコードが思った位置に表示されない場合の原因とその対処について紹介したいと思います。

事象の確認

adsenseのタグだとちょっと長いので、任意の位置に「mislead.jp」を表示するショートコードを作って説明していきます。

（なお、検証サイトはコチラです）

最初に作ったショートコードの関数は以下の通りで、「mislead.jp」をprintで表示させています。

function siteName() {
	print "mislead.jp";
}
add_shortcode('mislead', 'siteName');

これをfunctions.phpに記述し、WordPressの投稿画面で以下の通り登録します。

ご覧の通り、「ショートコードの上のテキスト」「ショートコードの下のテキスト」の間に[mislead]というショートコードを記述していますので、この位置に「mislead.jp」が表示されるはずです。

ところが画面を表示すると、以下の通り、本文の一番上に表示されています。

そこで、原因とその解決方法について調べてみました。

ショートコードの表示位置がおかしい原因

ショートコードがどのタイミングで処理されるのかが重要な要因でした。

実はショートコードは、記事本文を出力する際に実行するフィルター「wp_content」を通る際に処理されます。

そのため、ショートコードの関数で「print」や「echo」で出力していると、このフィルターを通るタイミングで処理されてしまうのです。

う〜ん、フィルターの知識が無いと、原因特定は難しかったかもしれません。

勉強しててよかった！

解消方法

解決するには、先程「print」で出力していた箇所を、「return」 で返してやればOKです。

そのため、先程のショートコードの関数を以下の通り修正します。

function siteName() {
	return "mislead.jp";
}
add_shortcode('mislead', 'siteName');

関数の修正後、記事を確認すると以下の画面の通り、期待した箇所に「mislead.jp」が表示されます。

下のマージンが気になりますが、これはCSSの問題なので、ここでは気にしないこととします（汗）

最後に

PHPも理解できて、WordPressを弄っている方であれば、functions.phpにオリジナルで作った関数を記述していると思います。

まだ駆け出しのエンジニアで、WordPressでテーマを自作すると、今回のようなWordPressならではの問題にぶつかったりしますが、一度理解してしまえばもう同じ問題で悩むことはありません。

オープンソースのため、同じ課題を持った人が個人のブログに備忘録として解決方法を公開しているケースもあったりします。

実際、僕も個人ブログを読んで解決したことがあります。

2017年最初の技術系ネタですが、pay forward的な考えで、今年もブログを書いていこうと思います。

Author：yukio iizuka

フリーランスとしてUX視点で業務支援しています。 HCD-Net認定 人間中心設計専門家 LEGO®︎ SERIOUS PLAY®︎ メソッドと教材活用トレーニング修了認定ファシリテーター Hi-Standard好きです。
http://yukioiizuka.com