WordPressでコーポレートサイト+ブログページを構築する方法

index.php=トップページではない

WordPressをのデフォルトテーマはブログテーマなので、サイトのTOPページにアクセスするとindex.phpが表示されます。公式テーマディレクトリーのほとんどのテーマがブログでの利用を想定されており、やはりTOPページにアクセスするとindex.phpが表示されます。

なので、WordPress初心者の方は『index.php=TOPページ』という認識をしていまっている方も多いかと思います。
『index.php=TOPページ』という理解でコーポレートサイトを制作した場合、色々と問題が発生します。

目次

例えば同サイトにブログサイトも持ちたい場合

例えば1つのWordPressサイトでコーポレートサイトとブログサイトと両方運用したい場合です。
以下のようなサイト。

スクリーンショット_13_01_03_12_49

TOPページにはカルーセルやお知らせ一覧、関連するバナーの一覧などがあります。
次にグローバルメニューを見てみるとスタッフブログのメニューがあります。
WordPressはブログCMSなのでブログサイトを作るのは得意。スタッフブログにはその機能をそのまま使いたいところですが、このコーポレートサイトのトップページをindex.phpで構成していまうと『スタッフブログ』のトップページが作成できなくなってしまいます。

補足:こんな方法もありますが・・・

●『ブログ』カテゴリーを作成し、『ブログ』カテゴリーのアーカイブをブログページのトップページにする方法。
※この方法だと常にブログ記事を書く度にブログカテゴリーにチェックを入れる必要がある

●ブログ記事一覧を表示するページテンプレートを作成する方法。
※この方法だとメインクエリーは利用出来ないので、get_posts関数を使って記事一覧を取得する必要がある。

企業サイトのトップページにはindex.phpは使わずにfront-page.phpで作成

では実際にコーポレートサイトのトップページとブログページをTwenty Twelveのテーマを使って構築してみたいと思います。

まずindex.phpをコピーしてfront-page.phpを作成します。

スクリーンショット_13_01_03_14_27

次にfront-page.phpのメインコンテンツの中を書き換える

スクリーンショット_13_01_03_14_33

サイトのTOPページを表示してみる

スクリーンショット_13_01_03_14_35

これでサイトのTOPページを表示するとfront-page.phpが表示されるので、front-page.phpのテンプレートをコーポレートサイトのTOPページ用に編集すればOKです。

どのテンプレートが表示されているか分かりやすくするために、index.phpにも『<h1>index.phpが表示されました</h1>』と追記しておきます。

次にブログページを作成する

作成する方法は簡単です。
まずは固定ページから【ブログ】ページを作成します。

スクリーンショット_13_01_03_14_48

次に管理画面の【設定】→【表示設定】画面で【フロントページの表示】の設定を変更する。

スクリーンショット_13_01_03_14_51

※上記画像で『フロントページ』に何も選択をしてないですが、選択をしないとコーポレートサイトのTOPページがindex.phpになってしまします。なので、『トップページ』などの固定ページを作成し、それを選択して下さい。(2013年1月4日11時42分修正)
ブログページにアクセスし、表示内容を確認する

スクリーンショット_13_01_03_14_58

これでコーポレートサイトのトップページとブログのトップページのテンプレートを別けることが出来ました。
コーポレートサイトのトップページに固定ページの情報を表示する必要がない(上記ワイヤーフレームのようなニュース一覧やバナー一覧しかない)場合はfron-page.phpにガリガリコードを書いてしまえばOKです。

固定ページと企業サイトのトップページを関連付けをしたい場合は、管理画面の【設定】→【表示設定】画面で【フロントページの表示】の設定で、フロントページのセレクトボックスで関連付けたい固定ページを選択してあげるとOKです。
そのあたりは後日また書こうと思います。

※『関連付けしたい場合』と書きましたが、必ず固定ページと関連付けをしてください。関連付けをしないTOPページにはfront-page.phpが表示されず、index.phpが表示されることになります。(2013年1月4日11時42分修正)

繰り返しになりますが、index.phpは『index.php=TOPページ』ではなく、他のテンプレートが存在しない場合に最終的に表示されるテンプレートになります(要はなんでも屋さんみたいな感じ?)。ブログのTOPページとしてテンプレートを作成したい場合はindex.phpをコピペしてhome.phpを作成すればブログページのTOPページとして機能します。

アイキャッチ画像
http://www.flickr.com/photos/64060016@N03/5965185904/ By thisismyurl

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

「エンジニアのためのWordPress開発入門」を執筆しました!

WordPressを使った開発案件は依然多く、それに携わるWebエンジニアも多数存在します。ただし、モダンな開発手法に慣れたWebエンジニアがWordPressに初めて触れたとき、その独特のアーキテクチャやシステムの構成に戸惑いを感じることがあるかもしれません。だが、WordPressは、それらを補ったうえにさらに強力なメリットを持ち合わせています。本書は、PHPプログラマがWordPressで開発する際に必要な基礎知識から、現場で役立つ具体的なカスタマイズ手法や開発のポイントについて詳しく解説しています。

この記事を書いた人

NPO法人のHP制作(WordPress)やkintoneを使った業務システムの構築をしています。サイボウズ株式会社公認kintoneエバンジェリスト/CoderDojo西宮と梅田のチャンピオン/認定NPO法人宝塚NPOセンター理事/NPO法人SEIN理事/

コメント

目次
閉じる