TwentyTwelveでトップページをコーポレート風にする爆速3ステップ

95f1acd2848c7c37e96aaa1a922178e41.jpg

TwentyTwelveのトップページを企業サイトのトップページを作成する

まず、TwentyTwelveでトップページを作成するには、以下の2つの選択肢があります。

  1. フロントページテンプレートを利用してトップページを作成する。
  2. 固定ページ(デフォルトテンプレート)をトップページにする。

トップページの作成方法については、「コーポレートサイト風のトップ(フロント)ページを作る最初の5ステップ」で記載しておりますので、そちらを参考にしていただければ思いますが、

TwentyTwelveのフロントページは、全幅・サイドバーなし、フロントページウィジェットが2つ、と、ほとんど真っ白でカスタマイズが必要です。
空のフロントページ

フロントページにもサイドバーが欲しい、という場合、フロントページテンプレートを利用すると、front-page.phpのコードを直す必要が出てきます。

phpでがっつり作るとなると、少々ハードルが高いですね(^^ゞ

サイドバーを表示させたいのなら、固定ページ(デフォルトテンプレート)で作成し、後述のサイドバーウィジェットをフロントページ仕様に設定するだけの方法が簡単ですし、おススメです。

というのは、

WEBデザイナーを目指しているのならともかく、phpをどうこうするのに費やす時間を、良いブログ記事を書く時間に回した方が、効率性・生産性が高いんでは?

ということと、

簡単に作れる=簡単に直せる

というのが大きな理由です。

ですので、ココでは、プラグインを活用して簡単なトップページを作っちゃう方法を記載していきたいと思います。

サムネイル付きの記事一覧を作ってくれるプラグインで、トップページをインデックス化

ショートコードで投稿内にサムネイル付き、最新記事一覧を作る

まず、ショートコードで投稿内でもサムネイル付き記事一覧をさくさく作ってくれるプラグイン、Newpost Catchでトップページに最新記事一覧を作ってみましょう。

使い方は、「コンテンツとしてサムネイル付き記事一覧を作れるNewpost Catch」をご覧下さい。
この記事で作成した、記事一覧は以下のようになります。

TwentyTwelvexNewpostCatch
フロントページテンプレートを利用した場合

次に固定ページへのサムネイル付き一覧を作成します。

固定ページ内にサムネイル付き一覧を作成する

通常、ビジネスサイトの作成依頼があった場合、

  • 会社案内
  • お問合せ
  • 商品やサービスの概要・詳細ページ

といった内容(コンテンツ)は固定ページで作成します。

そして、日々の情報発信は投稿ページで、という構成になります。

つまり、飲食店さんの通年メニューやコースの紹介、メーカーさんのカタログ的なリスト、各種サービス業のサービス内容、といったビジネスのメインであるコンテンツは固定ページで、

キャンペーンやイベントといった、その時々のコンテンツはブログ投稿に、といった感じです。

さらに、ビジネスのメインとなる商品ページですから、ブログのサイドバーやフッター、トップページにも、その固定ページへのリンクを載せ、見に来てもらえるようにします。

特に見てもらいたいサービスや商品の詳細ページへのリンクは目立つように設置したいもの、画像つきでわかりやすい一覧をトップページに作ってみましょう。

先のNewpost Catchはポスト、つまり投稿を一覧に作成してくれるプラグインですので、ココでは、固定ページの一覧も作成できるプラグイン、Display Posts Shortcodeを使用します。

使い方は、「ショートコードで記事一覧を載せられるDisplay Posts Shortcode」をご覧下さい。

この記事で作成した、記事一覧は以下のようになります。

Display Post Shortcodeで固定ページ一覧

サイドバー有のデフォルトテンプレートで、Display Posts Shortcodeのli要素幅を250pxにした場合のサンプルも作ってみました。kakuno-restaurant

いろいろと改善したいところはあるものの、ショートコードとCSSだけでも、ここまで出来るというイメージを持っていただこうという、サンプルイメージです^^;

←クリックすると拡大します。

次に、 デフォルトテンプレートでサイドバーを表示させつつも、投稿ページとは異なるサイドバーを表示させる方法を説明します。

プラグインJetpackの『Widget Visibility』機能を使って、サイドバーをカスタマイズする

Jetpack-Widget VisibilityWordPressプラグインJetpackは、様々な便利機能が搭載されていて、これをインストールするだけでたくさんの事が出来るようになりますが、その機能ひとつに、Widget Visivilityがあります。

これは、”ページごとに表示されるウィジェットをコントロール”できるようになる機能です。

この機能を使用するには、ダッシュボードのメニューから、Jetpack-設定をクリック、
Jetpack-設定

機能一覧から、Widget Visivilityを有効化します。
Widget Visivilityを有効化

次に、ダッシュボードのメニューから、外観→ウィジェットを開きます。
ウィジェット設定画面を開く

ウィジェット設定画面で、トップページでは表示させないウィジェットを開きます。

ここでは、トップページで、最新投稿一覧を作成してあるので、トップページのサイドバーでは最新投稿が表示されないようにします。
ウィジェット設定画面で、トップページでは表示させないウィジェットを開く

公開状態ボタンをクリックします。
公開状態ボタンをクリック

公開状態を設定し、保存ボタンをクリックします。
公開設定

サイトを表示させ、トップページと他のページのサイドバーを確認してみて下さい。

トップページでは、最新投稿 が表示されていませんが、
トップページの表示

その他のページでは、最新投稿が表示されていれば・・・OKです!
ブログページの表示

この機能、他でも役に立ちそうですね(^^)

ではでは、お役に立ちましたら幸いです。
いいね!と思われましたら、SNSでご共有下さいませ~<(_ _)>

Published:2015/02/18

Written by

コメントを残す