WordPress 関連記事一覧を表示する（GeneratePress テーマ）

このブログに現在使用されている GeneratePress テーマ関連する記事のリストを表示するオプションは提供されません。 関連記事のリストを表示する方法はさまざまです。 関連文を表示するプラグインを使用すると簡単です。 関連する投稿プラグインで目的のレイアウトで投稿を表示できない場合は、フックを使用してコードを追加できます。 以下では、プラグインを使用せずに関連文を表示する方法と、プラグインを使用して関連文を表示する方法について説明します。

以下は、ジェネレートプレスのテーマに基づいて説明されていますが、 アストラ、Neveなど他のテーマにも適用可能です。

[この記事は、2023年9月29日にコードを最新バージョンに合わせて修正して再発行されました。 ]

WordPress 関連記事一覧を表示する

プラグインを使用して関連記事のリストを表示する方法は、GeneratePress テーマに関連記事リストを表示する方法「を参照してください。WP Show Postsというプラグインを使用して、各ポストの下部に関連する記事のリストを表示する方法について説明します。

直接コードを作ってみたいと思ったら次の記事を参照してみることができます。

• 現在のカテゴリの関連記事（Related Posts）を表示する方法
• WordPressで同じカテゴリー内の他の記事を表示する

例として、次の図のように寀ーブログで使用されている関連記事機能のように表示する方法を簡単に説明します。

基本的に「WordPressで同じカテゴリー内の他の記事を表示する「で使用されているコードに似ています。

この方法は、 GeneratePressだけでなく、他のテーマでも活用が可能です。 代わりに、以下に説明するElementsに追加する方法はなく、テーマファイル（例：content.php）にコードを直接追加します。

GeneratePress テーマで関連記事のリストを表示する（ユーザーコード）

ここでは、 GeneratePressの有料版に提供されているElementsを使用して関連記事のコードをフックを介して追加する方法を説明します。 無料版を使用している場合、チャイルドテーマを造り子テーマの関数ファイル（funtions.php）にフックを追加することができます。

ルックス（또는 テーマデザイン）> Elementsに移動し、 Add New Element（新しいエレメントを作成し）をクリックして、新しいElementを作成するようです。

Element編集​​画面が表示されたら要素名を指定して、次のコードを追加します。

<!-- Related Posts Section -->
<div class="related-posts">

    <?php 
    $categories = get_the_category();
    
    // Check if the post has categories
    if (!empty($categories) && !is_wp_error($categories)):

        // Get the ID of the primary category (first category in the list)
        $primary_category_id = $categories[0]->term_id;

        // Display the primary category name
        ?>
        <h4>
            <?php echo esc_html($categories[0]->name); ?> 카테고리의 다른 글
        </h4>

        <?php
        // Define the arguments for the related posts query
        $query_args = array(
            'cat'            => $primary_category_id,
            'post_type'      => 'post',
            'post__not_in'   => array(get_the_ID()),
            'posts_per_page' => '5',
            'orderby'        => 'rand'
        );

        $related_cats_post = new WP_Query($query_args);

        // Check if there are any related posts
        if ($related_cats_post->have_posts()): 
        ?>
            <!-- Display the list of related posts -->
            <ul>
                <?php while ($related_cats_post->have_posts()): $related_cats_post->the_post(); ?>
                    <li>
                        <a href="<?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </li>
                <?php endwhile; ?>
            </ul>

            <?php 
            // Restore the original post data
            wp_reset_postdata();
        endif; 
    endif;
    ?>

</div><!-- End of Related Posts Section -->

※前のコードでエラーを修正しました。 また、複数のカテゴリがXNUMXつの投稿に指定されている場合を考慮するようにコードを変更しました。

上記のコードは、同じカテゴリの5つの記事をランダムに表示します。

上記のコードは、この記事を書いたときにうまくいきました。 うまくいかない場合は、上記のコードではなく次のコードでテストしてください。

<!-- Related Posts Section -->
<div class="related-posts">

    <!-- Display the Category Name -->
    <h4>
        <?php 
        $categories = get_the_category();
        if (!empty($categories)) {
            echo esc_html($categories[0]->name);
        }
        ?> 
        카테고리의 다른 글
    </h4>

    <?php 
    // Define the arguments for the related posts query
    $query_args = array( 
        'category__in'   => wp_get_post_categories(get_the_ID()), // Using get_the_ID() directly
        'post_type'      => 'post',  // Hardcoded 'post' post type
        'post__not_in'   => array(get_the_ID()),
        'posts_per_page' => '5',
        'orderby'        => 'rand'
    );

    $related_cats_post = new WP_Query($query_args);

    // Check if there are any related posts
    if ($related_cats_post->have_posts()): 
    ?>
        <!-- Display the list of related posts -->
        <ul>
            <?php while ($related_cats_post->have_posts()): $related_cats_post->the_post(); ?>
                <li>
                    <a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                    </a>
                </li>
            <?php endwhile; ?>
        </ul>

        <?php 
        // Restore the original post data
        wp_reset_postdata();
    endif; 
    ?>

</div><!-- End of Related Posts Section -->

すべてのカテゴリ文を表示したい場合 'category__in' => wp_get_post_categories($post->ID), 行を次の行に置き換えます。

'category__in'   => $cat_ids,

ランダムに表示したいていない場合 'orderby' => 'rand' 行を削除します。

上記のコードで 'post__not_in' => array(get_the_ID())は現在の記事を除外する機能をします（"How we exclude current post form related posts"参照）。

上記のコードには、サムネイル（属性画像）を表示するコードは含まれていません。 サムネイルを表示したい場合」現在のカテゴリの関連記事（Related Posts）を表示する方法「で使用されているコードを参照できます。

Settings（設定） タブで フックは generate_after_contentを選択して、 Execute PHP（PHP実行）をチェックして有効にします。

そして Display Rules（表示ルール） タブをクリックして、 Location（位置）에 記事> All文を選択します。

GeneratePress テーマのElementsの詳細は、「GeneratePress テーマフックを使用する「を参考にしてください。

次に、CSSを使用して、レイアウトを適切に変更するようにします。 たとえば、次のようなコードを ルックス（또는 テーマデザイン）>カスタマイズ>追加CSSに追加したり、チャイルドテーマのstyle.cssファイルに追加することができます。

/* 관련 글 */
.related-posts {
    margin-top: 30px;
    border: 1px solid #ccc;
    padding: 10px 10px 3px 10px;
}

.related-posts ul * {
    font-size: 0.9rem;
}

.related-posts h4 {
    font-weight: 550;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.related-posts ul {
    margin-bottom: 8px;
}

今記事を見てみると文章の下部に関連記事のリストが表示されます。

ショートコードとして追加する方法

WordPress 通知パネルでPHPコードを追加するとエラーが発生することがあります。 たとえば、コードを追加するときSpecial Characters must be escaped「エラーが発生することはまれですが、そうです。 GeneratePress テーマ自体では、このようなエラーは発生しません。 サーバー設定に問題がある場合、またはセキュリティルール（ファイアウォールルール）のために、このエラーは発生しないと思います。

この場合、フックを使用してコードを作成してテーマ関数ファイルに直接追加できます。 この方法が難しい場合は、ショートコードとして追加することも可能です。

次のようなコードを チャイルドテーマ 内の関数ファイル（functions.php）に追加します。 FTP/SFTP経由でWebサーバーに接続し、/wp-content/themes/チャイルドテーマ/functions.phpファイルを編集できます。 Bluehost などcPanel環境を提供している場合は、ファイルマネージャ（File Manager）を介してファイルを変更できます。

function related_posts_shortcode() {
    ob_start(); // Start output buffering to capture the content

    $post_id = get_the_ID();
    $categories = get_the_category($post_id);

    echo '<div class="related-posts">'; // Start the container here

    // If the post has categories
    if (!empty($categories) && !is_wp_error($categories)) {
        // Consider the first category as the "primary" category
        $primary_category_id = $categories[0]->term_id;

        // Display the first category name
        echo '<h4>' . esc_html($categories[0]->name) . ' 카테고리의 다른 글</h4>';

        // Define the query arguments
        $query_args = array(
            'cat' => $primary_category_id,
            'post_type' => 'post',
            'post__not_in' => array($post_id),
            'posts_per_page' => '5',
            'orderby' => 'rand'
        );

        $related_cats_post = new WP_Query($query_args);

        // Check if there are any related posts
        if ($related_cats_post->have_posts()):
            ?>
            <ul>
                <?php while ($related_cats_post->have_posts()): $related_cats_post->the_post(); ?>
                    <li>
                        <a href="<?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </li>
                <?php endwhile; ?>
            </ul>
            <?php
            // Restore original Post Data
            wp_reset_postdata();
        endif;

    }

    echo '</div>'; // End the container here

    return ob_get_clean(); // Return the captured content and stop output buffering
}


// Register the shortcode
add_shortcode('related_posts', 'related_posts_shortcode');

その後、次のショートコードを関連する記事を表示する場所に追加します。

[related_posts]

GPプレミアムのElementを使ってフックとして追加する場合は、次の図のようにショートコードを入力してください。 Execute Shortcodes チェックボックスを選択して有効にします。

表示ルール タブでは、 投稿 - All 投稿に表示されるように設定します。

コードを追加するときにエラーが発生した場合 ここからプラグインをダウンロードしてインストールし、関連記事のリストを表示する場所に[related_posts]ショートコードを追加してください。

プラグインを使用する

上記のコードを使用したとき、もし同じカテゴリー内の記事が表示されずすべてのカテゴリ文が表示される場合 GeneratePress フォーラムの投稿 "Related / Popular Posts widget「に記載されている方法を試すことができます。

GeneratePress フォーラム投稿の担当者が提示する方法は、 GeneratePress テーマに関連記事リストを表示する方法記事で紹介するWP Show Postsプラグインを使用することで、ショートコードを次のような形式で追加します。

[wp_show_posts id="123" settings="taxonomy=category&tax_term=current"]

ルックス> ElementsでElementを作成するときに、 フック를 generate_after_contentで指定して Execute Shortcodes オプションをチェックするようにします。

そして Display Rules> Locationは 記事>すべての記事を選択するようにします。

他のプラグイン

WordPressには、さまざまな関連記事のプラグインがあります。 よく使われるプラグインとして YARPP – Yet Another Related Posts Plugin, コンテキスト関連記事 などがあります。 有料プラグインでは WordPress Infinite Related Next Post Managerがあります。

最後に、

Avada (Avada)ナ Newspaper (Newspaper)のようないくつかのテーマには、個々のポストの下部に関連記事のリストを表示するオプションを提供しています。 そのような場合には、テーマで提供される機能を使用すると便利です。

関連記事を表示する機能がない場合は、プラグインを使用したり、テーマファイル内に直接コードを追加することで関連記事を表示することができます。

参照

• WordPress ポストグリッドのプラグイン
• WordPress 「未分類」カテゴリ（または「未分類」）を削除する
• WordPress GeneratePress テーマサイドバーの幅を調整する
• GeneratePress テーマの翻訳ファイルをダウンロードする