【WordPress】トップページのみ、ウィジェットを表示させる方法を解説【コードあり】

今回は、WordPressでトップページにウィジェットを設置する方法について解説していきます。

手順としては、

1. WordPressの管理画面にログイン
2. 外観 → ウィジェットに移動
3. 「トップページ上」に、表示したいウィジェットを追加する

という感じ。

— マルユメ@WordPressテーマ開発してブログ運営 (@maruyumeblog) June 21, 2022

トップページにウィジェットを設置したいけど、やり方がわからない・・・

今使っているテーマではトップページにウィジェットを設置できない

という方は、本記事が参考になるはずです。

また、WordPressテーマ「SIMPLE」では、トップページにウィジェットを設置する機能を実装しています。

ですので、すぐに使いたい方はダウンロードすることをオススメします。

【WordPress】トップページにウィジェットを設置する方法【コードあり】

手順としては、下記のような感じです。

1. ウィジェットエリアを作成する
2. ウィジェットエリアの表示位置をトップページに設定する
3. WordPress管理画面からウィジェットを設置する

順番に解説していきます。

ウィジェットエリアを作成する

まずは、ウィジェットエリアを作成していきます。

テーマディレクトリ直下にある「functions.php」に、下記のコードを追加します。

register_sidebar( array(
	'name' => 'トップページ上',
	'id' => 'top-page-top',
	'before_widget' => '<div id="%1$s" class="widget %2$s">',
	'after_widget'  => '</div>',
	'before_title'  => '<h4 class="widgettitle">',
	'after_title'   => '</h4>',
) );

WordPress管理画面の「外観 → ウィジェット」のページを開くと、「トップページ上」という名前のウィジェットエリアが追加されているはずです。

ウィジェットエリアの表示位置をトップページに設定する

ウィジェットエリアを作成したら、表示位置をトップページに設定していきます。

テーマディレクトリ直下にある「front-page.php/home.php/index.php」に、下記のコードを追加します。

<?php if ( is_active_sidebar( 'top-page-top' ) ) : ?>
　　　　　<?php dynamic_sidebar( 'top-page-top' ); ?>
<?php endif; ?>

ちなみに、WordPressのトップページのテンプレートファイルは

1. front-page.php
2. home.php
3. index.php

の3つがあります。

それぞれ優先順位が決まっており、

という感じで、3ファイルすべてある場合はfront-page.phpが優先されます。

とはいえ、ここはそこまで重要ではないです。とりあえず、テーマディレクトリ直下に3ファイルのうちどれか1つでもあれば、それに対してコードを追加すればOKです。

WordPress管理画面からウィジェットを設置する

あとは、WordPress管理画面からウィジェットを設置するだけです。

具体的な手順は、以下の通り。

• 外観 → ウィジェットに移動する
• トップページ上部にウィジェットを設置する

順番に解説していきます。

クラシックウィジェットでの設置方法

外観 → ウィジェットに移動する

まずは、WordPressの管理画面にログインして「外観 → ウィジェット」に移動します。

トップページ上部にウィジェットを設置する

「トップページ上」にウィジェットを設置します。

上記の例では、アーカイブウィジェットを設置しています。

サイトトップページの上部にアーカイブウィジェットが設置されているのがわかると思います。

ブロックウィジェットでの設置方法

まずは、同じようにWordPressの管理画面にログイン、「外観 → ウィジェット」に移動します。

ブロックウィジェットでは、↓の手順でウィジェットを設置できます。

以上になります。本記事を参考にして、トップページにウィジェットを設置してみてください。