【WordPress】ループ内で最新記事だけデザインを変える方法

2014年11月12日
follow us in feedly

wordpress

最新記事のデザイン変更

ハブワークスのWEBサイトではトップにブログ記事を新しいものから12件表示させています。デザインはjQuery Masonryを使用することで記事毎に高さの違うブロックを並べています。

ブログ表示変更前

今回はこのトップページに並べられたブログ記事の最新のみデザインを変更しようと思います。

初めは2件目以降の記事はquery_posts()にoffsetを指定して最新記事と別々に呼び出せばいいかなと考えましたが、jQuery Masonryを使っているいるので不具合が起こりそうな気がしてやめました。

そこで次の方法で最新記事を指定しました。

functions.phpに次の関数を追加

$wp_queryオブジェクトのcurrent_postプロパティで何番目の記事がわかります。$wp_queryは0から始まるので、最新記事を比較演算子を使って表しています。

function mostRecent(){
    global $wp_query;
    return ($wp_query->current_post === 0);
}

ループ内の最新記事だけblogpost_firstというclass名を追加する

<div class="blogpost <?php if(mostRecent()) echo 'blogpost_first'; ?>">
<div class="row">
  <div class="col-xs-12">
    <div class="masonry_thumbnail">
    <?php if ( has_post_thumbnail() ) : ?>
      <?php the_post_thumbnail('medium', array('alt' => the_title_attribute('echo=0'), 'class' => 'masonry_image', 'title' => the_title_attribute('echo=0' ))); ?>
      <?php else : ?>
    <?php endif; ?>
   </div>
    ~
   省略
  ~
 </div>
</div>
</div>

■ さいごに

呼び出す内容を囲むdiv要素に、最新記事だけblogpost_firstというclass名が追加できましたので、このclassにcssをあてることでデザインを変更できました。

ブログ表示変更後

この方法なら最新記事だけではなく、いろいろな場面で活用できそうですね。

follow us in feedly

関連記事

福岡でホームページ制作を依頼するなら【ハブワークス】

ホームページ制作・リニューアル・スマートフォンサイト制作・ECサイト制作は福岡のハブワークスまでお気軽にどうぞ。WEBサイト制作後の修正・更新・SEO対策もお任せください。リーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ