takato（@n8takato）です！
web制作では定期的にコメントアウトを使います。もちろんWordPressでのweb制作も同じです。
しかし、HTMLと同じコメントアウトをWordPressで使用すると、文字化けしてしまいます。
そこで今回は、WordPressで文字化けしないコメントアウトの方法を紹介します。
WordPressでサイト制作をする方は必見です。
この記事でわかること
- WordPressでコメントアウトをする方法
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナーとして勤務
- webデザイナー歴2年目のひよっこ
- web制作現場で学んだことを発信している人
WordPressに関する他の記事はこちら
WordPressの記事内でコメントアウトする方法
結論、WordPressでのコメントアウトは下記の通りになります。
WordPressのコメントアウト
<code>
<!---
コメントアウトしたい文章
--->
</code>
HTMLのコメントアウトとの違いは、「<code>と</code>」で囲ってあげることです。
<code></code>で囲ってあげる理由
HTMLでコメントアウトする際は下記のように実装します。
<!---
コメントアウトしたい文章
--->通常のコードファイルでは上記のコメントアウトで問題無いのですが、WordPressでは「<code></code>」で囲う必要があります。
WordPressで「–」を使用すると、「ー」と読み込まれてしまいます。そうするとWordPress側でエラーと解釈され、文字化けしてしまうのです。
そうならないためにも、コメントアウトの部分を「<code></code>」で囲ってあげる必要があります。
WordPressでcssのコメントアウトする方法
コメントアウトはHTMLだけでなくcssでも行います。
cssのコメントアウトは、WordPressでも同じように行います。
cssのコメントアウト
/*---
ここにコメントアウトしたいcssコードを記入
---*/
cssのコメントアウトは、どのページのcssコードなのかをわかりやすくする際に使用します。
cssのコメントアウトのイメージ
/*--ここからはログインページのコード--*/
.login {
margin-top:3vw;
}
.login-title {
color:#fff;
font-size:3vw;
}共同でサイト制作をする際はこのようなコメントアウトが非常に便利になります。
WordPressでは子テーマにcssを書こう
WordPressでcssを記入する場合、テーマのスタイルシートに記入します。
その際、親テーマではなく子テーマのスタイルシートに記入するようにしましょう。
親テーマにコードを記入すると、テーマ更新の際にコードが上書きされてしまいます。そうならないためにも、子テーマを導入しましょう。
WordPressでweb制作をする際、Lightningのテーマがよく使用されます。Lightningの子テーマは簡単にインストールすることが出来ます。
詳しい方法は別の記事で紹介しています。「Lightningの子テーマを設定する簡単な方法をわかりやすく紹介！」を読んでください。
最後に
この記事ではWordPressでコメントアウトをする方法を紹介しました。
WordPressの記事内でコメントアウトをする際は、<code>タグで囲ってあげることを忘れないでください。
