web-dev-qa-db-ja.com

グリッドレイアウトで特定のカテゴリの投稿を表示するためのより良い方法

次のコードを使用して、特定のカテゴリの投稿をグリッドレイアウトで自分のホームページに表示します。それは私が望んでいる通りに正確に動作しますが、私はこれまでquery_postsを使用すべきではないことを読み続けます。どのように私はquery_postsを使用せずに、同じ結果を達成することができますか？

また、私は最終的にホームページに多分10の異なるカテゴリからの投稿を表示する必要があるでしょう - これとまったく同じグリッドレイアウトを使用します。カテゴリごとに以下のコードをすべて複製した場合、問題が発生しますか。それとも、より効率的な方法がありますか。

アドバイスは大歓迎です - 私のコードや質問からうまくいくことができるだろうから、私はWordPressの開発にはかなり慣れていない:)

<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
global $query_string; //Need this to make pagination work

/*Setting up our custom query (In here we are setting it to show 3 posts per page and eliminate all sticky posts) */
query_posts( array('posts_per_page'=>3, 'category_name'=>'Mobile') );

if(have_posts()) :  while(have_posts()) :  the_post(); 
?>

<?php
//Show the left hand side column
if($counter == 1 || $counter == 2) :
?>
            <div class="col-cat3">
                <div class="entry-featured"><?php x_featured_image(); ?></div>
                <div class="col-cat-pic"><?php echo get_avatar( get_the_author_meta('ID'), 40); ?></div>
                <div class="hero-info">
                <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                <p class="p-meta"><?php the_author_posts_link(); ?>  /  <?php the_time('m.d.y'); ?></p>
                </div>
            </div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
             <div class="col-cat3-last">
                <div class="entry-featured"><?php x_featured_image(); ?></div>
                <div class="col-cat-pic"><?php echo get_avatar( get_the_author_meta('ID'), 40); ?></div>
                <div class="hero-info">
                <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                <p class="p-meta"><?php the_author_posts_link(); ?>  /  <?php the_time('m.d.y'); ?></p>
                </div>
            </div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>
loopquery-postshomepage
1
Paul Dixon

Query_postsが単純化された方法でWP_queryを使用し、今後問題を引き起こす可能性があるため、一般的な提案はWP_Queryの代わりにquery_postsを使用することであると思います。それで確かにWP_Queryのページをチェックしてください、特にMultiple Loopsの例： http://codex.wordpress.org/Class_Reference/WP_Query#Multiple_Loops

そのため、WP_Queryを使用したコードは次のようになります。

<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
global $query_string; //Need this to make pagination work

/*Setting up our custom query (In here we are setting it to show 3 posts per page and eliminate all sticky posts) */
$query1 = new WP_Query( array('posts_per_page'=>3, 'category_name'=>'Mobile') );

if( $query1->have_posts()) :  while( $query1->have_posts()) : $query1->the_post(); 

    if( $counter == $grids ) : 
        $counter = 0; // Reset counter ?>
        <div class="col-cat3-last">
    <?php else: ?>
        <div class="col-cat3">
    <?php endif; ?>

        <div class="entry-featured"><?php x_featured_image(); ?></div>
        <div class="col-cat-pic"><?php echo get_avatar( get_the_author_meta('ID'), 40); ?></div>
            <div class="hero-info">
                <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                <p class="p-meta"><?php the_author_posts_link(); ?>  /  <?php the_time('m.d.y'); ?></p>
            </div>
        </div>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
wp_reset_postdata(); // Reset post_data after each loop
?>

WP_Queryでも同じ$argsを使用できます。ループ設定に$query1->が追加されていることにも注意してください。このコードをコピーしてコピーするときに$ query1を$ query2に変更し、ほとんどの場合、クエリ引数のcategory_nameを自分のカテゴリに一致するように変更します。

唯一の違いはラッピングdivクラスに追加された '-last'であるように見えたので、私はいくつかの繰り返しコードもクリーンアップしました。そのため、将来追加のコードを追加する代わりに、これを使用することができます。

最後にwp_reset_postdata();を追加して、安全にし、投稿データをクリア/リセットします。

質問や懸念がある場合はお知らせください。

2
Sean Grant