2022.12.11デフォルトの投稿一覧ページでは満足できない場合、カスタマイズするか新しく作成するしか方法はありません。今回のコラム記事では、上記のような疑問に答えます。くわえて、投稿ページ一覧の作成方法を3つ解説します。自分のレベルに合わせた、最適な作成方法を選択しましょう。まとめWordPressの投稿一覧ページとはWordPressの投稿一覧ページとは、投稿した記事が一覧で表示されるWebページのことです。サムネイルなどが表示されており、目的の記事を探しやすくなります。投稿一覧ページは、設定によって新しい記事順、古い記事順に並べ替えることが可能です。ほかにも、検索機能を活用して特定のキーワードが含まれる投稿一覧を表示することもできます。WordPressでトップページを固定ページにした場合、投稿一覧ページのURLは以下のように取得をします。上記の手順で、新規作成した固定ページのURLが投稿一覧ページのURLになります。WordPressで投稿一覧ページを作るメリット投稿一覧ページを作るメリットは、以下のとおりです。自由にデザインや表示項目を変更できるユーザーが記事を探しやすくなりユーザビリティが向上ユーザーの滞在率が上がり、直帰率が下がる内部リンク施策になりSEO効果が期待できる自分で投稿一覧ページを作れば、自由にデザインや表示項目を変更できます。カテゴリーやタグを表示したり、反対に投稿日時を表示しないようにしたりすることが可能です。投稿一覧ページは、ユーザーが記事を探すのをサポートしてユーザビリティを向上させます。内部リンクが増えることで内部施策になり、SEO効果が期待できます。投稿一覧ページを作るのに必須!ループの知識WordPressは、投稿一覧を表示するとき「ループ」という仕組みを使っています。ループとは、同じ処理を繰り返すことです。ループにはメインループ、サブループの2種類があります。手動で投稿一覧ページを作成するには、それぞれの仕組みを押さえておきましょう。メインループメインループとは、投稿一覧ページがもともと持っているデータを使ってループ処理することです。WordPressにはテンプレート階層があり、各Webページによって使用するテンプレートが決まっています。カテゴリーページならcategory.php、固定ページならpage.phpというテンプレートファイルが使われます。これらのテンプレートファイルが、もともと持っているデータを利用するのがメインループです。メインループの処理の一例は、以下のようになります。?>サブループサブループとは、テンプレート階層に関係なく利用できるループのことです。サブループはテンプレート階層に関係なく利用できるため、固定ページの一部に最新記事を表示するといった使い方ができます。メインループよりもソースコードが長く複雑になるサブループですが、どこでも使えるため非常に便利です。サブループのソースコードの一例は、以下のようになります。投稿一覧ページは、すべての投稿を表示する必要はありません。カテゴリーによって分けたり、タグ別に分けたりすることも可能です。一般的な投稿一覧ページは、すべての投稿を表示します。表示は、新しい投稿順になっていることがほとんどです。1ページの表示件数は表示するスタイルにもよりますが、10件~20件に設定されることが多いです。表示件数を決定するときにはパソコン、スマートフォンのどちらでも確認するようにしましょう。カテゴリー別の投稿一覧サブループを利用すれば、各カテゴリー別の投稿一覧を作成できます。サブループで、取得データのカテゴリーを指定することで実現が可能です。ほとんどのテーマではcategory.phpがその役割を担います。カスタマイズしたものを出力したい場合は、カテゴリー別の投稿一覧を作成しましょう。タグ別の投稿一覧サブループを利用することで、タグ別の投稿一覧ページを作成できます。一般的にはtag.phpというテンプレートでタグ別の投稿一覧を表示することが可能です。tag.phpで対応していない投稿の表示をしたい場合、タグ別の投稿一覧を作成しましょう。投稿日時別の投稿一覧サブループで、投稿日時別の投稿一覧を作ることもできます。2022年5月~2022年9月までの投稿を一覧にして表示することが可能です。表示したい期間をフォームからポストし、投稿一覧ページでポストされた条件にしたがって表示することもできます。投稿日時別の投稿一覧は、期間の指定をして記事を探す場合に活用できる方法です。【作成方法1】WordPressの投稿一覧ページを手動で作成WordPressの投稿一覧ページを手動で作成する手順について解説します。初心者によくある間違いですが、index.phpにarchive.phpのソースコードを貼り付けても投稿一覧は表示されません。一般的にarchive.phpで利用されているのはメインループだからです。今回は、どのテンプレートファイルでも利用できる、サブループによる表示方法を解説します。【STEP1】新規のPHPファイルを作る最初に行うのは、新規PHPファイルの作成です。テキストファイル」を選択してください。テキストファイルが新規で作成されますので、半角英数字で名前をつけて拡張子を「.php」に変更しましょう。ファイルの中身は何も書かなくてOKです。【STEP2】サブループを使って投稿一覧を取得サブループを使って投稿一覧を取得する方法は「get_posts」と「WP_Query」の2つがあります。それぞれの方法について、ソースコード付きで解説します。get_postsを使った場合get_postsを利用したサブループは、以下のとおりです。一覧情報取得に利用したループをリセットするwp_reset_postdata();?>WP_Queryを使った場合WP_Queryを使ったサブループは、以下のとおりです。一覧情報取得に利用したループをリセットするwp_reset_postdata();?>get_postsとWP_Queryの違いget_postsとWP_Queryの違いは、持っているデータ量です。get_postsは投稿データしか持っていませんが、WP_Queryは投稿データ以外のデータも持っています。ループに使用する関数もget_postsがforeachであるのに対し、WP_Queryはwhileを使用します。【STEP3】CSSやHTMLでデザインを整える投稿一覧ページのループ処理でデータを出力したら、今度はCSSやHTMLでデザインを整えてください。ループ部分で以下のように整形をしましょう。無料でありながら多機能なテーマである「Cocoon」では、ショートコードを使って投稿一覧を作成できます。Cocoonで投稿一覧ページを作る手順について解説します。【STEP1】固定ページを作成まず、固定ページを新規で作成しましょう。WordPressの管理画面から「固定ページ」→「新規追加」をクリックしてください。固定ページの編集画面を開いたら、ページタイトルとパーマリンクを設定します。今回はページタイトルを「投稿一覧」と設定しました。パーマリンクを設定するには、画面右上にある「歯車」アイコン→「固定ページ」→「概要」→「URL」をクリックしてください。クリックをすると、パーマリンクの入力欄が表示されます。パーマリンクは半角英数字で、簡潔な文字列にしましょう。【STEP3】ショートコードを挿入テーマがCocoonであることを確認し、固定ページにショートコードを挿入しましょう。Cocoonで投稿一覧を表示するショートコードは、以下のとおりです。[new_list]なお、new_listでは以下のようなオプションを指定できます。3】プラグインを使って投稿一覧ページを作成WordPressのプラグインを利用して、投稿一覧ページを作成することもできます。投稿一覧ページが作成できるプラグインは、以下の2つです。Postsは、WordPressの投稿一覧を簡単に表示できるプラグインです。固定ページにショートコードを挿入するだけで、投稿一覧ページが作成できます。Postsはカテゴリーで絞り込んだり、コメントの多さ順に一覧表示をしたりすることも可能です。表示する項目も、パラメーターによって自由にカスタマイズできます。postsは、ショートコードを利用してカテゴリー別の投稿一覧を表示できるプラグインです。ショートコードは固定ページ、投稿のどちらでも利用できます。オプションによって投稿一覧に表示する項目や、投稿を表示する順序などを手軽にカスタマイズすることができます。postsはおすすめのプラグインです。まとめWordPressの投稿一覧ページについて解説しました。投稿一覧ページとは、WordPressに投稿した記事の一覧を表示するWebページのことです。投稿一覧ページを作成すれば、ユーザビリティの向上やSEO効果が期待できます。投稿一覧ページを作る方法は、大きく分けると3つあります。自分のレベルに合わせた方法で、投稿一覧ページを作ってユーザビリティを向上させましょう。美容業まずは無料でご相談ください。