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

Last Updated:2023年09月29日| , | 16のコメント

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

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

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

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

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

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

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

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

WordPress 関連記事一覧を表示する(GeneratePress テーマ)3

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

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

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

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

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

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

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実行)をチェックして有効にします。

GeneratePress テーマElementsを使用して関連記事一覧を表示する

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

WordPress GeneratePress テーマフックを使用する

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 チェックボックスを選択して有効にします。

WordPress 関連記事一覧を表示する(GeneratePress テーマ)4

表示ルール タブでは、 投稿 - 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)のようないくつかのテーマには、個々のポストの下部に関連記事のリストを表示するオプションを提供しています。 そのような場合には、テーマで提供される機能を使用すると便利です。

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

参照


16のコメント

コメント

  1. ワードの上に従っていた途中でExecute PHP(PHP実行) ここでボックスチェックするところがUnable to execute PHP as DISALLOW_FILE_EDIT is defined。このようなエラーが出ているのになぜそうなのでしょうか?

    応答
  2. 上記の方法で関連文が出るようにしました。

    しかし、その基本設定のためか、その上に同じカテゴリーの2つの記事が追加で出てくる状況が発生しました。

    GPのカスタマイズでレイアウト部分を確認しても消えるところが見つかりません。

    もし助けを得ることができますか?

    応答
    • こんにちは、韓服男。 質問の内容だけでは、正確にどんな現象なのか把握するのは容易ではありませんね。 Naver カフェに関連するスクリーンショットと一緒に詳細な症状を質問にアップロードしますか?

      応答
  3. こんにちは。 GeneratePress テーマを使っていて、関連文(Related Posts)を文の下に表示することをしたくてイーグルに上がっているようにしてみましたが、うまくいかないですね。 ここでコーディング内容と方法に関して、バージョンがアップグレードされて適用できない内容があるのでしょうか?
    Element 編集画面で、上の本文にあるコーディングソースを入れると、エラーがたくさん発生します。
    "Special characters mout be escaped : [ < ]."

    応答
    • 「Special characters must be escaped」エラーが表示される理由はわかりません。 Googleで試してみましたが、このエラーは非常にまれです。 この問題がサーバーファイアウォール/セキュリティルールのために発生するかどうかを確認しますか? そして、wordfenceなどのセキュリティプラグインが有効になっている場合は、無効にした後でもテストしてみますか?

      コードは少しエラーがあったので修正しました。

      応答
    • このコードは、この記事を書いたときにうまくいきました。 修正されたコードをまとめました。 修正されたコードでも一度テストしてみませんか?

      応答
      • こんにちは。
        何が問題なのか同じですね。
        プラグインが使うべきだと思います。 プラグインを追加するとサイトがどんどん重くなるようで、コードで実装できるのはただしようとしましたが残念ですね。 もし運営者様もGP使用しているようですが問題なく元気になりますか?

        私のサイトが変なのか…
        これだけでなく、cssコードをポストで見せるためにblock内にcodeを入れましたが、cssが適用されてしまうエラーが出ています。 これも原因を見つけられていません。

      • 他のプラグインをすべて無効にしてから一度テストしてください。

        コードはブロックエディタ(Gutenberg)の「コード」ブロックで表示できます。

  4. GeneratePress 関連記事一覧を表示するあげ内容のまま設定した、本当にありがとうございます。
    便利な適用に書いています。

    応答
割引ニュース
アストラテーマで最大40%割引!
期間限定
You This Coupon Code in Checkout
Click the code to Copy