Simplicity のメニュー下にウィジェットエリアを追加

2020年2月20日
2017年12月30日

Web 制作

Akira

Web デザイナー

完成図

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

フロントページを固定ページで作るとできますが、少し面倒です。そこで行いたいのが、before-main.php へのウィジェットエリアの設置。

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

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

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

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

before-main.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 に追加した先程のコードでは、全てのページにウィジェットが表示されます。

しかし、条件分岐タグを用いれば、任意のページのみにウィジェットを表示できます。いくつか条件分岐タグを使った例を紹介します。尚、条件分岐タグは非常に種類が多く、WordPress Codex/条件分岐タグにて条件分岐タグの一覧をご覧いただけます。

フロントページのみ

フロントページのみに表示するには、is_front_page() を使ったコードを before-main.php に追加します。これはフロントページが「最新の投稿」でも「固定ページ」であっても同様です。

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

ただし、「最新の投稿」の場合は、上記のコードでは 2 ページ目以降の全てのフロントページでウィジェットが表示されます。トップページのみ（フロントページの 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 ページ目以降を除外しています。

「投稿ページ」に設定した固定ページのみ

フロントページが固定ページの場合には、表示設定で「投稿ページ」に固定ページを設定できます。

この「投稿ページ」に設定した固定ページは、「最新の投稿」と同じく新着記事を表示するページになります。

新着記事を表示する「投稿ページ」にのみウィジェットを表示するには、is_home() を使います。

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

カテゴリーページのみ

カテゴリーの一覧ページにのみウィジェットを表示するには、is_category() を使います。

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

フロントページと同じく、is_paged() === false で 2 ページ目以降は表示しないようにもできます。

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

また、特定のカテゴリーページのみに表示することも可能です。

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

上記の例は、カテゴリーのスラッグが dog のカテゴリーページでのみウィジェットを表示するものです。スラッグではなくカテゴリーの ID でも指定できます。

また、複数のスラッグやカテゴリー ID を指定できます。

<?php
if ( is_active_sidebar( 'under-globalmenu-widget' ) === true && is_category( array( 'dog', 'cat' ) ) === true ) {
  dynamic_sidebar( 'under-globalmenu-widget' );
}
?>

上記コードは、スラッグが dog と cat のカテゴリーページにウィジェットを表示する例です。

タグページのみ

タグの一覧ページにのみウィジェットを表示するには、is_tag() を使います。

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

カテゴリーページと同じく、2 ページ目以降は表示しないこともできます。また、スラッグやタグの ID を使い、特定のタグページのみに表示も可能です。

検索結果ページのみ

検索フォームを使うと、検索結果ページが表示されます。この検索結果ページのみにウィジェットを表示できます。

使用する条件分岐は、is_search() です。

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

is_paged() === false も使うと、2 ページ目以降は表示しないようにできます。

投稿ページのみ

投稿ページ（先程出てきた表示設定の「投稿ページ」ではなく記事ページのこと）のみにウィジェットを表示するには、is_single()を使います。

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

投稿ページの ID やスラッグを使い、特定の投稿ページのみに表示もできます。以下は、ID が 10 の投稿ページにのみ表示する例です。

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

複数の ID やスラッグを指定できます。

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

固定ページのみ

固定ページのみに表示するには、is_page() を使います。

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

ID やスラッグを使い、特定の固定ページでのみ表示も可能です。また、複数の ID やスラッグの指定もできます。

おわりに

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

ウィジェットを利用し、Instagram に投稿した写真を表示するのも 1 つのアイデア。工夫次第で、他のサイトとの差別化が可能です。

尚、今回のウィジェットエリアに WordPress Popular Posts を設置しデザインする方法は、Simplicity のメニュー下に人気記事を表示するカスタマイズで紹介しています。