みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。
今回は、他の記事も見てもらうためにプラグインなしで記事一覧を設置する方法をお伝えいたします。
「最新の投稿」ブロック
![最新の投稿ブロックアイコン](https://kotatsu.info/blog/wp-content/uploads/2021/08/icon_latest-list.png)
すぐに設置するなら、「最新の投稿」ブロックがオススメです。
![プラスボタンから「最新の投稿」ブロック選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-add-2.png)
![左上のプラスボタンからメニューを開いて「最新の投稿」ブロックを選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-add-1-687x1024.png)
今までの投稿した記事の一覧を表示できる、便利なブロックです。
公開されたページが表示されます。
![「最新の投稿」挿入後ページ表示](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-preview.png)
パスワードで保護したページも表示されます。ご注意ください。
配置変更・表示切り替え
ブロックツールでは、配置を変更できる他、「リスト」か「グリッド」に表示を切り替えられます。
![最新の投稿ブロックツールの配置変更](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-block-tool-align.png)
垂直配置の変更
- 左寄せ
- 中央寄せ
- 右寄せ
![](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-block-tool-list.png)
![](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-block-tool-grid.png)
デフォルトは左寄せのリスト表示です。
では右メニューバーでいろいろ調整してみましょう。
投稿コンテンツ設定
![投稿コンテンツ設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-contents-setting.png)
投稿ページの一部を表示します。
![投稿コンテンツ設定 ON](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-contents-setting-on.png)
オンにすると、このように新しいメニューが現れます。
抜粋
![最新の投稿ブロックの投稿コンテンツ設定の「抜粋」を選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-contents-setting-extract.png)
「抜粋」で記入した内容が表示されます。公開方法の解説で軽く触れた、記事の概要を入力するところです。空白の場合は、記事の最初の文章が表示されます。
抜粋内の最大単語数
![最新の投稿ブロックの投稿コンテンツ設定の「抜粋内の最大単語数」](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-contents-setting-extract-word.png)
WordPressの仕様により、英語のみ適用されます。日本語の場合は、特別な設定が必要です。
![最新の投稿ブロックの投稿コンテンツ設定の「抜粋内の最大単語数」を変更(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/oaV5JkuGDW-min.gif)
日本語にも設定を反映したい時は、専門の人に頼みましょう。
投稿全文
![最新の投稿ブロックの投稿コンテンツ設定の「投稿全文」](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-contents-setting-full-text.png)
記事の内容がすべて表示されます。
投稿メタ設定
![「最新の投稿」ブロックの「投稿メタ設定」](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-meta-setting.png)
記事の情報を、どこまで表示させるか設定できます。
投稿者名の表示
![最新の投稿ブロックの投稿メタ設定の「投稿者名の表示」](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-meta-setting-contributor.png)
記事を書いたユーザーの名前が表示されます。複数ユーザーで記事を書いている場合は、これにチェックを入れるといいでしょう。
投稿日を表示
![最新の投稿ブロックの投稿メタ設定の「投稿日を表示」](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-meta-setting-date.png)
投稿の公開日が表示されます。
アイキャッチ画像設定
![最新の投稿ブロックのアイキャッチ画像設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-thumbnail-setting.png)
アイキャッチ画像を表示し、詳しい設定を行います。
アイキャッチ画像を表示
![最新の投稿ブロックのアイキャッチ画像設定にある「アイキャッチ画像を表示」をオン](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-thumbnail-on.jpeg)
オンにすると、記事のアイキャッチ画像が表示されます。ただし、アイキャッチ画像を設定している記事のみです。
画像サイズ
![最新の投稿ブロックのアイキャッチ画像設定にある「画像サイズ」](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-thumbnail-size.png)
アイキャッチ画像のサイズを選択します。
画像の寸法
![最新の投稿ブロックのアイキャッチ画像設定にある「画像の寸法」](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-thumbnail-size-setting.png)
アイキャッチ画像のサイズを細かく調節できます。
画像の位置
![最新の投稿ブロックのアイキャッチ画像設定にある「画像の位置」調整(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/Bql7OV213p-min.gif)
アイキャッチ画像を左・中央・右のいずれかに配置できます。
アイキャッチ画像のリンクを追加
![最新の投稿ブロックのアイキャッチ画像設定にある「アイキャッチ画像のリンクを追加」(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/19DIL68XkD-min.gif)
チェックを入れれば、アイキャッチ画像にも記事のリンクを反映して、クリックしやすくします。
並び替えと絞り込み
![最新の投稿ブロックの並び替えと絞り込み設定メニュー](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-sort-refinement.png)
記事の並び順と、どういった記事を表示するか設定できます。
タグでの絞り込みはできません。
並び順
![最新の投稿ブロックの並び順](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-sort.png)
公開日順か、記事のタイトル名順に並び替えられます。
カテゴリー
![最新の投稿ブロックのカテゴリー絞り込み](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-category.png)
指定カテゴリーの記事に絞り込みます。複数選択可能です。
投稿者
![最新の投稿ブロックの投稿者絞り込み](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-filter-contributor.png)
特定のユーザーが書いた記事に絞ります。
項目数
![最新の投稿ブロックの「項目数」調整(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/czEgpE2RrP-min.gif)
カラム
![最新の投稿ブロックの表示カラム数(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/dYalWZiLZ4-min.gif)
同じカテゴリー・筆者の記事リンク一覧を挿入できるため、ブログの回遊率上昇につなげられます。
「クエリーループ」・「投稿一覧」ブロック
![クエリーループブロックアイコン](https://kotatsu.info/blog/wp-content/uploads/2021/08/icon_query-loop.png)
![投稿一覧ブロックアイコン](https://kotatsu.info/blog/wp-content/uploads/2021/08/icon_post-list.png)
デザインをもう少し調整したいなら、「クエリーループ」もしくは「投稿一覧」ブロックを使用します。両方とも同じブロックですから、どちらでも構いません。
![左上のプラスボタンからメニューを開いて「クエリーループ」「投稿一覧」ブロックを選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-post-list-add-2-726x1024.png)
レイアウトの設定
レイアウトをカルーセルかグリッドで確認します。
![投稿レイアウトをカルーセルで表示](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-layout-carousel.png)
![投稿レイアウトをグリッドで表示](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-layout-grid-838x1024.png)
選択できるレイアウトはこちらです。
![クエリーループレイアウト:標準](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-layout-standard-630x1024.jpeg)
![クエリーループレイアウト:左に画像](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-layout-left-img.jpeg)
![クエリーループレイアウト:小さな画像とタイトル](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-layout-small-img-title.jpeg)
![クエリーループレイアウト:グリッド](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-layout-grid-list.png)
![クエリーループレイアウト:大きなタイトル](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-layout-big-title-630x1024.png)
![クエリーループレイアウト:オフセット](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-layout-offset-774x1024.jpeg)
「新規」をクリックすると、表示パターンを4つの中から選べます。
![投稿表示のパターンを選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-new-layout.png)
![クエリーループ新規パターン:タイトルと日付](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-layout-title-order.png)
![クエリーループ新規パターン:タイトルと抜粋](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-layout-title-extract.png)
![クエリーループ新規パターン:タイトル、日付、抜粋](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-layout-title-extract-date.png)
![クエリーループ新規パターン:画像、日付、タイトル](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-layout-img-title-date.jpeg)
表示設定
ブロックツールで、記事の表示数を設定できます。
![クエリーループのブロックツールにある表示設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-block-tool-view-setting.png)
- ページごとの項目数
表示する記事の数です。 - オフセット
指定した数の記事を上から非表示にします。「1」にすると、一番上に表示していた記事が消えます。
![クエリーループブロックツールにあるリスト表示とグリッド表示の切り替え](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-block-tool-list-grid.png)
リストとグリッドの表示を切り替えられます。「最新の投稿」ブロックと同じです。
![クエリーループブロックツールにあるリスト表示とグリッド表示の切り替え(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/96fjdVebT7-min.gif)
テンプレートの編集
「最新の投稿」ブロックと違うのは、一覧のデザインをブロックで調整できる点です。
「デザイン」や「テーマ」系統で、投稿表示に関するブロックがあります。これを利用して、一覧テンプレートを編集できます。
![デザイン系統ブロックで投稿表示に関連するブロック](https://kotatsu.info/blog/wp-content/uploads/2021/08/design-block-query-loop-relevance-612x1024.png)
![テーマ系統ブロックで投稿表示に関連するブロック](https://kotatsu.info/blog/wp-content/uploads/2021/08/theme-block-query-loop-relevance-726x1024.png)
![クエリーループブロックの投稿テンプレートの編集(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/vJ7Vg3pBwI-min.gif)
一つの「投稿テンプレート」ブロックを編集すれば、「クエリーループ」ブロック内にある他の投稿の表示も同じになります。
テンプレートに少し要素を追加、微調整をしたいときに便利です。
右サイドバーに移ります。
色設定
![右メニューバーの色設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-color-select.png)
テキストと背景の色を変更できます。これも「最新の投稿」ブロックにはない機能でした。
![クエリーループブロックの色設定(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/jN6yuP9Lwx-min.gif)
設定
何の一覧を表示するか、基本設定できます。
![クエリーループの設定メニュー](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-setting-453x1024.png)
![](https://kotatsu.info/blog/wp-content/uploads/2021/11/query-loop-setting-template-query.png)
![投稿タイプ](https://kotatsu.info/blog/wp-content/uploads/2021/08/post-type-select.png)
![並び順](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-sort.png)
![先頭固定表示の投稿](https://kotatsu.info/blog/wp-content/uploads/2021/08/post-top-fixing-setting.png)
絞り込み
記事一覧の中から絞り込みします。
![クエリーループの絞り込み設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-narrowing-down.png)
![カテゴリーの絞り込み](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-category.png)
![タグでの絞り込み](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-narrowing-down-tag.png)
![投稿者の絞り込み](https://kotatsu.info/blog/wp-content/uploads/2021/08/latest-list-filter-contributor.png)
![キーワードでの絞り込み](https://kotatsu.info/blog/wp-content/uploads/2021/08/query-loop-narrowing-down-keyword.png)
以上、記事の一覧を設置する「最新の投稿」・「クエリーループ」ブロックを解説しました。
その他のブロックについての解説は、WordPressレクチャーからご覧ください。