どんなコードかわかるようにコメントアウト機能でメモを取ろう!

みみこみみこ

おかぴーさん、WordPressってカスタマイズした時に「どんなカスタマイズしたかメモ」するような機能ってありませんか?

今カスタマイズしているんですけど、これ何だっけ?的なことが多発しておりまして・・( ̄▽ ̄ ;)はっはっは

おかぴーおかぴー

こんにちは!おかぴーです。

そんな、みみこさんと同じ思いを持つ人のために、WordPressではコメントアウトというメモ機能があります。

正確にいうと、WordPressの機能というよりは「各コーディングルールの中でコメントを残せる書き方」があるという意味になります。

さて、ブログでカスタマイズが多くなってくると必然的にコードが多くなり、どれが何のコードかがわからなくなることがあります。

もう一度この箇所を変更したいと思ったときに、すぐに見つけ出せるようにできた方が楽ですよね。

別の見方をすると、例えば僕がよくサポートをする時、ソースコードの提供するが必要な場合には、「これは〇〇するコードです。」と、なるべくコード上にメモしてお渡ししたりしています。

 

おかぴーおかぴー
ちなみに、もし、あなたがロリポップのサーバーを利用している場合、このメモをコード内に残した状態でコピペしてしまうと、うまく反応しないという事象が起こる可能性があります。相談する際は「何のサーバーを使っているのか?も教えてもらえると助かります!

 

メモを残しておけば、僕でなくてもあなた自身が「変更をしたい・削除したい」といった場合に見つけやすくなりますので、効率的です。

そのために、コード上にメモをつける習慣を付けると、今後カスタマイズを行う際に非常に便利です。

そして、このメモすることをコメントアウトとも言います。

 

コメントアウトとして書いた内容は、ページに表示されることはありません(正確に言うと、コード上にはあるけれど見えないだけです)

「なんか難しそう」と感じる方でも、実はとっても簡単なのでちょっとだけ見てみてね(o^^o)

 

CSSの場合

CSSの場合は、以下の記号で挟むことでメモを取ることができます。

/*   */

↑この記号で伝えたいことを囲みます。

例)h2タグの文字色を赤にしたい場合

h2{
color:red;/*h2タグの文字色を赤にする*/
}

こうすれば、記号で囲んだところがページ上で出ることなく、きちんと内容を残しながらカスタマイズしていくことができます。

 

/*スマホ画面の場合*/
h2{
font-size: 16px;/*文字の大きさをスマホの場合26pxに*/
color:red;/*h2タグの文字色を赤にする*/
}

/*パソコン画面(767px以上)の場合はこっち*/
@media screen and (min-width:767px){
h2{
font-size: 24px;/*文字の大きさを24pxに*/
color:red;/*h2タグの文字色を赤にする*/
}
}

/*スマホ画面の場合*/
h2{
font-size: 16px;/*文字の大きさをスマホの場合26pxに*/
color:red;/*h2タグの文字色を赤にする*/
}

/*パソコン画面(767px以上)の場合はこっち*/
@media screen and (min-width:767px){
h2{
font-size: 24px;/*文字の大きさを24pxに*/
color:red;/*h2タグの文字色を赤にする*/
}
}

/*スマホ画面の場合*/
h2{
font-size: 16px;/*文字の大きさをスマホの場合26pxに*/
color:red;/*h2タグの文字色を赤にする*/
}

/*パソコン画面(767px以上)の場合はこっち*/
@media screen and (min-width:767px){
h2{
font-size: 24px;/*文字の大きさを24pxに*/
color:red;/*h2タグの文字色を赤にする*/
}
}

/*スマホ画面の場合*/
h2{
font-size: 16px;/*文字の大きさをスマホの場合26pxに*/
color:red;/*h2タグの文字色を赤にする*/
}

/*パソコン画面(767px以上)の場合はこっち*/
@media screen and (min-width:767px){
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>
<p></p>
<img src="./images/sample.png" alt="サンプル画像">
</div>

/*  */

↑CSSと同じ囲み方です。

<?php
/*ここにPHPのコードを書き込みます*/
?>
<div>
<p></p>
<img src="./images/sample.png" alt="サンプル画像">
</div>

正直なところ、ワードプレスをカスタマイズするときに、PHPファイルよりも「CSS・HTMLファイル」をカスタマイズすることが多くなる傾向にあるので、「PHPはCSSと同じくらいだ〜」くらいで覚えておけば大丈夫だと思います。

 

ただ、PHPはかなり繊細なファイルだと覚えておいてください。

特に、functions.phpは閉じタグやカンマ「 , 」とかを一つ忘れただけで、画面が真っ白になってしまったりするので、

PHPファイルに限らずですが、カスタマイズするときは必ずバックアップをとっておいてくださいね!

 

タグについて

ここからは、メモではなくそれぞれのタグの構造をお話しします。

書き込むときの注意点ですね。

 

「CSSタグの注意点」

  1.  {  }というタグでカスタム内容を囲います。
  2. 「 color : red ; 」のように、最後に「 ; 」を忘れずに。
    →閉じ忘れるとカスタム内容が反応しません。h2{
    color:red;
    }

 

「HTMLタグの注意点」

  1.   <   > という記号で囲みます。
  2. <div></div>
    →「ディブタグ」と読みます。
    →一つの段落を作る際に使います。
  3. <p></p>
    →「ピータグ」
    →主にテキストを入力する際に使います。
  4. <img src="">
    →「イメージタグ」
    →画像を表示させる際に使います。

WEBページは、これらをレゴブロックのように積み重ねて作られています。

 

「PHPタグの注意点」

  1.  <?php  ?> のように、「 <?php 」と、「 ?> 」で囲みます。
    →こちらも閉じるタグを忘れると反応しません。

 

基本的に、どのタグについても相対するタグで「閉じる」ことを忘れないようにしましょう。

幸い、ワードプレスでコードをカスタマイズする際には、間違った書き方をしていると、エラー文言が出るようになっているので、PHPファイルなんかは間違っていると保存ができないようになっていたりします。

 

CSSファイルでも同様に出ますので、そのときは何かしら書き方が間違えている可能性があります。

エラーが出た際は、一度書き方を確認しましょう!

 

まとめ

 

おかぴーおかぴー
いかがでしたか?
いつどんな内容を変更したかをメモしておくだけで、後々の作業が楽になるものです。

あなたもカスタマイズする際には、メモしておくようにすれば変更内容を簡単に確認できるので作業効率が上がるはずです!

僕のカスタマイズサポートについても、同じようにメモを付けてお渡しすることがあると思いますので、そのままメモごとコピペしてもらえれば大丈夫です!

ではでは!

 

みみこみみこ
なるほど、そんな手があったんですね!
よーし、これからメモしてカスタマイズしやすくしよっと(*^▽^*)

ブログ収益化

>2020/4/5 テーマ「THE THOR」でリニューアル!

2020/4/5 テーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG