読者です 読者をやめる 読者になる 読者になる

ショウジンブログ

Learn as if you will live forever, Live as if you will die tomorrow.

ループの中に任意の要素を差し込む@WordPress

WordPressカスタマイズ
Sponsored Links

以下のキャプチャ画像にあるように、赤ベタのブロックをWordPressのループの中に差し込みたい。

f:id:showjinx:20160525121143p:plain

ループの中に単純にこの赤ベタのhtmlソースを入れるとループごと(一件ごと)に出力されてしまうので、それではダメ。

一度だけで、何番目かに差し込みたい。

なので、ループ内にループ数をカウントする変数を用意し(これに++でインクリメント)このカウント数で判別し、条件に合ったときに出力させると。

サポートコミュニティで聞こうかと思ったけど、ググったら「ループ内で指定した場所(記事の順番)に広告を入れたい」っていう場合の記事があって、これを応用しました。

WordPresで記事と記事の間(ループ内)に広告を表示する方法

ということで、実際に処理したコードです。

以下はメインループで実装した例で、別に「複複数のclass名をランダムにループで出力」のコードも入っています。

<?php $class_name = array('w_small', 'w_middle', 'w_middle', 'w_large'); /* 用意したclass名を配列$class_nameに格納 */ ?>
<?php $accentBlock = '<div class="topic w_accent">more HOT!</div>' /* 変数$accentBlockにそれ用のhtmlソースを代入 */ ?>
<?php query_posts('showposts=10&orderby=rand&cat=-3'); /* カテゴリID3に属する投稿を除いた全投稿をランダム表示 */ ?>
<?php if(have_posts()): while(have_posts()): the_post(); $count++; ?>
<div class="topic <?php echo $class_name[rand(0, count($class_name)-1)]; ?>">
     <div class="topicBody">
          <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a>
          <div class="text">
               <h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
               <?php the_content('Read more'); ?>
          </div>
     </div>
</div>

<?php if ($count == 3) { echo $accentBlock; } ?>
<?php endwhile; endif; ?>

ループ開始前に赤ベタブロックを表示するためのhtmlソースを用意し、それを変数「$accentBlock」に代入。

ループ開始のif文にループ回数をカウントするための「$count」を追加し、これを「++」でインクリメント。

$countの値が3のとき(3回ループした後)に$accentBlockをecho(出力)するように記述。 なので三番目の記事の次に赤ベタブロックは出力される。

この場合はランダムでサイズを変えたブロックをjQueryのfreetile.jsでタイリングさせているので冒頭から数えて四番目ではない場合もあるんですが、だいたいそのへんです。(3〜5番目あたりに差し込まれるようになってる)

www.hotandodd.jp

いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応 (「いちばんやさしい教本」シリーズ)

いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応 (「いちばんやさしい教本」シリーズ)