読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【WordPressでbodyタグにclassが付くのは何のため?】

f:id:wp-lesson:20161029101629j:plain

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 ....">

 
といった感じです。
 
 
これ、一体何のためにあるのかご存知ですか?
 
 
「今表示しているページがどれなのか」
 
 
を、CSSJavaScriptPHPなどのプログラム
で判定できるためにあります。

 
 
例えば、トップページだけは上の方に動画を埋め込むので、
メニューの部分を少し下にずらしたい。というような場合、
 
 
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から本番用のWordPressCSSをコピペすると、
無効になります。
 
 
WordPressは1つ1つが独立したシステムなので、通し番号がずれるからです。
 
 
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
⇒動画と個別添削で学べるオンラインレッスン

自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。

講師実績

業界大手リクルート社が運営する総合学習サイト「おしえるまなべる」
2015年、パソコンジャンルで1位評価
2016年9月「ホームページ作成のツボとコツがゼッタイにわかる本」出版

講師が執筆した本が発売されました!

『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら!