Related Posts via Categories

カテゴリ制限付き関連記事表示プラグインのエントリーで

Related Posts via Categories

というwordpressプラグインを入れてみた。カテゴリ制限が付いているので、そのあたりを要する人にはおすすめのプラグインです。

デフォルトでは、関連記事を表示する場所が個別記事の下部になる。この表示位置をサイドメニューにするにはどうすればよいだろうか。表示位置を変更するだけであれば、それほど難しくないことが分かったので書いておこうと思う。

wordpress関連記事の表示場所を変更

最初に管理画面でRelated Posts via Categoriesへ進み以下の画像のオプションのチェックを外します。

本作業の重要ポイントは上の一点に集約されているのかなという感じです。

このオプションを無効にした場合、投稿記事を個別表示させるテーマファイルに、”display_related_posts_via_categories()”を挿入する必要があります。

上の引用を別の言葉に置き換えてみましょう。

オプションを無効にすると、デフォルトで個別記事の下に関連記事が表示されなくなります。ただし、

display_related_posts_via_categories()

をテーマファイルの任意の場所に追記することで好きな場所に関連記事を表示させることができます。

といった感じになります。

つまり、display_related_posts_via_categories()をサイドメニュー関連のテーマファイルに追加すれば良いわけです。

以下、テーマファイルがtwenty thirteenであることを前提として進めます。

twenty thirteenサイドメニューに関連記事を表示

twenty thirteenの場合は、サイドバー関連のテーマファイルが2種類あるようで、

sidebar.php
sidebar-main.php

の2種類があるようです。今回追記したのはsidebar.phpで、具体的には以下のように変更しました。

<div class="widget-area">
	<?php dynamic_sidebar( 'sidebar-2' ); ?>
        <?php display_related_posts_via_categories(); ?>
</div><!-- .widget-area -->

上記のようにdisplay_related_posts_via_categories()を追加します。すると関連記事が表示されるようになるのですが、twenty thirteenのデフォルト状態だと、oneカラム構成なので、サイドバー自体が表示されなくなっています。その場合には、適当なウィジェットをサイドバーに表示させることでサイドバーを有効化することができます。

wordpress管理画面で、

外観 → ウィジェット → 副ウィジェットエリア

に任意のウィジェットを追加することでサイドバーが有効になります。今回はあまりいい例ではありませんが、テキストウィジェットを追加しました。実際には以下のような状態になりました。

cssの適用

「Related Posts」の部分が関連記事の部分で、その上がテキストウィジェットです。無事に関連記事を表示することができましたので、twenty thirteenのデザインを適用してみましょう。

cssの適用は、Related Posts via Categoriesの管理画面から設定を行うことができます。今回は以下の部分を設定しました。

「全体を覆う前のタグ」を以下のように設定します。

<aside id="nav_menu-2" class="widget widget_nav_menu">

「全体を覆う後のタグ」は以下

</aside>

設定を保存してブラウザで再度表示を確認してみると以下のようにcssが適用された状態になります。

twenty thirteenのスタイルが適用されました。