【WordPress】個別記事のサイドバーに該当カテゴリーの記事一覧を表示させる方法
WordPressで個別記事のサイドバーに該当カテゴリーの記事一覧を表示させる方法をご紹介します。
続けて記事を読んでもらいたいハウツーサイトなどで有効なカスタマイズです。
目次
個別記事とそれ以外のページでサイドバーの表示が変わる想定ですので、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制作事務所です。
お気軽にご相談・お問い合わせください。