[無料WordPressテーマ] Simplicityのヘッダー下にウィジェットを作成しよう!
非常に多機能な事で有名な無料WordPressテーマのSimplicityですが、中には見た目が少々寂しいと感じる方もそれなりにみえるのではないでしょうか。
私とか(また自分かい)
そこで当エントリーではヘッダー下(メインカラムの上とも言う)にウィジェットエリアを作成して、スライダーでも何でも好きに設置したらいいじゃない!というちょっとしたカスタマイズ方法を紹介したいと思います。
ウィジェットエリアの作成
functions.phpに以下の内容をまるっとコピペします。日本語での説明や、idとclass名は好きなように変えていただいて結構ですが、当然そこに関連する部分は修正が必要になるので注意して下さいね?
/* ヘッダー下にウィジェットエリアを作成 */
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'ヘッダー下用ウィジェット',
'id' => 'header-bottom',
'description' => 'ヘッダー下に表示するウィジェットです。',
'before_widget' => '<div class="header-bottom">',
'after_widget' => '</div>',
));
}
コードがちゃんとコピペ出来ていれば、ダッシュボード > ウィジェットを開くとこんな感じにウィジェットエリアが作成されているはずです。
ウィジェットエリアの表示
Simplicityの子テーマにはbefore-main.phpというヘッダーとメインカラムの間に挿入出来るテンプレートがあるのでこれを利用します。親テーマからファイルをコピってくる必要が無いのでこういった気配りは嬉しいですね。
以下のコードにはトップページのみ表示するように条件をつけてありますが、不要ならハイライト行のみ残してif文とその閉じカッコは削除して下さい。
<?php
if ( is_home() || is_front_page() ) {
dynamic_sidebar('header-bottom');
};
必要に応じてレスポンシブ対応を
追加したヘッダー下ウィジェットに関するレスポンシブ対応は、設置するプラグインに合わせてCSSで調整する必要があります。
次のCSSはメディアクエリでウィジェットエリアごと非表示にするサンプルです。もちろんメディアクエリの値を変更したり、コピペして更に段階を分けてもOKです。
カスタマイザーで「完全レスポンシブ表示を有効」にしている場合はresponsive.cssに貼り付けます。
@media only screen and (max-width: 767px) {
.header-bottom { display: none; }
}
それ以外の場合はmobile.cssに貼り付ければいいんでしょうかね?
.header-bottom { display: none; }
私は「完全レスポンシブ表示を有効」でしか利用した事が無いので、実はその辺よくわかってません…という事でここはひとつ間違ってても大目に見てやって下さい。
実際の使用例的な何か
直接before-main.phpにコードを埋め込んでも同様の事は出来ますが、あえてウィジェットにしたのはダッシュボードから気軽にプラグインを取っ替え引っ替え出来るようにという理由からです。
そんなわけでヘッダー下ウィジェットの使用例をいくつか貼ってみましょう。
なかなかいい感じではないでしょうか?
他のSimplicityユーザーと差をつけよう
Simplicityは利用者が多いだけにデザインが被らないようにしようと思うとなかなか大変なテーマですが、この程度のカスタマイズでも結構見た目は変わるものです。とは言ってもその辺はあまり気にしないのか、ほぼデフォルトのままで使ってる方も多いと言えば多いんですけどね…
それはともかく、せっかくここでヘッダー下ウィジェットを作成した事ですし、また別の機会に今度はそこに設置するプラグインなんかもぼちぼち紹介していきたいなと思います。
ディスカッション
コメント一覧
まだ、コメントがありません