Web Note
最初の投稿だけデザインをかえる(1番目と2番目以降でデザインを分ける)[wordpress]
[2017.12.12]
WordPressで最新の情報だけデザインをかえて、2番目の投稿以降は別のデザインにしたい時のPHPの記述方法の備忘録です。
以下のような画像のように、最初の投稿だけ大きく・・・などあしらいを変えて、以降は同じデザインにしたい。
投稿が何回表示されたら・・・と言うようなことがしたい場合は $loopcounter++; をループに付けてやると、カウントが取れるようになります。
簡単なhtmlとPHPで書くとこんな感じ。
この書き方を応用して、2番目の記事の後にAdsenseを挿入したい、などにも使えます。
<ul>
<?php if( have_posts()) : while(have_posts()) : the_post(); $loopcounter++; ?>
<?php if ($loopcounter <= 1) : ?>
<li class="newest-post">最初の投稿</li>
<?php else :?>
<li>2番目以降の投稿</li>
<?php endif; ?>
<?php endwhile; endif; ?>
</ul>
カテゴリーリスト
最近の投稿
Site Search
Profile
Web制作を生業にしています。主にHTML, CSS, JavaScript, PHP, WordPressのカスタマイズなどしてます。忘れっぽいので備忘録としてWebの小ネタを書いたり、人生のいろんなことを不定期にのんびり更新しています。小学生男児の母(シングルマザー)です。