コンテンツ拡充!グローバルメニューの下にウィジェットエリアを追加

グローバルメニューの下にウィジェットエリアを追加

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

カスタマイズ箇所ウィジェット
カスタマイズ方法PHP
テンプレート変更なし
コピペの可否100%可能

Simplicity ユーザーの中には、サイト風のブログにしたいとお考えの方もいらっしゃる模様。

フロントページを固定ページで作るとできますが、少し面倒です。

そこで利用したいのが before-main.php 。

Simplicity の子テーマに用意されている before-main.php にウィジェットエリアを作ると、「グローバルメニューの下」と「メインカラムとサイドバーの上」との間にコンテンツを表示できます。

グローバルメニューの下に画像ウィジェットを設置した例グローバルメニューの下に画像ウィジェットを設置した例

このウィジェットエリアに画像や WordPress popular posts を設置するだけでも、一気にブログがサイト風に。

初心者の方も簡単にカスタマイズができる、before-main.php にウィジェットエリアを作る方法をご紹介します。

functions.php にコードを追加

ウィジェットエリアは、 functions.php にコードを追加することで作成できます。

子テーマの functions.php に以下のコードをコピペします。

register_sidebars(1,
  array(
  'name'=>'グローバルメニュー下',
  'id' => 'under-globalmenu-widget',
  'description' => 'グローバルメニュー下のウィジットエリアです。',
  'before_widget' => '<div id="%1$s" class="under-globalmenu-widget %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<div class="under-globalmenu-widget-title">',
  'after_title' => '</div>',
));

これだけで「グローバルメニュー下」という名前のウィジェットエリアが、ウィジェット管理画面に追加されます。

ウィジェットエリアを作成する際には、 id の重複がないように注意します。

HTML5 で許されている id は、同一ページで1つだけです。 id が重複すると、 W3C の HTML 検証で怒られます。

コードの詳細については、 WordPress Codex/関数リファレンス/register sidebar をご参照ください。

before-main.php に設置

ウィジェットエリアを作成しただけでは、サイトには表示されません。before-main.php に設置した後で、サイトに表示されます。

設置するために、下記のコードを子テーマの before-main.php にコピペします。

<?php if ( is_active_sidebar('under-globalmenu-widget') === true ) {
  dynamic_sidebar('under-globalmenu-widget');
} ?>

あとはウィジェット画面で、「グローバルメニュー下」ウィジェットエリアにお好きなウィジェットを追加します。

ちなみに以下のコードでも設置できますが、処理速度は低下します。

<?php if ( is_active_sidebar('under-globalmenu-widget') ) {
  dynamic_sidebar('under-globalmenu-widget');
} ?>

特定のページだけに表示する

before-main.php に追加した上記のコードでは、全てのページにウィジェットが表示されます。

しかし、条件分岐タグを用いることで、任意のページのみにウィジェットを表示できます。

例えば、フロントページのみに表示させる場合は、before-main.php には下記のコードを追加します。

<?php if ( is_active_sidebar('under-globalmenu-widget') === true && is_front_page() === true ) {
  dynamic_sidebar('under-globalmenu-widget');
} ?>

is_front_page() の条件分岐タグを使用しています。

トップページのみ(フロントページ1ページ目のみ)に表示させる場合には、下記のコードです。

<?php if ( is_active_sidebar('under-globalmenu-widget') === true && is_front_page() === true && is_paged() === false ) {
  dynamic_sidebar('under-globalmenu-widget');
} ?>

is_paged() === false で、2ページ目以降を除外しています。

投稿ページのみに表示させることもできます。

<?php if ( is_active_sidebar('under-globalmenu-widget') === true && is_single() === true ) {
  dynamic_sidebar('under-globalmenu-widget') ;
} ?>

is_front_page()is_single()の部分を変えることで、任意のページのみにウィジェットを表示可能です。

条件分岐タグは非常に種類が多いため、 WordPress Codex/条件分岐タグをご参照ください。

特定のカテゴリーページのみ、特定の固定ページのみ、検索結果ページのみと、あらゆる条件分岐が可能です。

カスタマイズの幅が広がる

before-main.php にウィジェットエリアを追加することで、サイトデザインの幅が広がります。

WordPress Popular Posts を設置する方法は、「人気記事をトップページのグローバルメニュー下に表示するカスタマイズ」で紹介しています。

ほかに、 Instagram に投稿した写真を表示してもサイト風になりそう。

このサイトでは、検索ウィジェットとカスタム HTML を今回作成したウィジェットエリアに設置しています。

せっかく用意されている before-main.php 。フルに活用し、サイトの魅力を高めてはいかがでしょうか。

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする