ちょっとづつ学ぶWordPressテーマの作り方 5 -トップページ-

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

ステップ別にちょっとづつWordPressテーマの作り方を学ぶ本シリーズ。第五回はサイトのトップページを作る。Bootstrapを下敷きにした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.phpへ移す。

 

ヘッダーを挿入する

index.phpには、これまで作成したヘッダー、サイドバー、フッターを挿入する。まずはヘッダーから。index.phpの先頭にget_headerを書こう。

 

ブログ記事を挿入する(ループ)

サンプルとして作ろうとしているテーマでは、トップページにいくつかの記事を表示し、ページを切り替えて次の(あるいは前の)記事をまたいくつか表示するようになっている。詳しくは、前掲の完成イメージを見て欲しい。

これを実現するため、トップページを表示した際に3つ記事を取得し、ページ送りすると次の(前の)3つの記事を表示するようにした。

元の記事部分(blog-postクラスの付いたdiv2つ)をindex.phpから削除し、次のコードに置き換えよう。

ここで重要なのはget_postsだ。取得する記事数をposts_per_pageに、ページ番号をpagedへ渡している。

 

サイドバーを挿入する

次はサイドバーを挿入してみよう。index.phpのサイドバー部分(blog-sidebarクラスの付いたdiv)を削り、get_sidebarを記述する。

 

フッターを挿入する

最後はフッターを挿入する。index.phpのフッター部分(containerクラスの付いたdivの閉じ要素から下)を削り、get_footerを入れるだけ。

 

WordPressテーマを動かす

これでWordPressテーマは完成!開発環境の構築編でインストールしたローカルサーバーにテーマを配置して動かしてみよう。

ローカルサーバーを起動し、WordPressの管理画面へアクセスする。ローカルの管理画面のURLは環境のセットアップ次第でパスが違うから適宜調整してほしい。

首尾よく管理画面へアクセスできたら、圧縮した状態のWordPressテーマをアップロードする。記事をいくつか入れ、ヘッダーメニューを作れば、参考にしたBootstrapサイトにぴったんこカン・カンなページになっているだろう。WordPressテーマの完成だ!

実際のWordPressテーマ開発では、記事ページだけを切り出したり、記事がない場合に備えたりと、これで完成というわけにはいかないけれど、大枠の流れは本シリーズのとおり。

 

 

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