ちょっとづつ学ぶWordPressテーマの作り方 4 -サイドバー、フッター-

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

 

サイドバーを作る

header.phpを作りながら、「WordPressテーマ作るのめんどくさい」と思った人はいないだろうか?確かに、ヘッダーは他の部品(サイドバーやフッター)と比べてやることが多い。それは逆に、ヘッダーさえこなしてしまえば後はお茶の子サイサイってことでもある。というわけで、サイドバーはサクッと終わらせちゃおう。

まずは元のサイドバーの構造を確認する。

divの下に、各ウィジェットがdivで区切られて配置されているのが分かる。このレイアウトを守りつつ、各ウィジェットをWordPressのダッシュボードから動的に決められるよう、register_sidebaris_active_sidebar、それからdynamic_sidebarを使う。

 

サイドバーの登録

まずはfunctions.phpにて、register_sidebarによるサイドバーの登録を行う。header.phpを作成した時に使ったfunctions.php内のセットアップ処理とは別に、ウィジェットの初期化処理(exampletheme_widgets_init)を用意しよう。

register_sidebarに渡している、name、id、それからdescriptionはそのままサイドバーの名前、ID、説明を表している。元のサイドバーの構造にするために重要なのがbefore_widget以降の引数だ。before_widgetとafter_widgetでウィジェットを囲む要素を指定し、before_titleとafter_titleとでウィジェットのタイトル部分をデザインしている。

before_widgetに渡している%1$sと%2$sによって、各ウィジェットに固有のidとclassを付与できる。元のサイドバーで、最も上のウィジェットだけは白枠が付いているけれど、特定のウィジェットだけを修飾したいときに活用しよう。

 

サイドバーの呼び出し

こうして登録したサイドバーはdynamic_sidebarなる関数で呼び出せるけれど、その前にis_active_sidebarで有効かどうかを確認することが推奨されている。

先ほど登録したサイドバー『sidebar-1』を呼び出すのを例に取るとこのように使う。

 

フッターを作る

今回はもう一つ、フッターを作るところまでやってみよう。

まずはページのフッター部分(今回の例で言えばfooter要素1つ上のdivから下)をfooter.phpへ移す。

 

JavaScriptを読み込む

今回取り上げたBootstrap公式サンプルでは、JavaScriptをページの最後で読み込んでいる。これはサイト高速化テクニックの1つで、JavaScriptの読み込みでレンダリングが遅れることを防いでいる。

 

今回読み込んでいるのはjQueryとBootstrapの2つ。

このうち、jQueryはWordPressが自動で読み込む(場所はheader.phpのwp_headを記述したところ)。そのため、今回はBootstrapの読み込みを指定するだけでいい。

まずはこのscript要素を消し、本シリーズのヘッダー編で作成したfunctions.phpのexampletheme_scripts内に読み込み処理を書こう。

wp_enqueue_scriptでJavaScriptを読み込める。

第一引数はJavaScriptファイルのハンドル名(WordPress内で扱うための名前)、第二引数はファイルパスとなっている。

注目したいのは三番目。jQueryに依存することを示している(WordPress内ではjqueryというハンドル名で扱える)。これで、jQueryの読み込み完了後にBootstrapが読み込まれる。

最後にtrueとしているのは、このJavaScriptをフッター内で読み込むという指示だ(wp_footerを記述した場所で読み込まれる)。

 

footer.phpのscript要素の削除、functions.phpでの読み込み処理の追加が終わったら、WordPressテーマのjsフォルダにbootstrap.min.jsを追加しよう。

example-theme_bootstrap.min.js

 

 

次回はトップページを作り、WordPressテーマを完成させる。

 

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