ちょっとづつ学ぶWordPressテーマの作り方 3 -ヘッダー-

by on with コメントはまだありません

ステップ別にちょっとづつWordPressテーマの作り方を学ぶ本シリーズ。第三回はサイトのヘッダー部分を作る。

 

WordPressテーマ作りの概要

  1. WordPressテーマ開発環境の構築
  2. Webサイトをデザインする
  3. WordPressテーマの雛形を作る
  4. ヘッダーを作る
  5. サイドバーを作る
  6. フッターを作る
  7. トップページを作る
  8. WordPressテーマを動かす

 

WordPressテーマにするBootstrapサイトをおさらい

まずは本シリーズでテーマ化するサイトのおさらい。Bootstrapを使ったベーシックなブログだ。

bootstrap3.3.6-example-blog.png.formatted

 

少し長いけれど（把握しなくてOK）、HTMLはこのようになっている。説明に必要のない部分は削っている。

 

これをヘッダー、記事、サイドバー、フッターに分解してテーマにする。前回作成したテーマの雛形はこうだ。

exampletheme-directory

 

 

ヘッダーを作る

ヘッダー部分をindex.htmlからheader.phpへ移す

まずは上の画像でheaderと書いてあるところを分解する。HTMLのhead要素と、body内のヘッダー部分をheader.phpへ移そう。

 

 

html要素のlang属性の指定

WordPressが用意しているlanguage_attributesを使うことで、html要素のlang属性を言語設定に合わせられる。html要素内部をこのように書き換えよう。

 

ページタイトル

ページのタイトル（home | web-site みたいなやつ）を設定する。

まずはheader.phpのtitle要素を消し、functions.phpにadd_theme_support(‘title-tag’);を記述する。

何やら、add_theme_support以外に色々な登場人物がいる。

まずadd_theme_supportを抱えるexampletheme_setup。これはセットアップ処理をまとめるために独自に作った関数で、テーマの初期化が終わった後に呼ばれるようadd_actionで指示している。もちろん、add_theme_supportをadd_actionに直接登録したっていい。

更にこの関数を括るif文は、子テーマでのカスタマイズを見越している。子テーマで同名の関数が定義された場合に、親テーマのセットアップ処理が走らないようにしているわけだ。

 

CSSの読み込み

テーマのCSSを読み込む

テーマのCSSファイルを読み込むため、head要素内のCSS用のlink要素を消し、functions.phpにwp_enqueue_styleを記述する。これはページにCSSを適用する関数だ。

まずはheader.phpから、テーマCSS読み込み用のこのlink要素を消す。

functions.phpを開き、CSS読み込み処理を記述しよう。title要素を設定した時に書いた登録処理に続いて記述する。

get_stylesheet_uriでテーマのCSSファイル（style.css）のURIを取得し、wp_enqueue_styleにexampletheme-styleで読み込みを指示している。第一引数に指定している『exampletheme-style』はこのCSSのハンドル名だ。あるCSSが他のCSSに依存するとき、この名前を使って依存先を指定することもできる。

ちなみにこの処理は子テーマによる上書きを期待していないため、title要素の時にやったような関数の存在判定はしない。

さて、WordPressテーマにスタイルを適用する設定はできたから、style.cssの中身を書けばここは一段落。シリーズ第二回でダウンロードしたBootstrapサイトのCSSを移し、先頭にテーマ名などの記述をする。この記述が無ければテーマのアップロードに失敗するから重要だ。

 

テーマCSS以外のCSSを読み込む

場合によっては、style.css以外にも必要なCSSファイルがある。今回はBootstrapを下敷きにしているため、当然BootstrapのCSSを読まないといけない。

まずは、テーマのCSSを読み込んだ時と同じようにfunctions.phpを開き、exampletheme_scriptsに追記する。

二つ目のwp_enqueue_styleでbootstrap用のCSSの読み込みを指示している。get_template_directory_uriでテーマディレクトリのURIが取れるので、そこから更に下へ潜って目的のCSSファイルを指している。このパスにCSSファイルを置こう。

exampletheme-css-bootstrap.min.css

 

この場合も、header.phpからCSS読み込み用のlink要素を消すのをお忘れなく。

 

favicon

ブラウザのタブ部分などに表示されるサイトのアイコン。これはWordPressのダッシュボードから変えられるので、あえて削っておく。header.phpでfaviconを読み込んでいる箇所を削除しよう。

 

wp_headアクション

テーマやプラグインがhead要素内で実行したい処理を呼び出すwp_headを</head>の直前に書く。

 

bodyのclass指定

お次はbody_classの出番。この関数をbody要素内に書けば、ページに応じたclassがbodyに付与されるため、ページ毎に見栄えを変えたい時に役立つ。

この関数を付けることで、例えば今回作成するページならhomeなるclassが付けられる。どのclassが付くかはページによって違うのだけれど、一部を抜き出すとこのようになる。

  • フロントページ – home
  • ブログ記事の一覧ページ – blog
  • 単体記事ページ – sigle postid-(id), sigle-paged-(page number)

ページ毎のデザインを変えたい場合、わざわざ自分でclassを付けずとも、これら出来合いのclassを使うことができる便利設計となっている。body_classで追加されるclassはこちらに書いてあるから、適宜活用したい。

 

ナビゲーションメニュー

header.phpのコーディングもクライマックス。ここまで長かったけれど、あと一押し。ここでは、カスタムメニューを使ったナビゲーションメニューを作ってみよう。

カスタムメニューのHTMLのつくりは、div要素（あるいはnav要素）にulのリストが内包されたものだ。例えばこんな感じ。

次に、今回WordPressテーマ化するページのメニュー部分を見てみよう。

これをカスタムメニューに落としこむには、メニューを挿入する関数wp_nav_menuをオプション付きで呼び出せばいい。wp_nav_menuに渡す引数によってclassを付与できたり、メニューの作りを変えたり出来る。

header.phpのメニュー部分をこのように書き換えよう。

今回は、メニューをnav要素で囲うためにcontainerにnavを指定するのと、そのnav要素に元あったclassを付けた。他にも色々といじれるから、困ったら先のレファレンスを見て欲しい。また、theme_locationで、header-menuなるメニューを使うようにしている。

次に、元のメニューと同じ見た目、動作になるよう、style.cssを修正しよう。

最後に、functions.phpのexampletheme_setup内に、カスタムメニューを有効化する処理を書く。wp_nav_menuで使用したメニュー名をregister_nav_menusに渡そう。これで、WordPressのダッシュボードからHeader Menuに対して変更を掛ければ自動的にヘッダー部のメニューが更新されるようになる。

 

header.php出来！

最終的にはこのようなheader.phpが完成した。

 

 

header.phpの作成はここまで。次回はサイドバーにあたるsidebar.phpを作る。

 

 

WordPressテーマで儲けちゃいますか？他にはあまりない、テーマ販売についての書籍

Webデザイナーのための WordPressテーマストアの作り方: なぜ海外のWebデザイナーはテーマを作り続けるのか？