【SWELL】今読んでいる記事のカテゴリーの人気記事をサイドバーに表示する方法

こんにちは。真（@shin_lifmo）です。

先日、このブログで使っているWordPressテーマ「SWELL」がアップデートされ、「制限エリアブロック」がパワーアップしました。

「特定のカテゴリーの記事にだけ表示する」といった条件を設定できるようになったので、このシステムを利用して「今読んでいる記事のカテゴリーの人気記事をサイドバーに表示」させようと思います。

カスタマイズの目的

このブログは大別すると「ゲーム」「読書」「動画」「ブログ」という4つのカテゴリーでできています。

たとえば、あなたが本について知りたいことがあって「読書」のカテゴリーの記事を読んでいたとします。

そこに表示される「ゲーム」や「動画」など、別のカテゴリーの人気記事。

と、あなたは表示された人気記事を読むことはありませんでした。

でも、これが「読書」のカテゴリーの人気記事だったら……

と、人気記事を読んだかもしれません。

「読書」のカテゴリーの記事を読んでいるときは「読書」のカテゴリーの人気記事、「ゲーム」のカテゴリーの記事を読んでいるときは「ゲーム」の人気記事という感じで、読者に興味のあるカテゴリーの人気記事を表示させて、ブログの回遊率を上げようというのが今回のカスタマイズの目的です。

カスタマイズの方法

制限エリアブロックと投稿リストブロックで「今読んでいる記事のカテゴリーの人気記事」のブログパーツをつくり、ウィジェットでサイドバーに表示させます。

制限エリアブロックの設定をする

まずは、WordPressの管理画面から［ブログパーツ］→［新規追加］を開きます。

「カテゴリー別人気記事」など、わかりやすいタイトルをつけておきましょう。

制限エリアブロックを追加します。

ブロックの設定の［ページで制限する］をONにします。

制限方法のタブを［ターム］に切り替え、［アーカイブページを対象にする］と［個別ページを対象にする］の両方にチェックを入れます。

「アーカイブページ」とは記事一覧のページのことです。ここではカテゴリーの記事一覧のページのこと。このブログでいえば、このページは「ゲーム」のカテゴリーのアーカイブページ（記事一覧のページ）です。

人気記事を表示させるカテゴリーを選びます。

Macならcommandキー、Windowsならctrlキーを押しながらクリックすると複数選択できます。親カテゴリーを選択しても、子カテゴリーは選択されないので、親カテゴリーと子カテゴリーの両方を選択しましょう。

これで、制限エリアブロックは、選択したカテゴリーのアーカイブページと、選択したカテゴリーの記事でしか表示されなくなりました。

投稿リストブロックの設定をする

次に、投稿リストブロックで、特定のカテゴリーの人気記事をつくります。

制限エリアブロックのなかに、投稿リストブロックを追加します。

投稿リストブロックの設定の［Settings］タブが選択されていることを確認し、［表示する投稿数］を任意の数に変更します。

レイアウトはサイドバーに表示するので［リスト型］、投稿の表示順序は［人気順］、各種表示設定は［PV数を表示する］のみON、カテゴリー表示位置は［表示しない］にします。

投稿リストブロックの設定の上部に戻り、タブを［Pickup］に切り替えます。

タクソノミーの条件設定から、人気記事に含めたいカテゴリーを選択します。制限エリアブロックの選択カテゴリーと同じカテゴリーを選択することになります。

ここでも、Macならcommandキー、Windowsならctrlキーを押しながらクリックすると複数選択できます。

ここでは、親カテゴリーを選択すれば、子カテゴリーの記事も人気記事に含められます。制限エリアブロックのカテゴリー選択とは違うので注意しましょう。子カテゴリーの記事を人気記事に含めたくない場合は［子カテゴリのみの記事を除外］にチェックを入れます。

これで、選択したカテゴリーの記事でのみ表示される、選択したカテゴリーの人気記事ができました。

これを、すべてのカテゴリー分つくります。

すべてのカテゴリー分つくる

すべてのカテゴリー分つくるとはいえ、2つ目からは簡単です。

制限エリアブロックのオプションから［複製］を選びます。

複製された制限エリアブロックと、投稿リストブロックの選択カテゴリーを変更します。

これで2つ目が完成です。

再び、制限エリアブロックのオプションから［複製］して、すべてのカテゴリー分つくりましょう。

どのカテゴリーにも属していないページ用の人気記事をつくる

今回つくった人気記事はウィジェットでサイドバーに表示させるので、このままだと「どのカテゴリーにも属していないページ（トップページや固定ページなど）」を開いたとき、ウィジェットタイトルだけが表示されてしまいます。

なので、「どのカテゴリーにも属していないページ」には、すべてのカテゴリーの人気記事を表示させることにします。

再び、制限エリアブロックのオプションから［複製］を選びます。

制限エリアブロックの設定は、制限方法を［ページ種別］に変更します。

［フロントページ］［ホーム（投稿一覧）］［検索結果ページ］［404ページ］［個別ページ］にチェックを入れて、個別ページの種類は［固定ページ］を選択します。

投稿リストブロックのカテゴリーは［…］を選びます。

これで「どのカテゴリーにも属していないページ」には、すべてのカテゴリーの人気記事が表示されるようになりました。

ブログパーツをサイドバーに表示させる

最後に、つくったブログパーツをサイドバーに表示させましょう。

右上の［公開］をクリックしてブログパーツを公開します。

WordPressの管理画面から［ブログパーツ］を開き、今回つくったブログパーツの呼び出しコードをコピーします。

WordPressの管理画面から［外観］→［ウィジェット］を開き、「カスタム HTML」を「共通サイドバー」に追加します。

追加した「カスタム HTML」のタイトルに「人気記事」と入力し、内容にコピーしたブログパーツの呼び出しコードをペーストし、［保存］をクリックすれば完了です。

おわりに

今読んでいる記事のカテゴリーの人気記事をサイドバーに表示するカスタマイズとして紹介しましたが、見てのとおり「SWELL」に標準搭載されている機能しか使っていません。

機能が多いので、組み合わせ次第でいろいろなことができるのが「SWELL」のすごいところであり、面白いところですよね。

「SWELL」のアップデートについてのツイートを、「SWELL」開発者の了さん（@ddryo_loos）や、「マニュオン」というすごいサイトを運営しているsuyaさん（@suyasite）にリツイートしてもらえて、たくさんの「いいね」をもらうことができたので、「手順を記事に起こそうかな」と思って、今回の記事を書きました。

この記事があなたの役に立てばうれしいです。