WordPress

WordPress プラグインで記事一覧を表示させよう

当ブログも記事が増えて、関連する記事を見つけるのがたいへんになってきています。そこで、記事のリストを作成するWordpress用プラグインを導入することにしました。

 

関連する記事を読んでほしい

関連する記事を表示させる方法として、記事に設定したタグを使って一覧表示させることができます。

ただし、タグだけでは本当に関連性の高い、たとえば連続して読んでほしい記事だけを表示するのは難しいばあいがあります。

 

実は、なにも考えずにタグをどんどん増やしてしまった結果、上限に達してしまい、表示されないタグが出てきてしまいました。

そこで、タグとは別にキーワード検索で絞り込みを掛けて記事一覧を表示するプラグインを導入することにしました。

 

選んだのはContent Views

記事一覧を表示するWordpress用プラグインはたくさんありますが、今回の要求を満たしてくれたのはContent Viewsです。

 

ざっと調べた範囲ですが、カテゴリやタグを使って記事を表示するものが多く、キーワード検索までできるものはあまり見当たりません。

 

さらに、表示方法をグリッド/リスト/スライドの3タイプから選べることや、設定が比較的シンプルですぐに使えることからこれを選びました。

WordPress Content Viewsプラグイン

Content Viewsをインストールインストール

 

特に設定のシンプルさは、ブロガーにとっては重要だと思います。

あまり細かいところまで設定できても使い方を覚えるのに時間がかかっては、ブロガーとしては本末転倒です(記事執筆に集中したいですよね)。

緻密に外観デザインを追い込んでいけるのもありますが、それはWebデザイナーさん向けでしょう。

 

Content Viewsで記事リストを作る

では、Content Viewsで記事リストを作ってみましょう。

手順は、1)リストを新規作成する、2)表示する記事の条件を設定、3)表示スタイルを設定、4)作成したリストのショートコードを投稿や固定ページに貼り付ける、の4段階になります。

 

新規リストを作成する

管理画面のメニューでContent Viewsをクリックするとサブメニューが開くので、[新規追加]をクリックして新しいリストを作ります。

「タイトル」のところに、リストを区別するための名前を入力しましょう。

今回はマークダウンエディタTyporaの記事リストを作りたいので「Typora記事リスト」としておきます。

Content View設定画面

Content Viewsの設定画面

 

記事指定用のフィルターを設定

リストには投稿(ブログ記事)と固定ページのどちらも表示できます。

今回は投稿を選びました。

Content Views 記事タイプとフィルター

抽出する記事タイプと表示数を設定

 

Commonでは、リストに含む記事や除外する記事を指定できます。

リストに含む記事(”Include Only")は特定の記事だけリスト化したいときに使います。ここに記事IDを指定すると、このあと紹介する絞り込み設定に関係なく、指定した記事だけしかリストに表示されません。

 

除外(”Exclude”)の使い方については後ほど紹介します。

 

ここでは”Limit”の設定を空欄にしておきましょう(初期値は10)。

”Limit”を設定しておくと表示数を制限してしまうので、のちのち関連記事が増えてきたときに、リストに表示されないものが出てきてしまいます。

 

タグを使って記事を絞り込む

続いて表示する記事の絞り込みを行います。

まず、タグで絞り込みを行いたいのでTaxonomy(カテゴリー、タグ...)にチェック。

すると次のように、設定画面が現われます。

Content Views タクソノミー設定

タグで抽出するように指定する

 

ここで”タグ"のほうにチェックを入れます。

さらに”Filter by Taxonomy””フィールドをクリックすると、ブログに設定しているタグの一覧が現われます。

 

今回抽出したい記事には”ライティング”というタグを割り当てているので、”ライティング”を選択すると、”Select terms"にタグ名がセットされます。

Content Views タグの選択

リストからタグを選択する

 

”Opereator”のフィールドではIN/NOT IN/ANDの3つの演算子を選べますが、今回はターム(キーワードに使うタグ)がひとつだけなので”IN”を選んでおけばいいでしょう

Content Views タクソノミーのマッチング

複数のタグを指定する場合のマッチング方法

 

キーワードでさらに絞り込み

これだけだと”ライティング”に関する記事がすべて表示されるので、さらにキーワードを使って絞り込みを行います。

Advancedの中の”キーワード”にチェックするとキーワード設定用のフィールドが現われます。

Typoraに関する記事だけ抽出したいので”Typora”と入力しました。

Content Views キーワードの追加

検索したいキーワードを登録する

 

プレビューで確認する

ここで、いちどプレビューを表示してどんな記事が抽出されているか確認してみましょう。

緑色の[Update Preview]ボタンをクリックすると、編集画面のいちばん上にプレビューが表示されます。

Content Views プレビュー1

抽出した記事を確認する

 

ここでは記事のアイキャッチ画像だけが見えていますが、エリアを広げてやれば記事タイトルや要約が表示されます。

プレビュー内をスクロールしてみると、Typoraに関する記事のほかに、クリップボード拡張ツールCliborの記事がヒットしました。どうやら本文中に、”Typora”という文字を含んでいるようです。

Content Views プレビュー2

不要な記事までヒットしている

 

不要な記事をリストから除外する

Cliborの記事はTyporaとの関係は薄いのでリストには不要です。

そこで、リストに表示させたくない記事を指定します。

プレビュー上で記事タイトル(リンク)をポイントするとブラウザの左下にリンク先アドレスが表示されます。この中に記事IDが表示されています。

Content Views 記事ID確認

リンクをポイントしてアドレスを確認する

 

今回の記事IDは"1967”なので、フィルター設定内のCommonグループで"Exclude”のフィールドに"1967"と入力します。

Content Views 除外するIDを入力

除外したい記事のIDを登録する

 

記事リストを昇順で出力する

さらにリストの並び順を指定しましょう。

初期設定では”降順”になっているので、最新記事から順番に表示されます。

今回のリストは投稿した順に読んでほしいので、Sort byを”Pubulish date”(投稿日)にして、順序を”昇順”にします。

Sort byではほかにも、記事ID順や編集日順、タイトル名順での並べ替えができます。

Content Views ソートの指定

記事の並びを昇順にする

 

これで記事リストの抽出設定ができました。

続いて表示レイアウトをカスタマイズしていきましょう。

 

リストの外観をカスタマイズ

リストの外観は”Display Settings”タブで指定します。

まずLayoutを指定しましょう。

初期設定は”Grid”で、一行当たりのアイテム数(Items per row)は2です。

Content Views グリッド表示

初期設定は1行2列のグリッド表示

 

このためすでにプレビューで見ていただいたように、大きなアイキャッチ画像が横にふたつ並んでレイアウトされます。

 

1行当たりのアイテム数を4にすると、次の図のようになります。

Content Views 4カラムグリッド表示

グリッドを4列表示にしたばあい

 

今回は、見出しだけの一覧形式にしたいので、”Collapsible List”に切り替えます。

Content Views コラプシブルリスト

折り畳み可能なリスト形式を選ぶ

 

プレビューを更新すると次のようになります。

Content Views コラプシブルリストの表示例

リストの先頭だけ展開されている

 

”Collapsible List”は、名前のとおり見出しの折り畳みが可能なリストです。

リストの先頭だけは展開しているので、アイキャッチ画像や要約のテキスト、[続きを読む」ボタンが表示されていますが、ふたつめ以降は折りたたまれていて見出し(記事タイトル)だけの表示になっています。

 

”Open the first item by default”のチェックを外すと、すべてのリストアイテムが折りたたまれて、次のような表示になります。

Content Views 折り畳み状態

先頭のアイテムも折りたたんだ状態

 

サムネイルの配置を選ぶ

サムネイル(アイキャッチ画像)は、要約テキストの上に表示するか、左または右のどちらかに表示させることができます。

今回は、左側に表示させたいのでFormatで、”Show thumbnail on the left/right of text”を選択します。

Content Views サムネイルのレイアウト

サムネイルをテキストの横に表示する

左右どちらに配置するかは、次のField Settingsで指定します。

 

表示の詳細設定

Field Settingsでは、各アイテム内の表示を指定します。

まず”Thumbnail position”で、アイキャッチ画像の配置を左または右から指定します。

続く4つのチェックボックスでは、サムネイル、記事タイトル、コンテンツ(要約)、投稿日や投稿者名、コメントなどのメタ情報の表示/非表示をそれぞれ選択します。

 

タイトルは記事タイトルに割り当てる見出しレベルの指定です。

デフォルトではH4タグが割り当てられますが、今回作成するリストはH2見出しの下に表示するので、階層の構成を守ってH3としました。

 

サムネイルは、アイキャッチ画像の大きさです。初期設定は”Medium (300 x 300)ですが、これはグリッド表示向きでリスト表示には大きすぎるので、最小の”St kaiwa image (100 x 100)にしました。

Content Views コンテンツの詳細指定

見出しタグやサムネイルの大きさを指定する

 

内容は、記事の表示に関する指定です。

ふつうは”Show Excerpt”を選択して、記事の先頭部分だけを表示させます。

”Ecerpt Settings”では、記事から抜き出す単語の数を指定します。初期設定では20ですが、日本語のブログ記事用としては短すぎるので、今回は120文字に指定してみました。

Content Views 抜粋の指定

記事から抽出する文字数を指定する

”Read More Text”では[続きを読む]ボタンのテキストをカスタマイズできます。

今回は「この記事を読む」に変更しています。

 

ページネーション

リストの記事数が多いときは、ページネーションをオンにしましょう。

ページ切り替え式のリストを表示してくれるので、リストが長くなりすぎるのを防げます。

”Items per page”では、1ページに表示するアイテム数を指定できます。

Content Views ページネーション

ページネーションの指定

 

以上のような設定の結果、次のようなリストができあがりました。

Content Views リストの例

作成した記事リストとカスタマイズ部分

 

この図ではリストの最後のアイテムを展開した状態になっていますが、もちろん最初は折りたたまれています。

アイキャッチ画像が左側に表示されていること、記事の冒頭部分120文字が表示されていること、ボタンのテキストが「この記事を読む」になっていること、左下にページネーションのボタンが表示されていることに注目してください。

記事リストができあがったら[保存]をクリックして作成完了です。

 

記事リストを表示させる

完成したリストを、ブログ記事上に表示させましょう。

編集画面のいちばん上に、リストを表示させるためのコードがふたつあります。

 

 

淡いグリーンの背景になっているほう(”For page content, text widget...”)は、ふつうのページ(ブログ編集画面)に貼り付けるショートコードです。

背景がグリーンのほう(”For theme file")はテーマのソースコード内に貼り付けるphpのコードになっています。

Content Views ショートコードの選択

ショートコードが表示されている

 

ショートコードのほうをクリックするとショートコード全体が選択されるので、さらに右クリックでコンテクストメニューから[コピー]を実行しましょう。

ショートコードは、記事リスト一覧からもコピーできます。すでに作成済みのリストを使うばあいは、編集画面を開かなくてもいいので、リスト上からコピーしてください。

Content Views リスト一覧

リスト管理画面からもコードを取得できる

 

コピーしたショートコードを、記事の編集画面上に貼り付けます。

Content Views ショートコードの貼り付け

記事編集画面にショートコードを貼り付ける

あとは記事を開けば、ショートコードを挿入した位置に記事リストが表示されます。

Content Views リストの表示結果

記事上に表示されたリスト

 

より多くの記事を読んでもらえるように

これで記事の一覧を作ることができました。

関連する各記事にショートコードを貼り付けておけば、すべての記事にリストを表示してくれるので、ぜんぶのリンクを手作業で書いていくよりははるかに簡単です。

一連の記事が読者にもはっきり判ってページの回遊率もあがり、サイトの滞在時間を増やすのに役立ってくれるでしょう。

 

また、この方法だと新たに書いた記事がキーワードを含んでいれば自動的にリストに追加してくれるのでメンテナンスの手間が省けます。あまり重要でない記事が抽出されているようだったら、その記事だけ除外リストに追加すればいいでしょう。

 

-WordPress
-