【WordPress】個別記事のサイドバーに該当カテゴリーの記事一覧を表示させる方法

【WordPress】個別記事のサイドバーに該当カテゴリーの記事一覧を表示させる方法

WordPressで個別記事のサイドバーに該当カテゴリーの記事一覧を表示させる方法をご紹介します。
続けて記事を読んでもらいたいハウツーサイトなどで有効なカスタマイズです。

sidebar.phpに条件分岐のコードを記述する

個別記事とそれ以外のページでサイドバーの表示が変わる想定ですので、sidebar.phpには2パターンの出し分けをするためのコードを書きます。
テーマによって違いが出てくると思いますが、概ね下記のようなコードになります。

<?php
if( is_single() ) {
  dynamic_sidebar( 'single' );
} else {
  dynamic_sidebar( 'sidebar-1' );
} ?>
  • 1行目 個別記事の判別はis_single
  • 2〜4行目 個別記事とそれ以外の場合でサイドバーを出し分けます。

2, 4行目の引数はご自身の環境に合わせて適宜書き換えてください。

今回はphpファイルを出し分けるのではなく、functions.phpに定義したサイドバーを用いることを想定しています。
もしphpファイルを出し分ける場合はdynamic_sidebarではなくget_sidebarなどを使用してください。

functions.phpにサイドバーを定義する

個別記事に表示するサイドバーをfunctions.phpに定義します。
定義にはregister_sidebar関数を使用して行います。
具体的には下記の通りです。

<?php
register_sidebar( array(
    'id'          => 'single',
    'name'        => __( '個別記事一覧', 'テーマの名前' ),
	'description'   => __( 'ここにウィジェットを追加してください', 'テーマの名前' ),
	'before_widget' => '<section id="%1$s" class="widget %2$s">',
	'after_widget'  => '</section>',
	'before_title'  => '<h2 class="widget-title">',
	'after_title'   => '</h2>',
) ); ?>

先述のsidebar.phpの引数に渡した文字列とidは合わせる点に注意です。

サイドバーに目次を追加する

続いてサイドバーに目次を追加する手順です。
2つのステップがあるので次項より説明していきます。

ステップ1:目次用のphpファイルを作成する

続いて目次用のphpファイルを作成し、下記コードを記述します。
ここではファイル名を「mokuji.php」とします。

<?php
$categoryList = get_the_category();
for ( $num = 0; $num < count( $categoryList ); $num++ ) :
    $args = array(
        'cat' => $categoryList[ $num ] -> cat_ID, 
        'orderby' => 'date',
        'order' => 'ASC',
    );
    $the_query = new WP_Query( $args );
?>

<?php if( $the_query -> have_posts() ) : ?>
<h2 class="Mokuji">目次:<?php echo $categoryList [ $num ] -> cat_name; ?></h2>
<ol class="MokujiList">
<?php while( $the_query -> have_posts() ): ?>
<?php $the_query -> the_post(); ?>
<?php 
$page = get_post( get_the_ID() );
$slug = $page -> post_name;
$url = $_SERVER['REQUEST_URI']; ?>
<?php if( strstr( $url, $slug ) ): ?>
    <li class="MokujiList__item -current"><?php the_title(); ?></li>
<?php else: ?>
    <li class="MokujiList__item"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endif; ?>
<?php endwhile; ?>
</ol>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php endfor; ?>

上記のコードは今回のキモなので詳しく解説します。

  • 2行目 get_the_categoryで記事に付けられたカテゴリーを配列で返します。
  • 3〜8行目 取得したカテゴリーの数だけfor文を回し、各カテゴリの投稿の条件を$argsに格納します。
    取得したカテゴリーの数はcountでカウントしています。

  • 9行目 投稿条件を格納した$argsを引数にWP_Queryを実行し、投稿を取得します。
  • 13行目 取得したカテゴリー情報からカテゴリー名を取得して表示します。
  • 18行目 該当記事の投稿情報を取得して$pageに格納します。
  • 19行目 スラッグを取得して$slugに格納します。
  • 20行目 該当記事のurlを取得して$urlに格納します。
  • 21〜25行目 該当記事(カレント)の場合はリンクなしで、それ以外の記事はリンク付きで表示します。
    条件分岐には文字列を判別するstrstrを使用しています。

ステップ2:ウィジェットでPHPが使えるようにする

目次用のphpファイルを作成したら、phpファイルをウィジェットのカスタムHTMLにショートコードを用いて呼び出すします。
しかしデフォルトではウィジェットはPHPを認識してくれないので、一手間加える必要があります。
プラグインなどもありますが、今回はfunctions.phpに記述してウィジェットにPHPを認識させます。

funsctions.php

実現にあたって、以下の記事を参考にさせていただきました。

参考記事よりコードを引用させていただきました。
下記コードをfunctions.phpに記述します。

add_filter( 'widget_text', function( $ret ) {
	$php_file = 'mokuji';

	if( strpos( $ret, '[' . $php_file . ']' ) !== false ) {
		add_shortcode( $php_file, function() use ( $php_file ) {
			get_template_part( $php_file );
		});

		ob_start();
		do_shortcode( '[' . $php_file . ']' );
		$ret = ob_get_clean();
	}

	return $ret;
}, 99 );

2行目 「mokuji」という部分は、後述で作成するphpファイルの「.php」を除いたファイル名にあたるので名前をあわせておきます。

カスタムHTML

カスタムHTML側にはショートコードを記入します。

以上でサイドバーに目次となる記事一覧が表示されます。

私たちGlatchはコーポレートサイト制作を得意とするWeb制作事務所です。
お気軽にご相談・お問い合わせください。