【WordPress】投稿本文内にコメントアウトを書き込んだらサイトレイアウトが大幅に崩れてしまった原因を探ってみた

Total 799 views
この記事の所要時間は約 4分です。

記事を書いていて
『今日、ここの部分をさらけ出しちゃうとちょっとまずいから一時コメントアウトして非表示にしておこう』なんていうのはよくあることだと思います。(そうでもないか...)

このコメントアウトですが、
ワードプレスの投稿本文内で使うと大変なことになっちゃうってご存知でした?

スポンサーリンク


 

コメントアウトしたらサイトレイアウトがぐちゃぐちゃでした

私は普段、ワードプレスの記事作成には「テキストモード」を使っています。
(実際には「ビジュアルモード」の機能を停止しちゃっているので完全タグ打ち状態です)

タグ打ちだといろんなことができるので楽しいのですが
弊害もたまにあります。

それが今回の事例です。

 

イメージ画像

 

コメントアウトというのは、
ブラウザには表示させたくないけど、削除しちゃうとまずい場合や目印代わりに HTML 上に書いておく部分のことを言います。

HTML の場合は「<!--」「-->」で挟まれた部分が、
CSS であれば「/*」と「*/」で囲まれた部分が
コメントアウトになります。

例えば下のような文があったとします。

<p>サンプル文1</p>
<p>サンプル文2</p>
<p>サンプル文3</p>
<p>サンプル文4</p>
<p>サンプル文5</p>

このうち「サンプル文3」だけを一時的に非表示にしたいと思ったときは
コメントアウトを使って、

<p>サンプル文1</p>
<p>サンプル文2</p>
<!--<p>サンプル文3</p>-->
<p>サンプル文4</p>
<p>サンプル文5</p>

と書きます。

こうすると「サンプル文3」だけが非表示となります。

しかしこれをワードプレスの投稿本文内でやると
「サンプル文3」以下にあるテキストや画像すべてが
一切表示されなくなるというとんでもない事態になっちゃうんです。

以前も同じようなことがあったんですが、
その時は「多分仕様なんだろうな」ぐらいにしか思わなかったので
対策としては「使わないでおこう」というものでした。

しかしこのところコメントアウトをひんぱんに使わざるをえなくなる事情があり、
このままでは仕事にならんということでリキを入れて調べ直したら
ちゃんとありましたよ。

原因と対策が。

 

その原因というのは、ワードプレスのおせっかい機能ってやつらしいです。
(MS Word にも似たようなおせっかい機能がありますね)

それはコメントアウトの前半の「<!--」はなぜかそのままきちんと認識されるんですが、
後半の『-->』だけが自動的に 1個のダッシュに変換されて『->』になり、
さらにダッシュの部分は文字参照というものに強制的に再変換(?)されて
『&#8211;>』となってしまうため
もはやコメントアウトとしての体裁がなくなってしまうというものです。

そのためコメントアウトが終了せず
その中に<div>の終了タグである</div>があった場合はそれもコメント扱いになってしまうので
結果としてレイアウトまで崩れてしまうんですね。

 

実際にソースを見るとよくわかります。下がそのキャプチャ画像です。

キャプチャ画像

文字参照(実態)というのは、たとえば「<」という記号は HTMLでは特殊な意味を持つためそのまま表記してしまうと文字として認識されません。

そのため文字参照を使って(特殊文字とも言います)「&lt;」と書くことで初めて記号ではなく”文字”として認識されるというものです。

ではこれを解消する方法ですが、

「wptexturize() 」という関数が自動変換機能の大元なので
これを無効にする記述を functions.php に記述してやります。

具体的には次の一文を足します。

remove_filter( 'the_content', 'wptexturize' );

これは投稿画面だけで有効な書き方ですので、
タイトル部分にも適用させたい場合はさらに下の文も加筆します。

remove_filter('the_title', 'wptexturize');

ただしダッシュ以外にも
アポストロフィや商標記号といったものも自動的に変換してしまう機能なので
場合によっては不具合が出る可能性もあります。

使用には注意が必要ですね。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)