WordPressのサイドバーをページの種類毎に変える方法

thumbnail

こんにちは、今回はWordPressのサイドバーをページの種類毎に変える方法について解説します。

サイドバーとは

サイドバーとは、ページの端などに表示するエリアのことを言います。
ブログのサイドバーにはプロフィールやカテゴリー、タグ等を表示することが多いですが、サイト・ページに合わせてカスタマイズすることが可能です。

今回はページの種類毎に表示内容が変わるようにカスタマイズする方法を解説します。

条件分岐タグ

サイドバーの設定に入る前に抑えておきたいのが、条件分岐タグです。

条件分岐タグとはWordPressで用意されている関数で、ページの種類を判別して真か偽かの結果を返すタグのことです。

どんな時に使うのか

コードの記述を減らしファイルを見やすくするために、よく共通のコンテンツをテンプレートにすることがあります。

このテンプレートにしたコンテンツの共通部分として扱う要素(タイトル、アイキャッチ、本文、カテゴリー等)を各ページ作成の中で必要な要素とそうでないものを分けて表示する際等に、条件分岐タグを使用します.

いくつか条件分岐タグをご紹介します。

様々な条件分岐タグ

条件分岐タグ詳細
is_front_pageトップページか判定
is_archive一覧ページか判定
is_page固定ページか判定
is_categoryカテゴリーページか判定
is_single固定ページ以外で個別投稿ページかを判定
is_active_sidebarサイドバーが使用中か判定

サイドバー作成

それでは、条件分岐タグを使用したサイドバーの作成方法を見ていきましょう。

今回は、サイドバーをページの種類毎に表示内容が変わるようにカスタマイズしてみます。

カテゴリーリストを表示させるページとそうでないページ、さらにカテゴリーリストの表示形式を分けています。

PHP

<?php
  if ( is_front_page() ) {  /* トップページの場合 */
    echo "<ul>";
    $args = array(
      'title_li' => __( 'Categories' )
    )
    wp_list_categories($args);  /* カテゴリーリストを表示 */
	  echo "</ul>";
  } elseif ( is_category() ) {  /* カテゴリーページの場合 */
      echo "<ul>";
      $args = array(
        'child_of' => 'カテゴリーID',
        'title_li' => '',
        'hierarchical' => '1'
      )
      wp_list_categories($args);  /* カテゴリーリストを表示 */
      echo "</ul>";
      elseif ( is_single() ) {  /* 個別投稿ページの場合 */
      /* 個別投稿ページ表示の際に表示させたい内容をここに記載 */
    } elseif ( is_page() ) {  /* 固定ページの場合 */
      if ( is_page( '固定ページのidやタイトル' ) ) {
        /* 指定した固定ページに表示させたい内容をここに記載 */
      } else {
        /* 指定した固定ページ以外のページでの表示内容 */
      }
    } else {
    /* その他のページの表示内容 */
  }
?>

条件分岐タグの記載方法は以下になります.

条件分岐タグ

if ( 条件分岐タグ (パラメータ) ) { 表示内容 }

3行目だと、トップページでは{}内を表示させるというコードになっています。

wp_list_categories()

wp_list_categories()はリンク付きのカテゴリーをリスト表示させるテンプレートタグです。引数にパラメータを指定する事でカスタマイズできます。

コード13~15行目のパラメータでは title_li でカテゴリーリストの見出しを設定、child_of で指定したIDのサブカテゴリーを表示、 hierarchical でサブカテゴリーを親カテゴリーの内側に表示するようカスタマイズしています。

title_li はカテゴリーリストに見出しをつけることができます。 14行目のように空白にすることで、見出しを付けなくすることも可能です。
(デフォルトはリストの前に Category と見出しが付きます。)

まとめ

サイドバーのカスタマイズ方法について解説しました。

今回は条件分岐タグを表示の変更だけに使用しましたが、条件分岐は様々な場面で登場します。

また、wp_list_categoriesなどのテンプレートタグを使えば表示できる種類の幅も広がりますので、色々試してみてください。