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

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

Akira

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

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 の重複がないように注意します。

コードの詳細については、 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' );
}
?>

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

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

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 に投稿した写真を表示してもサイト風になりそうです。

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