web-dev-qa-db-ja.com

特定のカテゴリの最近の投稿をヘッダーに表示する方法を教えてください。

質問：カテゴリ表示

特定のカテゴリ内の最新の3つの投稿からデータを取得し、表示される最新の投稿に関連付けられている画像（ある場合）を取得するヘッダーを作成します。私はスタイリングをうまく作成することができますが、投稿情報を参照したり引っ張ったりする方法がわかりません。すべての投稿が欲しいとは限らないので、ループをしたくありません。

私はこれらの線に沿って何かを考えています。

POST IMAGE（カテゴリの最新の投稿のタイトル、そのカテゴリへのリンク、おそらく投稿の日時を参照する）がその下に表示されます。そのカテゴリ内のそれに続くその前の投稿への3番目のリンク。

投稿のタイトルと、おそらく小さな投稿の抜粋を引き出して、このように表示するための具体的なタグはありますか。

明確化：私がしたいのは、上部が左上、右上、左下、右下の4つのセクションに分割されるようにメインページを再設計することです。これらはそれぞれ、特定のカテゴリの最新の投稿の画像に、最新の投稿へのリンクを重ねたものになります。次に、これらのそれぞれで、カテゴリ内の次の2つの投稿のリストです。フォーマットは私が扱うことができるCSSを通して行われます、しかし私は特定のカテゴリーから投稿を引っ張る方法と最新の3つだけを引っ張る方法を知りません。

wp-querycategoriestheme-development
1
OscarGuy

あなたはやるしたいです。

あなたのヘッダの中で、あなたはそれらの3つの投稿だけに新しいクエリを作り、あなたが各ページの下にさらに必要とするメインのクエリを混乱させずにそれらを通してループしたいです。

これがあなたのカテゴリからの3つの投稿を呼び出す標準的なループです：

$wpse_235359_query = new WP_Query( array( 

        'category_name' => 'your-category-slug',
        // should pull in posts from child categories too

        'posts_per_page' => 3 

    ) );

if ($wpse_235359_query->have_posts()) :

    while($wpse_235359_query->have_posts()) :
        $wpse_235359_query->the_post();

        /* show your post stuff here using standard
           template tags like the_title()
        */

    endwhile;

endif;

wp_reset_postdata();

最後にwp_reset_postdataを呼び出すと、すべてがうまく設定されるため、残りのページは予想どおりに動作します。

あなたはこの記事の束を見せたいあなたのテーマファイルのどこかにこのコードの断片を置きます。テーマを別のテーマに基づいている場合は子テーマに、テーマ全体を作成している場合はメインテーマファイルに含めることができます。

編集 - コメントリストを短くするためのコメントからの追加

変数$wpse_235359_queryを好きなように呼び出してください。必要に応じて、スニペットを異なるカテゴリで複数回使用してください。

親テーマを更新できるように、子テーマを使用して好きな場所に配置します。子テーマは、親のテンプレートファイル全体をオーバーライドすることによって機能します。したがって、親のheader.phpを子のテーマにコピーして変更し、子のheader.phpが親のheader.phpではなくWPによって使用されるようにします。 load header.phpを呼び出すと、常に最初に子テーマが調べられます。

次に、次のようにHTMLを使用して、最初のスタイルを別のスタイルにします。

<div>
    <span class="MainCategoryHeader">
    <a href="http://www.example.com/">Permalink One</a>
        </span>
    <span class="MainCategoryHeader">
        <a href="http://www.example.com/">Permalink Two</a>
    </span>
    <span class="MainCategoryHeader">
        <a href="http://www.example.com/">Permalink Three</a>
    </span>
</div>

このようにCSSを適用してください。

.MainCategoryHeader:first-child a { 
    background-color: #FFFFFF; 
    color: #FFFF00; 
} 
.MainCategoryHeader a { 
    background-color: #FFFFFF; 
    color: #000000; 
}

これは、WordPressと元の質問の要点からは遠く離れています。 WordPressの部分が解決したことに満足しているのであれば、私の利益のためだけではなく、サイトの整理もして、その答えを受け入れてください。

0
Andy Macaulay-Brook