WordPressユーザーならコメントアウトを使うシーンは多々あると思います。記事内やテーマファイル内にメモを残したり、一部のソースコードや処理を無効化する際などです。
ただ、コメントアウトする箇所によって書き方が異なるので、使わないと忘れそうにもなりますよね。
そこで今回は、WordPressで使えるコメントアウトの書き方を種類別にまとめてみました。ぜひ参照用としてもご活用ください。今すぐそれぞれの書き方を確認したい方は下記ボタンからジャンプできます。
コメントアウトとは
コメントアウトとは、端的にいうとソースコードを無効化する処理のことです。これではあまりピンと来ないかもしれませんが、WordPressでは下記のような使われ方が一般的です。
- 記事にメモを残す（編集者にだけ見えるメモ）
- ソースコードに説明書きを残す（可読性を上げる）
- ソースコードを消さずに無効化する（いつでも元に戻せる）
記事（HTML）にもメモを残せるので、開発者でない方も覚えておくと役立ちます。
いずれもソースコードを無効化しているため、ブラウザ上に表示されなかったり、ソースコードの説明を書くことができるということです。
CSSのコメントアウトで例えるとこのような感じです。CSSでは「/*」 と「*/」で挟まれている部分がコメントアウトされます。
＜説明文をコメントアウトしている使い方＞
/* スマホ本文の文字サイズ */
@media screen and (max-width: 767px){
body {
font-size: 16px;
}
}↑は、文字列がそのままスタイルシートに読み込まれないように無効化（コメントアウト）している例です。
こういったメモを残しておけば、第三者が見てもなんのための記述なのかすぐに理解できますよね。
＜記述自体をコメントアウトしている使い方＞
/*
@media screen and (max-width: 767px){
body {
font-size: 16px;
}
*/↑は、記述自体を無効化（コメントアウト）している例です。
開発中や検証中など、記述を再利用する可能性がある場合には、記述を残したまま無効化できます。
再利用する場合はコメントアウトの記号を削除するだけです。
コメントアウトは、このようにメモを残したり、記述を残したまま無効化する際に活用できます。
WordPressで使うコメントアウトの種類
先ほどはCSSの例でしたが、WordPressの何をコメントアウトするかによって書き方が異なるので、以下でそれぞれ解説いたします。ざっくり分けると記事編集画面内でコメントアウトするケースと、開発者がテーマファイル内でコメントアウトするケースがあります。
記事編集画面でよく使うコメントアウト
WordPressの記事編集画面では、主にHTMLをコメントアウトすることが多いのではないでしょうか。記事本文内に編集者向けのメモを残したり、後から追加するバナーや記事リンクを一時的にコメントアウトするケースなどです。HTMLの場合は、下記記号で対象を挟むだけでOKです。
<!-- この部分がコメントアウトされます -->※HTMLのコメントアウトは、ブラウザ上では非表示になりますが、HTMLのソースはだれでも確認（右クリックでソースを表示）できるのでご注意ください。
また、WordPressのエディタによっても使い方が異なりますので、下記を参考にご覧ください。
ブロックエディタ
ブロックエディタでは、「カスタムHTMLブロック」に記号を記載して対象のブロックを挟むことでコメントアウトできます。
これで一部のコンテンツブロックをブラウザ上で非表示にできます。前後のカスタムHTMLブロックを取り除けば、いつでも元に戻せます。
ブロックエディタの使い方については、下記記事をご覧ください。
WordPress5.0以上になるとGutenberg（グーテンベルグ）というブロックエディタが標準搭載されています。以前のクラシックエディタに慣れていた方からすると、UIと操作方法が大きく変更されていて、不便に感じる方も少なくないでしょう。弊社カスタマーサポートにもエディターの仕様に関する問い合わ...
ビジュアルエディタ
クラシックエディタのビジュアルモード（エディタ）では、コメントアウトはできません。ビジュアルエディタはブラウザ上の見え方を再現しているため、コメントアウトが表示されないからです。
テキストエディタ
テキストエディタでは、簡単にコメントアウトが可能です。シンプルにコメントアウトしたい箇所を記号で囲めばOKです。
注意点としては、せっかくテキストエディタでコメントアウトしても、ビジュアルエディタに変更するとコメントアウトされた箇所ごと完全に削除されることです。
テキストディタでコメントアウトした場合は、ビジュアルエディタに変更しないように注意しましょう。クラシックエディタ（ビジュアル/テキスト）について詳しく知りたい方は、下記記事をご覧ください。
WordPressでは、管理画面の投稿や固定ページから記事を投稿・編集できます。 本文の（メインコンテンツ）作成に使用するには、現行のブロックエディタの他にクラシックエディタがあります。クラシックエディタには、ビジュアルとテキストの2つのモードがあります。 ...
テーマファイルでよく使うコメントアウト
WordPressのテーマファイル内では、主にJavaScriptやPHPの他、CSSをコメントアウトする機会が多いです。主に開発者が編集する箇所になりますが、CSSのコメントアウトは、追加CSSやカスタムCSSでも使えるので、ぜひ覚えておきましょう。
CSS
/* この部分がコメントアウトされます。*/JavaScript
/* この部分がコメントアウトされます。
改行も可能です。
*/
//1行だけの場合は、これでもOKです。改行は不可です。PHP
/* この部分がコメントアウトされます。
改行も可能です。
*/
//1行だけの場合は、これでもOKです。改行は不可です。CSSのコメントアウトは、例え1行であっても「//」でコメントアウトできないのでご注意ください。必ず対象を「/* */」で囲む必要があります。JavaScriptとPHPのコメントアウトは同じルールで使えます。
テーマの開発者や、カスタマイズを行った方がメモを残す場合や、一部の機能を一時的に無効化する際などによく使われるコメントアウトの書き方になります。
まとめ
WordPressで使えるコメントアウトの書き方についてご紹介して参りました。
コメントアウトする箇所によって書き方は異なりますが、使い方はほぼ同じです。ブラウザ上に表示されないメモを残したり、一時的に無効化（or 非表示に）しておきたい記述をそれぞれ決まった形で囲むだけです。
どれもさくっと使えると便利なので、ぜひ参照用としてもご活用ください。
コメント