[無料WordPressテーマ] Simplicityのヘッダー下にウィジェットを作成しよう!

WordPressテーマ

無料WordPressテーマ Simplicity イメージ

非常に多機能な事で有名な無料WordPressテーマのSimplicityですが、中には見た目が少々寂しいと感じる方もそれなりにみえるのではないでしょうか。

私とか(また自分かい)

そこで当エントリーではヘッダー下(メインカラムの上とも言う)にウィジェットエリアを作成して、スライダーでも何でも好きに設置したらいいじゃない!というちょっとしたカスタマイズ方法を紹介したいと思います。

ウィジェットエリアの作成

functions.phpに以下の内容をまるっとコピペします。日本語での説明や、idとclass名は好きなように変えていただいて結構ですが、当然そこに関連する部分は修正が必要になるので注意して下さいね?

idはdynamic_sidebarの呼び出し、classはcssで指定する部分になります。
ヘッダー下にウィジェットエリアを作成
/* ヘッダー下にウィジェットエリアを作成 */
if (function_exists('register_sidebar')) {

	register_sidebar(array(
		'name' => 'ヘッダー下用ウィジェット',
		'id' => 'header-bottom',
		'description' => 'ヘッダー下に表示するウィジェットです。',
		'before_widget' => '<div class="header-bottom">',
		'after_widget' => '</div>',
	));

}

コードがちゃんとコピペ出来ていれば、ダッシュボード > ウィジェットを開くとこんな感じにウィジェットエリアが作成されているはずです。

Simplicityに作成したヘッダー下用ウィジェット

ウィジェットエリアの表示

Simplicityの子テーマにはbefore-main.phpというヘッダーとメインカラムの間に挿入出来るテンプレートがあるのでこれを利用します。親テーマからファイルをコピってくる必要が無いのでこういった気配りは嬉しいですね。

以下のコードにはトップページのみ表示するように条件をつけてありますが、不要ならハイライト行のみ残してif文とその閉じカッコは削除して下さい。

ヘッダー下ウィジェットの表示
<?php
if ( is_home() || is_front_page() ) {
	dynamic_sidebar('header-bottom');
};
尚、phpの閉じカッコ’?>’は忘れたわけでは無いので基本的にそのままでOKですが、既にbefore-main.phpに何らかのカスタマイズを施している場合は、それを考慮してカッコを閉じたり最初の<?phpも外すなりして下さい。

必要に応じてレスポンシブ対応を

追加したヘッダー下ウィジェットに関するレスポンシブ対応は、設置するプラグインに合わせてCSSで調整する必要があります。

次のCSSはメディアクエリでウィジェットエリアごと非表示にするサンプルです。もちろんメディアクエリの値を変更したり、コピペして更に段階を分けてもOKです。

カスタマイザーで「完全レスポンシブ表示を有効」にしている場合はresponsive.cssに貼り付けます。

767px以下の場合はヘッダー下ウィジェットを非表示に
@media only screen and (max-width: 767px) {
	.header-bottom { display: none; }
}

それ以外の場合はmobile.cssに貼り付ければいいんでしょうかね?

ヘッダー下ウィジェットを非表示に

.header-bottom { display: none; }

私は「完全レスポンシブ表示を有効」でしか利用した事が無いので、実はその辺よくわかってません…という事でここはひとつ間違ってても大目に見てやって下さい。

実際の使用例的な何か

直接before-main.phpにコードを埋め込んでも同様の事は出来ますが、あえてウィジェットにしたのはダッシュボードから気軽にプラグインを取っ替え引っ替え出来るようにという理由からです。

そんなわけでヘッダー下ウィジェットの使用例をいくつか貼ってみましょう。

Simplicity ヘッダー下ウィジェット 使用例1

Simplicity ヘッダー下ウィジェット 使用例2

Simplicity ヘッダー下ウィジェット 使用例3

なかなかいい感じではないでしょうか?

他のSimplicityユーザーと差をつけよう

Simplicityは利用者が多いだけにデザインが被らないようにしようと思うとなかなか大変なテーマですが、この程度のカスタマイズでも結構見た目は変わるものです。とは言ってもその辺はあまり気にしないのか、ほぼデフォルトのままで使ってる方も多いと言えば多いんですけどね…

それはともかく、せっかくここでヘッダー下ウィジェットを作成した事ですし、また別の機会に今度はそこに設置するプラグインなんかもぼちぼち紹介していきたいなと思います。