【WordPressでbodyタグにclassが付くのは何のため？】
WordPressのテーマ（テンプレート）の多くは
各ページのHTMLの冒頭にある body タグに、
たくさんのclassが付くようになっています。
テンプレートを見るとこうなっています。
<body <?php body_class();?>>
body_class() というのはWordPressのシステム
に備わっている独自のPHP関数で、ブラウザで
アクセスしたページの種類や性質をあらわす
キーワードが、class="aaa bbb ccc" のように
列挙されたものに置き換える役目をします。
例えばトップページは、
<body class="home ........">
お問い合わせページは、
<body class="page page-id-18 ....">
といった感じです。
これ、一体何のためにあるのかご存知ですか？
「今表示しているページがどれなのか」
を、CSSやJavaScriptやPHPなどのプログラム
で判定できるためにあります。
例えば、トップページだけは上の方に動画を埋め込むので、
メニューの部分を少し下にずらしたい。というような場合、
CSSで場所をずらせばよいわけですが、
「トップページだけこうする」
という区別をするには何らかの目印がないといけません。
bodyタグは全てのウェブページにおいて最も外側を囲むタグなので、
ここにページ固有のワードがclassとかidで付いていれば、
body.home header nav {margin-top:80px;}
のようにして、トップページだけに適用する
スタイルを定義することができます。
トップページ以外の固定ページなら、
body.page-id-17 header nav {margin-top:20px;}
みたいな感じで実現できます。
この場合、17というのはページのID番号で、
WordPressでページを作ったとき自動的にWordPressが1つ1つのページに別々のID番号を
割り振ります。
このID番号で、WordPressはページを区別しているわけです。
これをもう一歩より使い勝手が良いように改良すると、
body#contact header nav {margin-top:20px;}
のように、ページのID番号ではなくスラッグで
ページごとに適用するCSSを切り替えることができます。
なぜこの方法のほうが良いのかというと、
ページのID番号はWordPressでページを追加したときシステムが自動的に
カウントアップする「通し番号」だからです。
この通し番号はシステムの中で絶対に重複してはいけませんし、変更もできません。
だから、WordPressでサイトを量産したり、
テスト用のWordPressから本番用のWordPressにCSSをコピペすると、
無効になります。
WordPressは１つ１つが独立したシステムなので、通し番号がずれるからです。
CSSの中に、page-id-17 のように通し番号を含んだ記述があると、
別のWordPressではID番号がずれているため効かないのです。
しかし、スラッグはページごとに固有の情報で、
なおかつ通し番号ではありませんので、
スラッグを使ったCSSなら別のWordPressにそのまま移植しても動きます。
そのために、WordPressには、
「いま表示しようとしているページのスラッグをHTMLに変換して出力する」
ためのPHP関数があり、WordPressのそのようなカスタマイズ方法のために、
短い記述が用意されています。
$post->post_name;
HTMLに変換（出力）するには echo を付け、
bodyタグの属性（アトリビュート）として出力するなら esc_attr を通し、
HTMLとして出力するなら esc_html を通す。
これを使えば、
<body class="....." id="contact">
とか、
<body class="....." id="products">
のように、ページごとにスラッグがついた
bodyタグが出力されるようにできます。
このような考え方はWordPressだけでなく
あらゆるウェブページに応用できます。
↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓
【1】CODEMYマンツーマンレッスン
codemy-lesson.office-ing.net⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン
▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
【2】プログラミング講座CODEMY
office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン
自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。
