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

Last Updated:2023年07月16日| | 12のコメント

前へでさまざまな方法で 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コードは同じです。 この操作を実行する前にチャイルドテーマ(子テーマ;サブテーマ)を作成し実行してください。 子テーマの作成方法は、 この記事を参照してみてください。

参照


12のコメント

コメント

  1. wp show postsプラグインを使用して
    関連記事を出力するまで成功しましたが、
    カテゴリ関連の文だけが出るように設定できませんか?
    あれこれ触ってみたのに正しく動作するのはランダム形式? しかないですね。

    応答
    • こんにちは、HEOさん。 WP Show Postsプラグインを使用しているときに現在のカテゴリ文だけが表示されるようにする方法については、別の記事でまとめてみましょう。

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

    応答
  3. "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のカスタムレイアウトセクションに追加すると、されています。 初心者の場合は容易ではない作業である。

      応答
  4. 質問をしてもいいのか分からないのですが… 展示サイト作業中ですが、各展示ごとに該当作家が別々にある状況ですから。 作家のページに入ったら下段に related exhibition で表示したい、展示ページに入ったら related artist で表示したいです。

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