一番目の記事だけサムネイル大きくするやつどうやるんだろ…って悩んでいた時期が私にもありました。
今ではそういう機能のついたテーマが多いので必要ないかもしれませんが、
覚えておくと便利なので、簡単に紹介したいと思います。
PHPの処理を変更して、
1記事目にIDやCLASSを付けるという方法が一般的かもしれません。
しかし、PHPの変更って、
なんだかんだうまくいかない事があったりします。
今回は、出来る限りPHPの記述を減らして、
HTMLとCSSで、1番目の記事表示を変更する方法を紹介します。
というわけで、今回の目的
「記事一覧のトップの表示を変更する」
を実践していきましょう。
HTML
HTMLと言っても、記述するものはphpファイルです。
WordPressのトップページに関するphpは、
front-page.phpかhome.php、index.phpのいずれかになります。
まず、今回記述するHTMLは、
<ul><li></li></ul>だけです。
多くのサイトで紹介されている通り、
記事一覧はループという処理を使って作られています。
その多くが、以下のような記述になっているかと思います。
<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> //ここにループ内の記述 <?php endwhile; ?> <?php endif; ?>
それで、この中にphpで分岐を作ったり…なんて事をすると、
ちょっとめんどくさかったりします。
なので、このphpにULとLIをそれぞれ入れて、
条件分岐はCSS側でやってしまおうというのが、
今回の手法になります。
HTMLの記述
まず、phpのコードの中に、
ULとLIを埋め込みます。
<?php if ( have_posts() ) : ?> <ul class="article-container"> <?php while ( have_posts() ) : the_post(); ?> <li> //ここにループ内の記述 </li> <?php endwhile; ?> </ul> <?php endif; ?>
HTMLの記述はこれだけです。
今回は、ULにarticle-containerというクラスを付けました。
この名前は、自由に変更して大丈夫です。
CSS
では、仕上げにCSSで条件分岐させます。
CSSでの条件分岐は、
「最初の・○番目の・最後の」
と、幾つか方法があります。
今回は、一番目の記事の装飾を変更するので、
条件分岐は「最初の」を使います。
条件分岐
では早速条件分岐のコードを記述していきます。
.article-container li:first-child{ color:red; }
.article-container li:first-child ○○○{ }
といっても、大枠である<li>に1番目という表記の、
：FIRST-CHILD
を付け足すだけだったりします。
例えば、:first-chileを記述すると、
今回のコードでは、
「.article-container」の中の、最初の「li」に、
color:red;という文字を赤くする記述を書いているだけです。
つまり、:first-childを付けるだけで、
記事一覧の一番最初の記事の表記を、
自由に変えられるという事になります。
まとめ
多くのサイトがif文や関数を使った分岐を使っています。
もちろんBLOGRAMでも至る所に使われていますが、
自分でカスタマイズするとなると、
PHPをいじるのは、少しハードルが上がります。
自分が最初から作り上げたものならともかく、
WordPressは他の作者様のテンプレートを使う事が多いため、
そんな中で条件分岐をするのは、初心者ではほぼ不可能でしょう。
それなら、プログラミングよりハードルが低い、
HTMLとCSSだけで、表示を変えられたらなと思いました。
少し話がズレてしまいましたが、
目的は「記事一覧のトップの表示を変更する」でしたね。
無事達成出来たかと思います。
よかったら参考にしてみてくださいね。