宗像のホームページ屋さん > WordPress > WordPressで最新記事の一覧を表示させよう！

WordPressで最新記事の一覧を表示させよう！

WordPress

2024年5月5日

WordPressサイトを運営していると、最新の情報をユーザーに提供することは非常に重要です。ユーザーが最新の記事や情報を見逃さずにアクセスできるようにすることは、ユーザーエクスペリエンスを向上させ、サイトの成功につながる可能性があります。そこで、WordPressサイトのトップページに最新の投稿一覧を表示させる方法について紹介します。

まずはいくつかのメリットをご紹介します。

メリット

ユーザーが新しい情報を見逃さないようにできる

最新の投稿一覧をトップページに表示することで、ユーザーは常に最新の情報を簡単にアクセスできます。

ユーザーのUX（ユーザーエクスペリエンス）を向上させる

ユーザーが簡単に最新の投稿にアクセスできることで、サイトの使いやすさが向上し、ユーザーエクスペリエンスが向上します。

ユーザーの関心を引き起こし、コンバージョン率を向上させる可能性がある

最新の情報を見逃さずにアクセスできることで、ユーザーの関心を引き起こし、コンバージョン率の向上につながる可能性があります。

サイトを訪れたユーザーが他のページも見る可能性が広がる

最新の投稿一覧がトップページに表示されることで、ユーザーは他のページにも興味を持ちやすくなり、サイト全体の閲覧が促進されます。

表示の方法

1.HTMLでリストを作成

まずリストとして表示するので、<ul>タグの中に<li>タグを書きます

その際、クリックするとリンクが開かれるように<a>タグも書きます

<ul>
<li><a href=””></a></li>
</ul>

2.WordPressのループを使用

WordPressのループ（投稿を実際の画面へ表示するために使う処理）の開始のためのコードを<li>タグの直前に書きます

<?php
$args = array(
‘posts_per_page’ => 3 // 何件表示したいか
);
$posts = get_posts($args);
foreach ($posts as $post) : // ループの開始
setup_postdata($post); // 記事データの取得
?>

このPHPコードは、WordPressで使用されるものです。

WordPressのget_posts()関数を使用して、最新の投稿を取得します。

取得した投稿をforeachループで処理し、各投稿の情報を表示します。

$args変数には、get_posts()関数に渡すための取得条件が含まれています。
この例では、’posts_per_page’パラメータが設定され、取得する投稿の数が3に設定されています。
これにより、最新の3つの投稿が取得されます。

get_posts()関数は、指定された条件に基づいて投稿を取得し、結果を$posts変数に格納します。

foreachループは、$posts配列内の各投稿に対して繰り返し処理を行います。
$post変数は現在の投稿を表します。

setup_postdata($post)関数は、現在の投稿をセットアップし、WordPressのグローバル変数に関連する情報を提供します。
これにより、the_title()やthe_content()などの関数を使用して、投稿のタイトルや内容などを表示することができます。

3.リンクの設定

各投稿のタイトルに対して、詳細ページへのリンクを設定します。

<a>タグのhrefに<?php the_permalink(); ?>を書き、リンクを貼り付けます。

タイトルの表示は<?php the_title(); ?>です。

<li><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></li>

4.ループの終了とクエリのリセット

ループ処理が終了した後は、endforeach;でループを終了し、wp_reset_postdata()関数を使用して直前のクエリをリセットします。

</li>タグの直後に書きます

<?php
endforeach; // ループの終了
wp_reset_postdata(); // 直前のクエリをリセットする
?>

最終的なコード

<ul>
        <?php
        $args = array(
          ‘posts_per_page’ => 3 // 何件表示したいか
        );
        $posts = get_posts($args);
        foreach ($posts as $post) : // ループの開始
          setup_postdata($post); // 記事データの取得
        ?>
          <li><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></li>
        <?php
        endforeach; // ループの終了
        wp_reset_postdata(); // 直前のクエリをリセットする
        ?>
</ul>

WordPressサイトのトップページに最新の投稿一覧を表示させることは、ユーザーエクスペリエンスを向上させ、サイトの成功につながる重要な要素です。

上記の手順に従って実装することで、ユーザーが最新の情報を見逃さずにアクセスできるようになります。是非、あなたのWordPressサイトにも取り入れてみてください。

以上です。

記事一覧