みみこおかぴーさん、WordPressってカスタマイズした時に「どんなカスタマイズしたかメモ」するような機能ってありませんか？
今カスタマイズしているんですけど、これ何だっけ？的なことが多発しておりまして・・(￣▽￣ ;)はっはっは
おかぴーそんな、みみこさんと同じ思いを持つ人のために、WordPressではコメントアウトというメモ機能があります。
（WordPressの機能というよりは「各コーディングのルールの中で、コメントを残せる書き方」があるという意味になります）^^
コメントを残す、コメントアウト
ブログでカスタマイズが多くなってくると必然的にコードが多くなり、どれが何のコードかがわからなくなることがあります。
もう一度この箇所を変更したいと思ったときに、すぐに見つけ出せるようにできた方が楽ですよね。
別の見方をすると、例えば僕がよくサポートをする時、ソースコードの提供するが必要な場合には、「これは〇〇するコードです。」と、なるべくコード上にメモしてお渡ししたりしています。
メモを残しておけば、僕でなくてもあなた自身が「変更をしたい・削除したい」といった場合に見つけやすくなりますので、効率的です。
そのために、コード上にメモをつける習慣を付けると、今後カスタマイズを行う際に非常に便利です。
そして、このメモすることをコメントアウトとも言います。
コメントアウトとして書いた内容は、ページに表示されることはありません（正確に言うと、コード上にはあるけれど見えないだけです）
「なんか難しそう」と感じる方でも、実はとっても簡単なのでちょっとだけ見てみてね(o^^o)
CSSの場合
CSSの場合は、以下の記号で挟むことでメモを取ることができます。
/* */
↑この中にコメントを残します。
こうすれば、記号で囲んだところがページ上で出ることなく、きちんと内容を残しながらカスタマイズしていくことができます。
h2{
color:red;/*h2タグの文字色を赤にする*/
}/*スマホ画面の場合*/
h2{
font-size: 16px;/*文字の大きさをスマホの場合26pxに*/
color:red;/*h2タグの文字色を赤にする*/
}
/*パソコン画面（767px以上）の場合はこっち*/
@media (min-width:768px){
h2{
font-size: 24px;/*文字の大きさを24pxに*/
color:red;/*h2タグの文字色を赤にする*/
}
}こんな風に、項目が多くなるときなんかに便利です↑
特に「スマホの場合はこう、パソコンの場合はこう」というような感じで残すのもいいですね。
ただし、メモは必要最小限で残しましょう。メモが多くなると、逆に見づらくなってしまうので。
HTML
今度は、HTMLのメモの残し方です。
<!– –>
↑これで囲みます。
<!– ここから、テキストと画像を入れています –>
<div>
<p>pタグは、基本的にテキストを入れるところです。</p>
<img src=”./images/sample.png” alt=”サンプル画像”>
</div>
<!– ここで終わります –>こうすることで、どこからどこまでが一つの塊なのかがわかるようになります。
PHPの場合
PHPの場合は、CSSと同じ/* */で囲みます。
<?php
/*ここにPHPのコードを書き込みます*/
?>
<div>
<img src=”./images/sample.png” alt=”サンプル画像”>
</div>ワードプレスをカスタマイズするときに、PHPファイルよりも「CSS・HTMLファイル」をカスタマイズすることが多くなる傾向にあるので、
「PHPはCSSと同じくらいだ〜」くらいで覚えておけば大丈夫だと思います。
ただ、PHPはかなり繊細なファイルだと覚えておいてください。
特にfunctions.phpを変更するときは、閉じタグやカンマ「 , 」とかを一つ忘れただけで画面が真っ白になってしまったりするので、
PHPファイルに限らずですが、カスタマイズするときは必ずバックアップをとっておいてくださいね！
タグについて
ここからは、メモではなくそれぞれのタグの構造をお話しします。
書き込むときの注意点ですね。
CSSタグの注意点
- { }というタグで囲む
- 「 color : red ; 」のように、最後に「 ; 」を忘れず書く
→閉じ忘れるとカスタム内容が反応しません。
例）
h2{
color:red;
}HTMLタグの注意点
- < > という記号で囲みます。
例）<div></div>
↑一つの塊を作ります - <p></p>
↑主にテキストを入力する際に使います - <img src=””>
↑画像を表示させる際に使います
WEBページは、これらをレゴブロックのように積み重ねて作られています。
PHPタグの注意点
- <?php ?> のように、「 <?php 」と、「 ?> 」で囲みます。
→こちらも閉じるタグを忘れると反応しません
基本的に、どのタグについても相対するタグで「閉じる」ことを忘れないようにしましょう。
幸い、ワードプレスでコードをカスタマイズする際には、間違った書き方をしていると、エラー文言が出るようになっているので、PHPファイルなんかは間違っていると保存ができないようになっていたりします。
CSSファイルでも同様に出ますので、そのときは何かしら書き方が間違えている可能性があります。
エラーが出た際は、一度書き方を確認しましょう！
まとめ
みみこなるほど、そんな手があったんですね！
よーし、これからメモしてカスタマイズしやすくしよっと(^▽^)
おかぴーいつどんな内容を変更したかをメモしておくだけで、後々の作業が楽になるものです。
あなたもカスタマイズする際には、メモしておくようにすれば変更内容を簡単に確認できるので作業効率が上がるはずです！
僕のカスタマイズサポートについても、同じようにメモを付けてお渡しすることがあると思いますので、そのままメモごとコピペしてもらえれば大丈夫です！
ではでは！
コメント