当ブログも記事が増えて、関連する記事を見つけるのがたいへんになってきています。そこで、記事のリストを作成するWordpress用プラグインを導入することにしました。
この記事の目次
関連する記事を読んでほしい
関連する記事を表示させる方法として、記事に設定したタグを使って一覧表示させることができます。
ただし、タグだけでは本当に関連性の高い、たとえば連続して読んでほしい記事だけを表示するのは難しいばあいがあります。
実は、なにも考えずにタグをどんどん増やしてしまった結果、上限に達してしまい、表示されないタグが出てきてしまいました。
そこで、タグとは別にキーワード検索で絞り込みを掛けて記事一覧を表示するプラグインを導入することにしました。
選んだのはContent Views
記事一覧を表示するWordpress用プラグインはたくさんありますが、今回の要求を満たしてくれたのはContent Viewsです。
ざっと調べた範囲ですが、カテゴリやタグを使って記事を表示するものが多く、キーワード検索までできるものはあまり見当たりません。
さらに、表示方法をグリッド／リスト／スライドの3タイプから選べることや、設定が比較的シンプルですぐに使えることからこれを選びました。
Content Viewsをインストールインストール
特に設定のシンプルさは、ブロガーにとっては重要だと思います。
あまり細かいところまで設定できても使い方を覚えるのに時間がかかっては、ブロガーとしては本末転倒です（記事執筆に集中したいですよね）。
緻密に外観デザインを追い込んでいけるのもありますが、それはWebデザイナーさん向けでしょう。
Content Viewsで記事リストを作る
では、Content Viewsで記事リストを作ってみましょう。
手順は、1)リストを新規作成する、2)表示する記事の条件を設定、3)表示スタイルを設定、4)作成したリストのショートコードを投稿や固定ページに貼り付ける、の4段階になります。
新規リストを作成する
管理画面のメニューでContent Viewsをクリックするとサブメニューが開くので、［新規追加］をクリックして新しいリストを作ります。
「タイトル」のところに、リストを区別するための名前を入力しましょう。
今回はマークダウンエディタTyporaの記事リストを作りたいので「Typora記事リスト」としておきます。
Content Viewsの設定画面
記事指定用のフィルターを設定
リストには投稿（ブログ記事）と固定ページのどちらも表示できます。
今回は投稿を選びました。
抽出する記事タイプと表示数を設定
Commonでは、リストに含む記事や除外する記事を指定できます。
リストに含む記事(”Include Only")は特定の記事だけリスト化したいときに使います。ここに記事IDを指定すると、このあと紹介する絞り込み設定に関係なく、指定した記事だけしかリストに表示されません。
除外(”Exclude”)の使い方については後ほど紹介します。
ここでは”Limit”の設定を空欄にしておきましょう（初期値は10）。
タグを使って記事を絞り込む
続いて表示する記事の絞り込みを行います。
まず、タグで絞り込みを行いたいのでTaxonomy（カテゴリー、タグ...）にチェック。
すると次のように、設定画面が現われます。
タグで抽出するように指定する
ここで”タグ"のほうにチェックを入れます。
さらに”Filter by Taxonomy””フィールドをクリックすると、ブログに設定しているタグの一覧が現われます。
今回抽出したい記事には”ライティング”というタグを割り当てているので、”ライティング”を選択すると、”Select terms"にタグ名がセットされます。
リストからタグを選択する
”Opereator”のフィールドではIN/NOT IN/ANDの3つの演算子を選べますが、今回はターム（キーワードに使うタグ）がひとつだけなので”IN”を選んでおけばいいでしょう
複数のタグを指定する場合のマッチング方法
キーワードでさらに絞り込み
これだけだと”ライティング”に関する記事がすべて表示されるので、さらにキーワードを使って絞り込みを行います。
Advancedの中の”キーワード”にチェックするとキーワード設定用のフィールドが現われます。
Typoraに関する記事だけ抽出したいので”Typora”と入力しました。
検索したいキーワードを登録する
プレビューで確認する
ここで、いちどプレビューを表示してどんな記事が抽出されているか確認してみましょう。
緑色の[Update Preview]ボタンをクリックすると、編集画面のいちばん上にプレビューが表示されます。
抽出した記事を確認する
ここでは記事のアイキャッチ画像だけが見えていますが、エリアを広げてやれば記事タイトルや要約が表示されます。
プレビュー内をスクロールしてみると、Typoraに関する記事のほかに、クリップボード拡張ツールCliborの記事がヒットしました。どうやら本文中に、”Typora”という文字を含んでいるようです。
不要な記事までヒットしている
不要な記事をリストから除外する
Cliborの記事はTyporaとの関係は薄いのでリストには不要です。
そこで、リストに表示させたくない記事を指定します。
プレビュー上で記事タイトル（リンク）をポイントするとブラウザの左下にリンク先アドレスが表示されます。この中に記事IDが表示されています。
リンクをポイントしてアドレスを確認する
今回の記事IDは"1967”なので、フィルター設定内のCommonグループで"Exclude”のフィールドに"1967"と入力します。
除外したい記事のIDを登録する
記事リストを昇順で出力する
さらにリストの並び順を指定しましょう。
初期設定では”降順”になっているので、最新記事から順番に表示されます。
今回のリストは投稿した順に読んでほしいので、Sort byを”Pubulish date”（投稿日）にして、順序を”昇順”にします。
Sort byではほかにも、記事ID順や編集日順、タイトル名順での並べ替えができます。
記事の並びを昇順にする
これで記事リストの抽出設定ができました。
続いて表示レイアウトをカスタマイズしていきましょう。
リストの外観をカスタマイズ
リストの外観は”Display Settings”タブで指定します。
まずLayoutを指定しましょう。
初期設定は”Grid”で、一行当たりのアイテム数(Items per row)は2です。
初期設定は1行2列のグリッド表示
このためすでにプレビューで見ていただいたように、大きなアイキャッチ画像が横にふたつ並んでレイアウトされます。
1行当たりのアイテム数を4にすると、次の図のようになります。
グリッドを4列表示にしたばあい
今回は、見出しだけの一覧形式にしたいので、”Collapsible List”に切り替えます。
折り畳み可能なリスト形式を選ぶ
プレビューを更新すると次のようになります。
リストの先頭だけ展開されている
”Collapsible List”は、名前のとおり見出しの折り畳みが可能なリストです。
リストの先頭だけは展開しているので、アイキャッチ画像や要約のテキスト、［続きを読む」ボタンが表示されていますが、ふたつめ以降は折りたたまれていて見出し（記事タイトル）だけの表示になっています。
”Open the first item by default”のチェックを外すと、すべてのリストアイテムが折りたたまれて、次のような表示になります。
先頭のアイテムも折りたたんだ状態
サムネイルの配置を選ぶ
サムネイル（アイキャッチ画像）は、要約テキストの上に表示するか、左または右のどちらかに表示させることができます。
今回は、左側に表示させたいのでFormatで、”Show thumbnail on the left/right of text”を選択します。
サムネイルをテキストの横に表示する
左右どちらに配置するかは、次のField Settingsで指定します。
表示の詳細設定
Field Settingsでは、各アイテム内の表示を指定します。
まず”Thumbnail position”で、アイキャッチ画像の配置を左または右から指定します。
続く4つのチェックボックスでは、サムネイル、記事タイトル、コンテンツ（要約）、投稿日や投稿者名、コメントなどのメタ情報の表示／非表示をそれぞれ選択します。
タイトルは記事タイトルに割り当てる見出しレベルの指定です。
デフォルトではH4タグが割り当てられますが、今回作成するリストはH2見出しの下に表示するので、階層の構成を守ってH3としました。
サムネイルは、アイキャッチ画像の大きさです。初期設定は”Medium (300 x 300）ですが、これはグリッド表示向きでリスト表示には大きすぎるので、最小の”St kaiwa image (100 x 100)にしました。
見出しタグやサムネイルの大きさを指定する
内容は、記事の表示に関する指定です。
ふつうは”Show Excerpt”を選択して、記事の先頭部分だけを表示させます。
”Ecerpt Settings”では、記事から抜き出す単語の数を指定します。初期設定では20ですが、日本語のブログ記事用としては短すぎるので、今回は120文字に指定してみました。
記事から抽出する文字数を指定する
”Read More Text”では［続きを読む］ボタンのテキストをカスタマイズできます。
今回は「この記事を読む」に変更しています。
ページネーション
リストの記事数が多いときは、ページネーションをオンにしましょう。
ページ切り替え式のリストを表示してくれるので、リストが長くなりすぎるのを防げます。
”Items per page”では、1ページに表示するアイテム数を指定できます。
ページネーションの指定
以上のような設定の結果、次のようなリストができあがりました。
作成した記事リストとカスタマイズ部分
この図ではリストの最後のアイテムを展開した状態になっていますが、もちろん最初は折りたたまれています。
アイキャッチ画像が左側に表示されていること、記事の冒頭部分120文字が表示されていること、ボタンのテキストが「この記事を読む」になっていること、左下にページネーションのボタンが表示されていることに注目してください。
記事リストができあがったら［保存］をクリックして作成完了です。
記事リストを表示させる
完成したリストを、ブログ記事上に表示させましょう。
編集画面のいちばん上に、リストを表示させるためのコードがふたつあります。
淡いグリーンの背景になっているほう（”For page content, text widget...”）は、ふつうのページ（ブログ編集画面）に貼り付けるショートコードです。
背景がグリーンのほう（”For theme file"）はテーマのソースコード内に貼り付けるphpのコードになっています。
ショートコードが表示されている
ショートコードのほうをクリックするとショートコード全体が選択されるので、さらに右クリックでコンテクストメニューから［コピー］を実行しましょう。
ショートコードは、記事リスト一覧からもコピーできます。すでに作成済みのリストを使うばあいは、編集画面を開かなくてもいいので、リスト上からコピーしてください。
リスト管理画面からもコードを取得できる
コピーしたショートコードを、記事の編集画面上に貼り付けます。
記事編集画面にショートコードを貼り付ける
あとは記事を開けば、ショートコードを挿入した位置に記事リストが表示されます。
記事上に表示されたリスト
より多くの記事を読んでもらえるように
これで記事の一覧を作ることができました。
関連する各記事にショートコードを貼り付けておけば、すべての記事にリストを表示してくれるので、ぜんぶのリンクを手作業で書いていくよりははるかに簡単です。
一連の記事が読者にもはっきり判ってページの回遊率もあがり、サイトの滞在時間を増やすのに役立ってくれるでしょう。
また、この方法だと新たに書いた記事がキーワードを含んでいれば自動的にリストに追加してくれるのでメンテナンスの手間が省けます。あまり重要でない記事が抽出されているようだったら、その記事だけ除外リストに追加すればいいでしょう。