ベストセラー人気 WordPress テーマTop 30 詳細

WordPress:現在のカテゴリの関連投稿を表示する方法

Last Updated:2023年1月18日| | 10のコメント

前へでさまざまな方法で WordPressで関連記事(関連記事)を表示する方法を説明しました。 場合によっては、使用しているテーマで関連記事を提供することができます。 現在使用中のこのブログのテーマである 冥王星でも関連記事を提供しています。 そして Avada などの主要な人気のテーマでも関連記事を表示することができる機能を提供します。

Avadaの関連記事機能
Avadaの関連記事機能

アップデート: このブログには、 Newspaper テーマを経て現在 GeneratePress テーマが適用されています。

以下のコードはまだうまく動作しそうですが、古くなって動作しない可能性があります。 より最新の方法で次の記事で紹介する方法をご利用ください。

WordPress:現在のカテゴリの関連投稿を表示する方法

テーマで関連記事機能が提供されていないか、または気に入らなければ、プラグインをインストールして関連記事機能を実装することができます。 また、別の方法で直接コードをテーマのソースに追加することも可能です。

直接コードを作成関連記事機能を実装しようとする場合、次のXNUMXつ文章を参考にすることができます。

カテゴリーに基づいて関連記事を表示する場合は、上記の第XNUMX回で紹介された方法を応用することができます。 私は上記の二つの文を組み合わせて新た作成最近まで使用してきました。

現在のカテゴリの関連記事(関連記事)を表示する

次のコードを適切なファイル(例えば、 single.php トヌ single-content.php - テーマに応じて)の適切な場所に追加するようにします。 シングルポスト(文)ファイルで本文のすぐ下に表示されるようにすることができます。 必要に応じてフックを使用して追加することも可能になります。 (フックを使用して、単一の文の一番下に表示する方法は、「WordPress 文の最後(文の下部)にユーザーコンテンツを追加する"文を参照してください。)

Related posts 3, // How many items to display - 表示する項目数 'post__not_in' => array( get_the_ID() ), // Exclude current post - 現在の投稿を除く 'no_found_rows' => true, // We don't need pagination so this speeds up the query - クエリのスピードアップ 'orderby'=>'rand' // ランダムに表示するために追加されました。 削除するとランダムに表示されません)。 $cats = wp_get_post_terms( get_the_ID(), 'category' ); $cats_ids = array(); foreach( $cats as $wpex_related_cat ) { $cats_ids[] = $wpex_related_cat->term_id; } if ( ! empty( $cats_ids ) ) { $args['category__in'] = $cats_ids; } // Query posts $wpex_query = new wp_query( $args ); // Loop through posts foreach( $wpex_query->posts as $post ) : setup_postdata( $post ); ?> ">

上記の the_post_thumbnail(「pluto-top-featured-post」)は、新たに定義したサムネイルのサイズを表示する部分ですが、すでに適切なサイズが定義されている場合、適切に変更します。 もし適切なサイズが定義されていない場合は、次のコードをテーマの関数ファイル(のfunctions.php)に追加するようにします。 数字を変更下サムネイルのサイズを変更することができます( "WordPress サムネイルのサイズを変更"参照)。ただし、 冥王星 テーマでは、以下のコードが追加されているので追加しないようにします。

function custom_thumbs() { add_image_size( 'pluto-top-featured-post', 200, 150, true ); } add_action( 'after_setup_theme'、'custom_thumbs');

そして style.cssの次のようなコードを追加します。

/* Related posts - 関連記事*/ @media only screen and (min-width : 784px) { .single .relatedposts .relatedthumb { display:inline-block; 幅:32%。 vertical-align:text-top; padding-right: 5px; padding-left: 5px; } .single .relatedposts { padding: 0px 50px 50px 50px; } .single .relatedposts .relatedthumb img { padding-bottom: 7px; } .single .relatedthumb a { font-size: 1.22em; } } /* for pc */ @media only screen and (min-width: 522px) and (max-width: 783px) { .single .relatedposts .relatedthumb { display:inline-block; 幅:48%。 vertical-align:text-top; padding-right: 5px; padding-left: 5px; } .single .relatedposts { padding: 0px 35px 35px 35px; } .single .relatedposts .relatedthumb img { padding-bottom: 7px; } .single .relatedposts > .relatedthumb:first-of-type { display: none; } .single .relatedthumb a { font-size: 1.22em; } } /* for medium */ @media only screen and (max-width: 521px) { .single .relatedposts .relatedthumb { display:inline-block; 幅:98%。 vertical-align:text-top; padding-right: 5px; padding-left: 5px; } .single .relatedposts { padding: 0px 20px 35px 20px; } .single .relatedposts .relatedthumb img { padding-bottom: 7px; } .single .relatedposts > .relatedthumb:first-of-type { display: none; } .single .relatedposts > .relatedthumb:first-of-type + div { margin-bottom: 15px; } .single .relatedthumb a { font-size: 1.22em; } } /* for mobile */

コードを適切に欧米に合わせて変更してください。 これにより、次のように書かれ、以下にRelated Postsが表示されます。

Customized Related Posts

上記のコードは、このブログの現在のテーマである 冥王星でのみ使用されているので、他のテーマでは、レイアウトが正しく表示されない場合があります。 そのような場合CSSコードをテーマに合わせて適切に修正してください。

同じタグの文を関連記事(関連記事)で表示する方法

タグに基づいてRelated Postsを作ろうとする場合には、一番上のコード前の次のコードに置き換えします。

Related posts 3, // 表示する項目 'post__not_in' => array( get_the_ID() ), // 現在の記事を除外 'no_found_rows' => true, // We don't need pagination so this speeds up the query - クエリを高速化ためにページが必要ありません 'orderby' => 'rand' //ランダムに表示されます); $cats = wp_get_post_terms( get_the_ID(), 'category' ); $cats_ids = array(); foreach( $cats as $wpex_related_cat ) { $cats_ids[] = $wpex_related_cat->term_id; } if ( ! empty( $cats_ids ) ) { $args['category__in'] = $cats_ids; } // Query posts $wpex_query = new wp_query( $args ); ...(以下同じ)

CSSコードは同じです。 この操作を実行する前にチャイルドテーマ(子テーマ;サブテーマ)を作成し実行してください。 子テーマの作成方法は、 この記事を参照してみてください。

参照


10のコメント

コメント

?

  1. こんにちは、教えてくれたとおりに適用しようとしていますが、うまくいかないので質問します。 現在 generatepress無料版を使っているのにsingle.phpがどこにあるのかわかりませんㅜテーマファイル編集機にはstyle.cssとfunctions.phpしかありません。

    応答
    • まず、テーマエディタは使用しないことがセキュリティ上望ましい。

      https://cafe.naver.com/wphomepage/508

      チャイルドテーマがインストールされているようですね。 チャイルドテーマをどのように活用するかについて学びましょう。
      https://cafe.naver.com/wphomepage/145

      GeneratePress テーマの場合は、次の記事を参照して関連記事を表示できます。

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EA%B4%80%EB%A0%A8-%EA%B8%80-%EB%AA%A9%EB%A1%9D-%ED%91%9C%EC%8B%9C%ED%95%98%EA%B8%B0/

      応答
      • はい、ありがとう、チャイルドテーマはよく読んでいます。
        ところが generatepressテーマではサムネイルを適用した関連文を表示しないのですか?

      • the_post_thumbnail関数を使うといいでしょう。

        https://developer.wordpress.org/reference/functions/the_post_thumbnail/

        次の記事の内容も参考にしてください。

        https://www.thewordcracker.com/intermediate/how-to-adjust-the-size-of-thumbnail-images-in-wordpress/

        これが難しい場合は、WP Show Postsなどのプラグインを使用してください。

        https://avada.co.kr/generatepress-%ED%85%8C%EB%A7%88%EC%97%90-%EA%B4%80%EB%A0%A8-%EA%B8%80-%ED%91%9C%EC%8B%9C/

  2. "Avada などの主要な人気のテーマでも関連記事を表示することができる機能を提供します。」についての質問します。
    현재 Avadaテーマを使用しており、①グラフィック関連②食べ物③本の紹介などのカテゴリを3つ作成しました。
    私に必要なのは、例えば「③本カテゴリー」ページに入ると、まず本の紹介に関する最新記事をいくつか見えるようにして(関連記事リスト - これは、すでに作っておいても実行している)、その下に本の紹介関連記事のみずっと出てくる作成したい。
    このようなことも可能でしょうか? 現在の状況は、関連記事一覧に出てくる最新の記事をクリックすると、別のページに移動して、(最新の記事を見るページ)そこで文を示しています。

    'Avadaで関連記事を表示することができる機能」がどんなものか、私を必要とすることが解決ドエルリョンジ分、気になります。 また、機能を使用するには、どこに行って何をすべきかわからない。
    Avada 機能も、私必要とする問題を解決することができない場合はどのようなプラグインを使用するか、またはソースを編集しますか? ところが、ソースの編集には、初心者なので、自分が持っていない〓〓。

    応答
    • こんにちは、firekim様。

      関連記事は、通常、ポストの下部には、ポストが属するカテゴリーなどを基準に関連した記事を表示する機能です。

      Avada (Avada)テーマWordPress 管理者ページ> Avada > Options>ブログ>ブログシングルポストで関連記事を有効/無効にすることができます。

      https://www.screencast.com/t/K39LhfKN

      必要に応じてカテゴリーを作成するには Avada カテゴリーレイアウトを作成します。 Avada テーマの場合は、最新バージョンのカテゴリテンプレートをダッシュ​​ボード内で作成できます。 https://www.thewordcracker.com/basic/%ec%95%84%eb%b0%94%eb%8b%a4-%ed%85%8c%eb%a7%88-%eb%a0%88%ec%9d%b4%ec%95%84%ec%9b%83-layout/ 文を参照してみてください。

      これにより、最新の記事と関連記事を表示するコードを直接作ってテーマ関数ファイルに配置します。 ショートコードで表示するように作ってショートコードを利用して、 Avadaのカスタムレイアウトセクションに追加すると、されています。 初心者の場合は容易ではない作業である。

      応答
  3. 質問をしてもされているかわからないのに...ㅠㅠrelated postをそのページごとにタイトルを変えてくれるのでしょうか? 展示サイトの操作中なのに、各展示ごとに対応する作家たちが別にいる状況ですから。 作家たちのページに入ると、一番下にrelated exhibitionで表示したいし、展示のページに入るとrelated artistとして表示してたいから今までの方法でしょうか?

    応答
    • こんにちは?
      ブログを訪問していただきありがとうございます。
      どのように作家の文と展示文を持ち上げるに応じ異なっ実装されることがあります。
      コーディングが必要な部分で。

      応答
      • 最大限のコーディングをしないしようみる....やはりそんなペテンはないのでしょう。元のcustom fieldsを活用しようとしたが難しいんですよ。 ㅠㅠので単にタグとrelated postにしてみようたのに....難しいようです

      • 次の文が助けになると思われる。

        https://www.advancedcustomfields.com/resources/query-posts-custom-fields/

        問題がうまく解決されることを願います。

WordPress Naver カフェを訪れる

ありがとうございます!