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

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

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

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

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

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

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

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

• How To Display Related Posts In WordPress(WordPressで「タグ」の基準に関連記事を表示する方法）
• Show Related Posts From Current Category In WordPress(WordPress現在のカテゴリーの関連記事を表示する）

カテゴリーに基づいて関連記事を表示する場合は、上記の第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が表示されます。

上記のコードは、このブログの現在のテーマである 冥王星でのみ使用されているので、他のテーマでは、レイアウトが正しく表示されない場合があります。 そのような場合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コードは同じです。 この操作を実行する前にチャイルドテーマ（子テーマ;サブテーマ）を作成し実行してください。 子テーマの作成方法は、 この記事を参照してみてください。

参照

• WordPress: 特定のカテゴリページのレイアウトを異なるデザインにする
• エレメントと Avada テーマのタブに目的のコンテンツを簡単に挿入する方法