WordPressによるサイト構築テクニック – トップページをウィジェット化する

お客様から快く承諾を頂いたので、最近公開したお客さんのサイトでやってることを本日から何回かに分けてざくっと紹介します。

南紀串本リゾート大島

テーマについて

条件によっていろいろですが、今回はtwenty tenテーマの子テーマとして作成しました。

twenty tenはテーマフレームワークとしてもよく出来ているので、個人的に気に入ってます。

トップページをウィジェット化するメリット

トップページをウィジェット化するメリットはメンテナンス性です。

他のページと違ってトップページは、キャンペーンやイベントなどに応じてタイムリーにコンテンツを変えていきたいという要望が少なからずあります。

そんな時に。メインコンテンツの部分もサイドバーウィジェットで構成すると、お客様でも柔軟なカスタマイズが可能になりますので、細かいことをあまり言われなくなります。(笑)

トップページをウィジェット化するための手順

たとえば、Twenty Tenの子テーマでトップページをウィジェット化するのはとても簡単です。

まず、テーマのfunctions.phpに以下のソースをコピペしてください。

register_sidebar( array(
    'name' => 'Home Widget Area',
    'id' => 'home-widget-area',
    'description' => 'The HOME widget area',
    'before_widget' => '<div id="%1$s" class="home-widget-container %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="widget-title">',
    'after_title' => '</h2>',
));

次にloop-index.phpというファイルを作成して以下のソースをコピペするだけです。

<?php dynamic_sidebar('home-widget-area'); ?>

以上でトップページ内のメインループ部分がウィジェット化されました。

独自のウィジェットを準備

トップページのメインコンテンツ部分をウィジェット化するのはとても簡単ですが、デフォルトのウィジェットではいろいろと心細いですよね。

そのため、以下のようなウィジェットプラグインを自作してインストールしています。

CSSやJavaScriptはデザインに合わせてゴニョゴニョする感じです。

ウィジェットプラグインは、WordPressプラグインの中でも簡単な部類に入りますので、興味がある人は自作しちゃいましょう。

https://firegoby.jp/archives/2303