コーポレートサイト風のトップ(フロント)ページを作る最初の5ステップ

FloorGuideL.jpg

トップページを作る理由

ショップまたはコーポレートサイトや、大量のコンテンツ(ページ)を持つサイトは、そのコンテンツの量ゆえに、サイトを訪れてくれた検索ユーザーさんが迷ってしまう事も。

こんなページがここにありますよ、とアピールしないと、せっかく作ったページも見てもらえません。

アクセスアップのテクニックとして、ブログを量産、ランディングページ数を増やす→アクセスアップ、という図式のもとでアクセスアップに成功していたとしても、

その一方で、サイト内回遊率を上げる → サイト全体の評価アップも目指したいものです。

トップページから回遊・サイトイメージ
トップページから既存の全てのページにアクセスできるようにする

サイト内回遊率を上げる為には、サイドバーや、関連記事表示などいろいろできることがたくさんありますが、

サイトの「顔」である、トップページもインデックス(索引)化して、コンテンツの在りかを直感的・俯瞰的に示す、つまり

「ユーザーさんにどこに何があるのかを、わかりやすく見せる」

ことも重要です。

また、ショップやコーポレートサイトのトップページの場合、使いやすさ、わかりやすさはもちろん、やはり見映えも大切です。

更に、投稿も”最新ニュース”や”キャンペーン”が目に付くように・・とか、”イチオシ”の商品ページへのリンクは目立つ画像で・・といった工夫を施す必要があります。

WordPressテーマでコーポレートサイト風のトップページを作る為の基礎知識

初期設定ではブログ一覧ページがトップページ

WordPressのテーマの初期設定では、最も新しい投稿から降順に並んだブログの一覧ページがトップページになっています。
TwentyFourteenの場合のトップページ
screenshot-2015

これを、ブログの一覧ページでないページにするには、

  1. 固定ページをトップページとして新規作成、トップページとして指定する。
  2. front-page.phpを利用してフロントページをトップページとして作り、指定する。

といった2つの方法があります。

トップページを作る時、front-page.phpを利用できるテーマと出来ないテーマがある

frong-page.phpとは、トップ(フロント)ページ専用テンプレートの事ですが、

WordPressのテーマには、

  1. front-page.phpは無い
  2. front-page.phpはあるけれど、カスタマイズする必要がある
  3. コーポレートサイトや、フォトブログ、マガジンサイトを作れるようにfront-page.phpがそういった作りになっている

ものがあります。

front-page.phpが無いテンプレートでも、デフォルトの固定ページ用テンプレートに通常通り記事を書いたり、プラグインなどでカスタマイズし、トップページのような作りにすることは難しくありません。

また、php、CSSがある程度わかるのであれば、自分でfront-page.phpを作成する事も出来ます。

front-page.phpがあっても、カスタマイズの必要があるテーマというのは、front-page.phpがほとんど真っ白でカスタマイズ前提のテーマのことです。
テーマ例:TwentyTwelveなど

front-page.phpが既にコーポレート風のセッティングが出来るようになっているテーマの場合は、テーマオプションなどで設定をすると、すぐにコーポレート風のトップページが作成できます。
※front-page.phpがそういった作りであるかどうか、は、テーマのスクリーンショットから判断可能です。

下のスクリーンショットは「Attitude」。
ビジネスサイト用のフロントページが初めから用意されている無料・公式テーマです。
screenshot-attitude

どの種類のテンプレートの場合でも、まず、固定ページをトップページとして新規に作成する必要があります。

固定ページをトップページとして設定する5ステップ

1.新規固定ページで、タイトルにHOME や、TOPといった、トップページらしいタイトルを入力します。
新規固定ページを追加

パーマリンクの編集も忘れずに!
パーマリンクの編集

2.そして、
front-page.phpが用意されていないテーマの場合は、そのまま、

フロントページ用テンプレートを選択front-page.phpが用意されているテーマのfront-page.phpを利用する場合は
「ページ属性」の「テンプレート」でFront page Templateや、Custom Home Pageといったfront-page.phpを表すテンプレート名がありますので、これを選択、公開ボタンをクリック、保存します。

3.もうひとつ新規固定ページを開き、「スタッフブログ」や、「最新ニュース」といったコーポレート・ブログにふさわしいタイトルをつけ、こちらはそのまま何もせずに公開ボタンをクリック、保存します。

4.設定の表示設定画面を開き、フロントページの表示の項目で、固定ページの○をクリック、フロントページで先程作成したトップページを、投稿ページでブログページを指定します。

表示設定を変更する

 

5.変更を保存ボタンをクリック、で完了です。

では、サイトを表示させてみましょう。

ブログのページを開くと、今までのトップページのように投稿の一覧が表示されており、トップページはコンテンツ部分が真っ白のページが表示されます。

下はTwentyTwelveテーマのFront page Template(front-page.php)を利用して作成した、トップページの作成直後のスクリーンショットです。
空のフロントページ

後はカスタマイズしたり、オプションを利用したりして、新しいトップページの投稿ページにお好きなコンテンツを配置すればOKです。

ではでは、今日はココまで。
お役に立てれば幸いです(^^)

Published:2015/02/16

Written by

コメントを残す