【パターン別】WordPressの投稿一覧を固定ページで作る方法

2024年6月21日

小ネタ君

この記事では、WordPressの投稿一覧を固定ページに表示させる方法について解説します。初心者でも簡単に理解できるよう、詳細な手順やサンプルコードを交えて説明していきます。

投稿一覧を固定ページに表示する効果

固定ページに投稿一覧を表示することで、ユーザーの利便性が向上し、SEO効果も期待ができます。

ユーザー体験の向上

WordPressの投稿一覧を固定ページに表示することは、ユーザー体験の向上につながります。
ユーザーは一箇所で全ての投稿を確認できるため、サイトのナビゲーションが簡単になります。

特に、訪問者が特定のカテゴリーやトピックに関連する投稿を探している場合に便利です。

SEO効果の向上

SEOの観点からも、投稿一覧を固定ページに表示することは有効です。Googleなどの検索エンジンは、サイトの構造が明確であることを評価します。
投稿一覧ページを作成することで、内部リンク構造が強化され、クローラビリティが向上します。

これにより、検索エンジンのランキング向上が期待できます。

サイト管理の簡便化

投稿一覧ページを作成することは、サイト管理の効率化にも役立ちます。
特に、定期的にコンテンツを更新する必要があるサイトでは、すべての投稿が一覧化されていることで、過去の投稿を簡単に確認し、更新することができます。

また、新しい投稿を追加する際にも、一覧ページを更新するだけで済むため、手間が省けます。

基本的な方法

ショートコードを利用することで、固定ページに投稿一覧を簡単に表示できます。
テンプレートファイルの作成もおすすめです。

ショートコードの利用

固定ページにショートコードを利用して投稿一覧を表示する方法について説明します。
以下のようなショートコードを実装することで、簡単に投稿一覧を表示できます。

【ショートコード実装用のサンプルphpコード】

<?php
function custom_post_list_shortcode() {
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 10,
    );
    $query = new WP_Query($args);
    $output = '<ul>';
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        }
        wp_reset_postdata();
    }
    $output .= '</ul>';
    return $output;
}
add_shortcode('custom_post_list', 'custom_post_list_shortcode');
?>

具体的な手順は以下の通りです。

WordPressダッシュボードにログイン: まず、WordPressのダッシュボードにログインします。
ショートコードの実装: 「外観」の「テーマファイルエディタ」からfunctions.phpファイルを開き、先ほどのサンプルphpコードを最下部に追記します。
新規固定ページを作成: ダッシュボードの「固定ページ」セクションから「新規追加」をクリックします。
ショートコードを追加: 作成した固定ページの本文に、以下のショートコードを追加します。
[custom_post_list]
ページを公開: 最後に「公開」ボタンをクリックして固定ページを公開します。

これで、公開された固定ページに投稿一覧が表示されるようになります。

テンプレートファイルの作成

テンプレートファイルを作成して、よりカスタマイズされた投稿一覧ページを作成する方法を紹介します。
テンプレートファイルを使用することで、より柔軟なデザインと機能を実現できます。

テンプレートファイルを作成: `page-posts.php`という名前のテンプレートファイルを作成します。

テンプレートコードを追加: 以下のコードをテンプレートファイルに追加します。

<?php
/* Template Name: Posts List */
get_header();
?>
<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        $args = array(
            'post_type' => 'post',
            'posts_per_page' => 10,
        );
        $query = new WP_Query($args);
        if ($query->have_posts()) :
            while ($query->have_posts()) : $query->the_post();
                get_template_part('template-parts/content', 'post');
            endwhile;
            wp_reset_postdata();
        else :
            get_template_part('template-parts/content', 'none');
        endif;
        ?>
    </main>
</div>
<?php
get_sidebar();
get_footer();
?>

このテンプレートファイルを使用して固定ページを作成することで、投稿一覧をカスタマイズされたデザインで表示することができます。

プラグインの活用

プラグインを使用することで、より簡単に投稿一覧を固定ページに表示できます。
具体的なプラグイン設定方法を紹介します。

WP Latest Postsプラグインの利用

WP Latest Postsプラグインを使用することで、最新の投稿を固定ページに表示することができます。このプラグインは、シンプルかつ直感的なインターフェースで、最新の投稿を表示するための強力なツールです。

プラグインのインストール: ダッシュボードの「プラグイン」セクションから「新規追加」をクリックし、「WP Latest Posts」を検索してインストールします。
プラグインの設定: インストール後、プラグインの設定画面に移動し、表示したい投稿の条件を設定します。
ショートコードの利用: 固定ページの本文に以下のショートコードを追加します。
```
[wp-latest-posts]
```

カスタムクエリの作成

WP_Queryクラスを使用して、特定の条件に合った投稿一覧を表示するカスタムクエリの作成方法を解説します。

カスタムクエリの基本

カスタムクエリを使用することで、特定の条件に合った投稿一覧を表示することができます。
カスタムクエリは、WP_Queryクラスを使用して作成します。

WP_Queryクラスの活用

WP_Queryクラスを使用して、カスタムクエリを作成する方法を説明します。
以下のコードは、特定のカテゴリーの投稿のみを表示するカスタムクエリの例です。

<?php
$args = array(
    'category_name' => 'news',
    'posts_per_page' => 5,
);
$query = new WP_Query($args);
if ($query->have_posts()) :
    while ($query->have_posts()) : $query->the_post();
        the_title('<h2>', '</h2>');
        the_excerpt();
    endwhile;
    wp_reset_postdata();
else :
    echo 'No posts found';
endif;
?>

クエリパラメータの設定方法

WP_Queryクラスを使用する際に設定できる主要なパラメータについて説明します。
これにより、より柔軟なクエリを作成することができます。

post_type: 表示する投稿タイプを指定します（例：post, page）。
posts_per_page: 表示する投稿の数を指定します。
category_name: 特定のカテゴリーの投稿のみを表示します。
orderby: 投稿の並び順を指定します（例：date, title）。
order: 並び順を昇順または降順に指定します（例：ASC, DESC）。

投稿一覧のデザインカスタマイズ

CSSやJavaScriptを使って、投稿一覧のデザインをカスタマイズし、ユーザーの興味を引く魅力的なページを作成します。

CSSによるスタイリング

投稿一覧の見た目を改善するためのCSSカスタマイズ方法について説明します。
以下のコードは、投稿タイトルのスタイルを変更する例です。

.post-list ul {
    list-style-type: none;
    padding: 0;
}

.post-list li {
    margin: 10px 0;
}

.post-list a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
}

.post-list a:hover {
    color: #0073aa;
}

このCSSをテーマのスタイルシートに追加することで、投稿一覧の表示が改善されます。

JavaScriptによるカスタマイズ

JavaScriptを活用して、投稿一覧をよりインタラクティブにする方法を紹介します。
例えば、投稿をクリックした際に詳細が表示されるアコーディオンメニューを作成することができます。

<ul id="post-list">
    <li>
        <a href="#" class="post-title">投稿タイトル1</a>
        <div class="post-content" style="display: none;">
            投稿内容1
        </div>
    </li>
    <li>
        <a href="#" class="post-title">投稿タイトル2</a>
        <div class="post-content" style="display: none;">
            投稿内容2
        </div>
    </li>
</ul>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var titles = document.querySelectorAll('.post-title');
    titles.forEach(function(title) {
        title.addEventListener('click', function(event) {
            event.preventDefault();
            var content = this.nextElementSibling;
            if (content.style.display === 'none') {
                content.style.display = 'block';
            } else {
                content.style.display = 'none';
            }
        });
    });
});
</script>

まとめ