WordPressサイトの制作をはじめ、ホームページ制作やWordPressカスタマイズなどを行っている最中は、基本的にはいざという時のために元のファイルをバックアップしておくのが原則ですが、各種カスタマイズの際に、元のソースを該当ファイル内に「機能は無効にするけど、一応残しておく」ということをしておけば、いろいろなことを試すときに便利です。
今回は趣旨を変えまして、WordPressサイトのカスタマイズ・ホームページ制作時に便利な各種コメントアウトについて改めてご紹介します。
html、php、CSSそれぞれ若干コメントアウト方法のルールが異なるため注意が必要です。
カスタマイズ中のコメントアウト
「コメントアウト」とは、htmlやphp、CSSなどの記述をわざと「コメント」化して、ソースコードの機能を無効にしてしまうことです。
Web制作現場のみならず、プログラムを使用するシステム開発現場では大昔からおなじみのこの方法は、もちろんWordPressカスタマイズなどにおいても便利さを発揮します。
「ここからここはコメント」という囲い
理屈としては、htmlやphp、CSSを記述する際に「ここからここはコメント」という囲いをします。これは、コメントアウトだけでなく、「ヘッダー部分の指定はここ」とか「この部分はメールフォーム」など、本当にコメントを残す場合にも使用されています。
ホームページ制作においては、メモ書きとしてのコメントの利用だけでなく、ソースの改変の際に元のソースを参考やバックアップのために残しておくといった使い方をします。
ソースにコメントを残す
/* Separators */
.site-content span + .entry-date:before,
.full-size-link:before,
.parent-post-link:before,
span + .byline:before,
span + .comments-link:before,
span + .edit-link:before,
.widget_twentyfourteen_ephemera .entry-title:after {
content: "\0020\007c\0020";
}
このような感じですね。
こちらはCSSの例ですが、「/* Separators */」がコメント部分です。
CSS /* */ CSS内のコメント [ホームページ制作の装飾プロパティ]
phpのコメントアウト
phpも同様に /* コメント */ でコメントが可能です。
また //コメント でコメントが可能です。
行の先頭に「//」を加えます。
htmlのコメントアウト
htmlの場合は、
<!– –>
<!– ここにコメント –>
こういったコメント機能を使って、該当部分にコメントを加えます。
htmlタグ｜!– – ソース中のコメント [ホームページ制作の基本タグ]
カスタマイズ前のソース部分をコメント化
こうしたコメント機能を使って、カスタマイズ前のソース部分をコメント化してしまい、カスタマイズしたソースコードをその前後あたりに貼り付けると、「コメントアウト」を利用したカスタマイズが可能になります。
特にWordPress管理画面からのカスタマイズの際には便利です。
ただしコメントアウトミスには注意してください。
html、CSSなどでコメントアウトを誤った場合でもレイアウト崩れくらいで済みますが、phpの場合は、コメントアウトがうまくできていないと内部サーバーエラーを起こす原因にもなりますので注意が必要です。
（初回投稿日 2015年12月19日）
