サポート » 使い方全般 » query_postsからひっぱる個数によって背景をストライプ

  • こんにちは。

    いつも貴重なアドバイスありがとうございます。

    query_postsから特定の個数(2件)ずつ引っ張ってくる投稿記事を1つのdivタグでくくり、その背景を変化させる仕組みを探しています。

    具体的には

    一行目: <div 背景は黄>【[記事1のサムネイル画像]「記事2のサムネイル画像]】</div>
    二行目: <div 背景は青>【[記事3のサムネイル画像]「記事4のサムネイル画像]】</div>

    三行目以降は、この黄色→青色→黄色→・・・の繰り返しにより

    ギャラリーの行ごとに背景の色を変えるといったものを想定しています。

    Smashing MagazineのLoop Hackなども参考にしながら見ているのですが、
    どうしても手がかりを見つけられずにおります。

    http://www.smashingmagazine.com/2009/06/10/10-useful-wordpress-loop-hacks/

    皆さまのお知恵を拝借できましたら幸いです。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • $all_posts = query_posts( .... ); 表示する分だけとってくる
    $counter = 0; カウンターをゼロにセット
    foreach( $all_posts as $a_post ) {
    
    if( $counter % 2 == 0 ) echo '<div ... yellow>';
    else echo '<div ... blue>';
    ↑2で割った時のあまりがゼロなら黄色、そうでなければ青
    
    echo $a_post; ... div の中身出力(2個分出すなら、ループを適当にいじるか、上のif文に細工するといい)
    
    echo '</div>'; DIVを閉じる
    
    $counter++; カウンターを足す
    }

    細かいところはお好みで

    あまりスマートなソースではないですが

    <?php query_posts(設定したいクエリー);?>
    <?php $cnt=0;$class_cnt=0;$class=array("yellow","blue");?>
    <?php if(have_posts()):while(have_posts()):the_post(); ?>
    <?php if($cnt%2 == 0):?>
    <div class="<?php echo $class[$class_cnt];?>">
    <?php $class_cnt = ($class_cnt + 1)%2;?>
    <?php endif;?>
    	ここにサムネイル処理を表示
    <?php if($cnt%2):?></div><?php endif;?>
    <?php $cnt++;endwhile; endif; ?>
    <?php if($cnt%2):?></div><?php endif;?>

    class yellowに黄色くするスタイル class blueに青くするスタイルを入れれば色が変わると思います。

    *ソース書いているうちに被った><

    トピック投稿者 haha taduko

    (@shimodar)

    あっ、、ありがとうございます。m(__)m

    コードを見ただけでわからない手前のスキル不足もあるので、一度コードを利用させていただいて動作を見させていただきたいと思います。

    取り急ぎ、拙い説明にも関わらずご回答くださいましてありがとうございました。

    またフィードバックさせていただきます!

    (^-^)

    あとはjqueryを使って
    $("div.cycle:nth-child(2n)").css("background-color", "yellow");
    で、1回おきに背景がつきますね

    書いてる内にかぶってしまいましたね;; ごめんなさい。
    動作サンプルです。ついでなので置いてみました。

    トピック投稿者 haha taduko

    (@shimodar)

    > V.J.Catkick様
    > gogoweb様

    すぐに使えるコードのご用意までいただきましてありがとうございました。

    設計を見直したところ、divでそれぞれの行を囲うことなく対応しなければならないことに気づき、せっかくご紹介いただいたコードをうまく応用できなかったため途中で断念しました。。

    本当にすみません。

    > kvex様

    jQueryで、という異なる視点。ありがとうございました。

    今回はこちらの方法で、うまくやりたかったことを実現させることができました。

    実装してみましたところ、どうもIE6でもうまく動いている様子です。

    このたびは皆さまのお知恵を拝借して前に進むことができました。

    WordPress大好きです!

    ありがとうございました。

    (^-^)

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「query_postsからひっぱる個数によって背景をストライプ」には新たに返信することはできません。