プラグインを使わずWordPressのページによってサイドバーの表示を分ける方法

プラグインを使わずWordPressのページによってサイドバーの表示を分ける方法

WordPressではサイドバーの内容をウィジェットを使って簡単に作成、変更できるようになっています。

LION MEDIAを使いながら、ページ毎の改修ではなく便利なウィジェットの機能を使えるように、カテゴリーページや記事ページのサイドバーの表示をプラグインを使わずに分ける方法をご紹介します。

「functions.php」にウィジェットの設定を記述

まずは以下の「外観→ウィジェット 」の画面に、サイドバー のエリアを追加して、そこでウイジェットの編集ができるように「functions.php」にコードを記述します。

可能な限り、LION MEDIAの親じゃなく、子テーマ の「functions.php」に追記するようにしましょう。

お尻の「?>」の内側に書くことを忘れずに

見本は「175〜184」行目の一文です
// 追加のサイドバー ウイジェット
register_sidebar( array(
	'name' => __( 'サブサイドバー', 'lionmedia' ),
	'id' => 'sidebar-9',
	'description' => __( 'evols用に新規で追加したウィジェットです', 'lionmedia' ),
	'before_widget' => '<aside id="%1$s" class="widget %2$s">',
	'after_widget' => '</aside>',
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
) );
  • name:任意の名前を付けます。この名前は管理画面でウィジェットをカスタマイズする際に表示されますので、見分けが付くように他のウィジェットとは別の名前にしておきましょう。
  • id:今回作成したウィジェットを表示させる際に使用するidです。
  • description:管理画面でウィジェットをカスタマイズする際に表示されるウィジェットの説明です。
  • before_widget:内容をこのウィジェットの前に出力します。
  • after_widget:内容をこのウィジェットの後に出力します。
  • before_title:ウィジェットのタイトルの前に出力する内容です。
  • after_title:ウィジェットのタイトルの後に出力する内容です。

必須の変更箇所はidで、それ以外は任意でも大丈夫ですが、nameは自分が管理しやすいように変えた方が、後々function.phpを見直した時に区別がつきやすいかと思います。

スポンサーリンク

表示を分けるサイドバー のphpファイルを作る

次に「sidebar.php」のファイルをftpでローカルにダウンロードし、「sidebar-〇〇○.php」を作り、WordPressのsidebar.phpが入っていたフォルダの同じ階層にアップロードします。

※「〇〇○」の部分は任意の名前でOKです。半角英数字で何か入れましょう。ここの見本は〇〇○にevolsと入れ、ファイル名は「sidebar-evols.php」です。

    <div class="l-sidebar">
	  
    <?php if ( is_active_sidebar( 'sidebar-9' ) ) : ?>
            <?php dynamic_sidebar( 'sidebar-9' ); ?>
    <?php endif; ?>
	  
	  <?php if ( is_active_sidebar( 'sidebar-sticky' ) ) : ?>
      <div class="widgetSticky">
        <?php dynamic_sidebar( 'sidebar-sticky' ); ?>
      </div>
	  <?php endif; ?>
    
    </div>

「sidebar-9」の部分は、先ほどfunctions.phpに入力したidを入力します。上記のソースは「sidebar-9」とidに入力したので、その表記です。

スポンサーリンク

エリアが追加されてるのを一応見てみる。

外観→ウィジェットに、先ほど追加したエリアが表示されるので、ここまでの流れでfunction.phpにつけた「name」「description」で表示されているか見ておきましょう。

表示されていれば、ここまでの工程がちゃんとできてる証拠です。

スポンサーリンク

カテゴリーページに作ったサイドバー を表示させてみる。

category.php をテーマエディターでいじるか、ローカルにダウンロードしてから開き、最下部にある下記の部分の <?php get_sidebar( ); ?>を変更します。

変える前のソース

	<?php if ( get_option('fit_theme_archiveLayout') != 'value2' ):?>
    <!-- l-sidebar -->
      <?php get_sidebar(); ?>
    <!-- /l-sidebar -->
	<?php endif; ?>
    
  </div>
  <!-- /l-wrapper -->


<?php get_footer(); ?>

変えた後のソース

	<?php if ( get_option('fit_theme_archiveLayout') != 'value2' ):?>
    <!-- l-sidebar -->
      <?php get_sidebar(evols); ?>
    <!-- /l-sidebar -->
	<?php endif; ?>
    
  </div>
  <!-- /l-wrapper -->


<?php get_footer(); ?>

上記のように( )の中に、作った sidebar-〇〇○.php の〇〇○の名前に変更し、その「category.php」のファイルを保存します。

※上記のソースは、先ほどアップロードしたsidebar-evols.phpというファイルを読み込むために(evols)と記載していますが、別のファイル sidebar-〇〇○.php でつけた 〇〇○ の名前でアップロードした場合は、その名前に変更して下さい。

カテゴリーページではなく他のページに出力したいという場合はsingle.php(記事ページ)やpage.php(固定ページ)にも上記のコードがあるので、同様に変更すればOKです。

この方法の応用で、「カテゴリーページ毎にサイドバー の表示を分ける」や、「記事ページ毎にサイドバー の表示を分ける」方法は別記事でご紹介しますので、そちらも併せご覧ください。

WordPressカテゴリの最新記事