WordPress

配列を書くと画像タグが出てしまうときの対処法【JIN】

記事内に商品プロモーションを含む場合があります。
フォ吉
フォ吉
JINではボタン1つでソースコードを貼り付けることができて便利なのだが…書いた記事を見てみたら、書いた覚えのない<img>タグが表示されているぞ…
はしこ
はしこ
JINには簡単にランキングを表示できる機能があるんだけど、たまたま貼り付けたコードが、ランキングの画像を出すコードと認識されちゃったみたい

こんにちは、梯はしこです。

今回は当ブログで使用しているWordPressテーマJINに関して起こった事象と解決方法についての備忘録です。

先ほどこんな記事を書きました。

カテゴリーページのタイトルを画像にする方法【JIN】 こんにちは、梯はしこです。 JINのデフォルトでは、カテゴリータイトルがこちらの画像のように表示されます。 ...

記事の中でPHPの配列をJIN標準のコードサンプルを使って表示させたところ、謎の画像タグとして出力されてしまうという事象が発生。

結論としては、カスタマイズ→その他設定から、「ショートコードの[1]系列を無効化する」にチェックを入れればOK。

公式サイトにも記載があったのですが、すっかり見落としていました。

はしこ
はしこ
気が付いたときはそこそこ困りましたが、ちょっと面白い事象だったのでご紹介いたします(笑)
梯はしこのプロフィール

配列の添え字が<img>タグに書き換わっている事象が発生

前回の記事で、JINのカテゴリーページをカスタマイズする記事を書きました。その記事の中で、PHPの配列を表示したのですが、記事を公開したところ、謎の<img>タグが…。

フォ吉
フォ吉
理想
フォ吉
フォ吉
現実

指定されているディレクトリを見に行ったところ、表示されている画像は、これ。

はしこ
はしこ
なんだこの王冠は…

原因はJINのランキング機能のショートコードだった

謎の王冠に置き換わっていたのは、配列の1番目の添え字を意味する[1]。

さてはこれが怪しいぞ…ということで調べたところ、公式サイトに辿り着きました。

はしこ
はしこ
どうやら簡単にランキングを出せる機能のようだ…って、ん!?

引用:JINマニュアル ランキングの作り方

はしこ
はしこ
[1]ランキング1位」ってなってるけど…

引用:JINマニュアル デザイン性に優れた「ランキング」で商品をアピール!サイドバーでも使えます!

フォ吉
フォ吉
あの王冠が輝いている

ランキングショートコードを無効にする設定で解決!

ランキングの王冠を表示するためのショートコードとして[1]が使われていることが判明。解決方法がわからず、エスケープしようとバックスラッシュを追加してみたのですが、変わらず。

はしこ
はしこ
もうショートコードがどこで定義されているのかを調べて何とかするしかないのかしら…
フォ吉
フォ吉
いや、そもそもブログにコードを書く人も少なくなかろう。必ず先人がこの事象を乗り越えているはず

きっと誰かが記事を書いてくれているはず…!と考え、「JIN ショートコード ランキング」で検索したところ、公式マニュアルに解決方法が載っていたのでした。

はしこ
はしこ
冒頭にも記載しましたが、改めて

カスタマイズ→その他設定から、「ショートコードの[1]系列を無効化する」にチェックを入れておけば、配列のコードを貼り付けても問題なく表示されました。

フォ吉
フォ吉
ここのチェックを外してしまうと、また配列の添え字が王冠になってしまうというわけだな
はしこ
はしこ
うっかり外してしまわないように注意せねば
フォ吉
フォ吉
ところでこの設定にしたら、ランキングは作れなくなってしまうのかな?

ここのチェックを入れた場合、ランキングの王冠は別のショートコードに置き換わるため、問題なく王冠を表示することができました。

まとめ

はしこ
はしこ
最初にこの事象を見つけたときは、ちょっと面白いと思ってしまったけど、解決するまでわりと時間がかかったよ…
フォ吉
フォ吉
公式マニュアルにすぐ辿り着ければ一瞬で解決できたな…

何か問題があったときは、最初に公式マニュアルを確認しようと思いました。という当たり前な感想で締めたいと思います。

はしこ
はしこ
終わります!ありがとうございました!
狐小路フォ吉LINEスタンプ発売中
フォ吉
フォ吉
狐小路フォ吉である

突然だが 僕のLINEスタンプが好評(?)発売中である。

万が一にもこの僕に愛着らしき感情を抱いてくれている方がいらしたら、ぜひ下の画像をクリックしてスタンプをチェックしてみていただきたい。

そして願わくば、あなたのLINEを彩ることができたならば…これほど幸いなことはない。

 

フォ吉
フォ吉
よろしくお願い申し上げる