loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
キャプチャ画像
Home > [Wordpress] > 【Wordpress】投稿本文内にコメントアウトを書き込んだらサイトレイアウトが大幅に崩れてしまった原因を探ってみた
この記事は約4分で読めます。

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

投稿日:2013.5.23
更新日:2016.12.27

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

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

追記 -2016.12.27-

バージョンの新しいワードプレスでは標準でコメントアウト機能が使えるようになったみたいです。そのため当ページの方法を試す必要はなくなりました。

ソースにも表示されないコメントアウトのやり方を新たにアップしておきました。

SIRIUSレビューイメージ画像

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

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

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

それが今回の事例です。

 

コメントアウトというのは、
ブラウザには表示させたくないけど、削除しちゃうとまずい場合や目印代わりに 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’);

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

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

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「SWEETY (TCD029)」 

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

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

先頭へ