WordPressでサムネイル付きのページリストを簡単に表示する方法

WordPressのページリストをより魅力的にする簡単な方法をお探しですか？サムネイルを追加することは、視覚的な魅力を高め、サイトのナビゲーションを改善するためのシンプルかつ効果的なテクニックです。

ページタイトルの横にアイキャッチ画像を表示することで、訪問者はコンテンツに関するより多くの情報を得ることができ、クリックしてそれらのページを訪れる可能性が高まります。

WPBeginner では、多くのユーザーが WordPress サイトを最適化するのを支援してきました。このトリックが大きな違いを生むことを私たちは知っています。 

この記事では、WordPressでサムネイル付きのページリストを表示する方法をステップバイステップでご紹介します。

WordPressでサムネイル付きのページリストを表示する理由

WordPressには、投稿と固定ページという2つの異なる投稿タイプがあります。

ページは、「会社概要」、「お問い合わせ」、「サービス」ページのような、より永続的なコンテンツに使用されます。一方、投稿は、より頻繁に更新されるブログコンテンツに使用されます。

あなたの最も重要なページは通常、メインナビゲーションメニューからリンクされていますが、表示したいページが他にもあるかもしれません。

サムネイル付きのページリストを追加することで、標準のテキストリンクよりも魅力的なリンクを作成し、訪問者に各ページのコンテンツについてより良いアイデアを提供できます。これは、WordPressウェブサイトに役立ちます。

訪問者が関心を持ち、興味を持てば、より多くのページを訪れ、ウェブサイトに長く滞在する可能性が高まります。これにより、購入したり、メールリストに参加したりする可能性が高まります。

とはいえ、ウェブサイトにサムネイル付きのページリストを表示するいくつかの方法を見ていきましょう。使用したい方法に直接ジャンプするには、以下のクイックリンクを使用してください。

• 方法1. WordPressにコードを追加してサムネイル付きのページリストを表示する
• 方法2：WordPressブロックエディターを使用してサムネイル付きのページリストを表示する

方法1. WordPressにコードを追加してサムネイル付きのページリストを表示する

サムネイル付きのページリストを表示する1つの方法は、WordPressファイルにコードを追加することです。

この方法はより高度ですが、カスタマイズ可能なショートコードを使用できるという利点があります。新しいページを公開するたびに手動でリストを更新する必要がある代わりに、ショートコードが自動的に更新されたページリストを生成します。

これまでにWordPressサイトにコードを追加したことがない場合は、Web上のスニペットをWordPressに貼り付けるための初心者ガイドをご覧ください。

次に、次のコードを、functions.phpファイル、サイト固有のプラグイン、またはコードスニペットプラグインを使用して追加する必要があります。

add_shortcode('pagelist', function ($args) {
    $args = wp_parse_args($args, [
        'type'  => 'page',
        'limit' => 10,
    ]);
    $out = [];
    $ids = [];
    // Check if we have a predefined list od IDs
    if ( ! empty($args['id'])) {
        $ids = array_filter(explode(',', $args['id']), function ($id) {
            return ! empty($id);
        });
        $ids = array_map('intval', $ids);
    }
    // If we don't have a predefined list od IDs, get the latest posts based on 'limit' parameter
    if (empty($ids)) {
        $queryArgs = [
            'post_type'              => isset($args['type']) && post_type_exists($args['type']) ? $args['type'] : 'page',
            'posts_per_page'         => ! empty($args['limit']) && is_numeric($args['limit']) ? intval($args['limit']) : 10,
            'ignore_sticky_posts'    => true,
            'fields'                 => 'ids',
            'cache_results'          => false,
            'update_post_meta_cache' => false,
            'update_post_term_cache' => false,
        ];
        $ids = get_posts($queryArgs);
        wp_reset_postdata();
    }
    foreach ($ids as $id) {
        $img = has_post_thumbnail($id)
            ? get_the_post_thumbnail($id, [60, 60])
            : '<span class="wpb-post-list__no-image"></span>';
        $excerpt = has_excerpt($id) ? wpautop(get_the_excerpt($id)) : '';
        $out[] = "<a href='" . get_the_permalink($id) . "' class='wpb-page-list__item'>
            <div>{$img}</div>
            <div>
                <div><h4>" . get_the_title($id) . "</h4></div>
                {$excerpt}
            </div>
        </a>";
    }
    return "<div class='wpb-page-list'>" . implode('', $out) . "</div>";
});

このコードは、市場で最高のコードスニペットプラグインであるWPCodeを使用して追加することをお勧めします。

WPCodeを使用すると、テーマのfunctions.phpファイルを編集せずに、カスタムコードをWordPressに安全かつ簡単に（安全かつ簡単に）追加できます。

開始するには、無料のWPCodeプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。

プラグインがアクティブになったら、WordPress ダッシュボードから Code Snippets » + Add Snippet に移動します。 

スニペットの追加ページで、「カスタムコードの追加（新規スニペット）」オプションにマウスカーソルを合わせ、「カスタムスニペットの追加」ボタンをクリックします。

次に、画面に表示されるポップアップで、コードタイプとして「PHPスニペット」を選択します。

そこから、コードの目的を思い出すのに役立つスニペットのタイトルを追加する必要があります。

次に、上記のコードを「コードプレビュー」ボックスに貼り付けます。

その後、スイッチを「非アクティブ」から「アクティブ」に切り替え、「スニペットを保存」ボタンをページの上部でクリックするだけです。

このコードスニペットは、サイトのどこにでもサムネイル付きのページリストを表示するために使用できるショートコードを作成します。

ショートコードを使用する前に、ページリストが適切に表示されるように、次のCSSをサイトに追加する必要があります。

これが初めての場合は、WordPressサイトにカスタムCSSを簡単に追加する方法に関するガイドをご覧ください。

.wpb-page-list{
    display: block;
    margin: 10px 0 35px;
}
.wpb-page-list__item{
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-column-gap: 16px;
    align-items: center;
    text-decoration: none;
    margin: 10px 0;
}
.wpb-page-list__item:hover h4{
    text-decoration: underline;
}
.wpb-post-list img,
.wpb-post-list__no-image{
    display: block;
    width: 60px;
    height: 60px;
}
.wpb-post-list__no-image{
    background: #aaa;
}
.wpb-page-list__item h4{
    font-size: 20px;
}
.wpb-page-list__item p {
    font-size: 1rem;
    color: #555;
}

その後、ページリストを追加するために、次のショートコードをWordPressに追加する必要があります。

[pagelist]

このショートコードは、公開日の新しい順に最新の10ページを含むページリストを表示します。新しいページが追加されると自動的に更新されます。

表示するページ数を制限したい場合は、以下のショートコードを使用できます。

[pagelist limit=3]

表示したいページ数に合わせて「3」を置き換えるだけです。

ショートコードをWordPressに追加するには、編集したいページを開き、「プラス」の追加ブロックボタンをクリックします。

その後、「ショートコード」ブロックを検索します。

次に、「ショートコード」ブロックをクリックしてサイトに追加し、上記のショートコードを貼り付けます。

完了したら、「保存」または「公開」をクリックして変更を保存してください。

その後、訪問者はサムネイル付きのページリストを表示できるようになります。

また、ウィジェットでショートコードを使用して、サイドバーやフッターにページリストを表示することもできます。

特定のサイトページでページリストを表示する

特定のページのみのページリストを表示するには、サイトに次のショートコードを追加する必要があります。

[pagelist id="20, 10, 35"]

このショートコードは、ページIDに基づいて特定のページを表示します。詳細については、WordPressでページIDを見つける方法に関するガイドをご覧ください。

最新のブログ投稿リストを表示する

最新のブログ投稿リストを表示するためにショートコードを使用することもできます。これは、ブログ投稿のページビューを増やすのに役立ちます。

次のショートコードをWordPressに追加するだけです。

[pagelist type=post]

最新のブログ投稿のリストが読者にどのように表示されるかは次のとおりです。

公開したすべてのページにページリストを表示する

最後に、公開したすべてのページを含むサムネイル付きのページリストを表示できます。

これは、アーカイブページや読者向けのHTMLサイトマップページを作成したい場合に役立ちます。追加された投稿のサムネイルは、単純なページリストよりも魅力的になります。

サイトに次のショートコードを追加する必要があります。

[pagelist limit="-1"]

新しいページを公開すると、ページリストは自動的に更新されます。

方法2：WordPressブロックエディターを使用してサムネイル付きのページリストを表示する

WordPressでページリストを表示する別の方法は、WordPressブロックエディターを使用することです。

注意: この方法を使用すると、新しいページが公開されても自動的に追加されないため、ページリストを手動で作成および更新する必要があります。

これを行うには、編集したいページを開きます。

次に、「プラス」追加ブロックアイコンをクリックしてブロックメニューを開きます。

その後、検索ボックスで「Columns」を検索します。

次に、「カラム」ブロックを選択します。

これにより、利用可能なカラムブロックのリストが表示されます。

「30/70」カラムブロックを選択します。左側のカラムをサムネイル画像に、右側のカラムをページタイトルと簡単な概要に使用します。

次に、「プラス」の追加ブロックアイコンをクリックします。

その後、「画像」ブロックを選択してアイキャッチ画像を追加します。これにより、新しい画像をアップロードするか、メディアライブラリから画像を選択できます。

画像にリンクを付けたい場合は、「リンクを挿入」アイコンをクリックしてください。

次に、ページのURLを追加するだけです。

画像を追加したら、右側の列にある「プラス」の追加ブロックアイコンをクリックします。

次に、「見出し」ブロックを検索し、クリックしてページに追加します。

次に、ページタイトルを入力し、それをハイライトします。

次に、「リンク」アイコンをクリックしてページにリンクを追加します。

リンクを同じページで開くか、新しいタブで開くかを選択できます。トグルをオンまたはオフにすることで。

見出しの下にテキストを追加したい場合は、再度「ブロックを追加」アイコンをクリックして「段落」ブロックを選択してください。

次に、利用可能なテキストエリアに単純に入力します。

作成したばかりのフォーマットを使用してリストにアイテムを追加するには、列ブロックをクリックし、3つのドットの「オプション」メニューを選択します。

次に、ドロップダウンリストから「複製」オプションを選択します。

これにより、列のコピーが自動的に作成されます。

画像、見出し、テキストを変更するには、上記と同じ手順に従うだけです。

ページリストの変更が完了したら、ページ上部にある「更新」または「公開」ボタンをクリックしてください。

これで、訪問者は投稿のサムネイル付きで、より魅力的なページリストを確認できるようになります。

注意: サムネイルなしでページリストを追加できる「ページリスト」ブロックという別のブロックもあります。

ただし、上記の手動方法は、ブロックエディターを使用してサムネイル付きのリストを追加する唯一の方法です。

サムネイル付きのページリストも含む完全にカスタムなページを作成したい場合は、SeedProdプラグインを使用して、ドラッグ＆ドロップビルダーでこれを行うことができます。詳細については、WordPressでカスタムページを作成する方法に関するガイドを参照してください。

この記事が、WordPressでサムネイル付きのページリストを簡単に表示する方法を学ぶのに役立ったことを願っています。また、おすすめのWordPressテーマビルダーや、WordPressサイトに無限スクロールを追加する方法に関するガイドもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。