【WordPress】記事一覧表示を最新順にデザインを変更する方法

2012/11/16

Written by: EISUKE

Category: IT

NewImage

初めてWordPressのデザインをしたわけですが、凄くやりたかったのが記事一覧表示、いわいるindex.phpにおいて、一覧を同じデザインで表示するのではなく、最新順にそれぞれデザインをレスポンシブルに変更する方法です。

それが上手く書けたので、今日はその方法を紹介したいと思います。

記事ごとにカウントを用いる

前にgori.meの@planetofgoriさんに記事一覧途中にAdsenseコードを入れる方法を聞いた時に、記事を書いて説明してくれました。

WordPressの記事一覧ページで特定の記事の下にAdsense広告を入れる方法 | gori.me
これのおかげで、今回のデザインが出来ました！

これを応用する事で、レスポンシブルにデザインを変更出来ます。まぁCSSとかに慣れてる人はもう大体はわかったでしょう。

NewImage

ようは、カウントで記事ごとに番号が決められます。なので、条件分岐（if文）で、そのカウント番号の時にclass属性を切り替えてあげてCSSにて、それぞれデザインを変えてあげればいいわけです。

僕が書いたコードを例に説明します。書き方はThemeで異なるので僕のをただ単にコピーしても出来ないので注意！書き方を真似してくださいね（*^_^*）

<?php $count = 1; ?><!--カウントを１に設定-->
 
<?php if(have_posts()): while(have_posts()): the_post(); ?><!--記事のループ-->
 
<!--postはサムネイル,タイトル、日付、抜粋をまとめたもの-->
<?php
    if ($count == 1) {
    echo '<div class="post1">';<!--カウントが1の時にclass属性を指定-->
    }else if ($count == 2) {
    echo '<div class="post2">';<!--カウントが2の時にclass属性を指定-->
    }else if ($count == 3){
    echo '<div class="post3">';<!--カウントが3の時にclass属性を指定-->
    }else if ($count == 4){
    echo '<div class="post4">';<!--カウントが4の時にclass属性を指定-->
    }else echo'<div class="post">';<!--カウントが5以上の時にclass属性を指定-->
?>
 
<a href="<?php the_permalink(); ?>"><!--サムネイルのリンク-->
 
<?php
    if ($count == 1) {
    the_post_thumbnail();<!--カウントが1の時のサムネイルの大きさを指定-->
    }else if ($count == 2) {
    the_post_thumbnail();<!--カウントが2の時のサムネイルの大きさを指定-->
    }else if ($count == 3 || $count == 4){
    the_post_thumbnail(medium);<!--カウントが3または4の時のサムネイルの大きさを指定-->
    }else the_post_thumbnail(array(150,150));<!--カウントが5以上の時のサムネイルの大きさを指定-->
?>
</a><!--endサムネイルのリンク-->
 
<!--post-boxはタイトル日付抜粋をまとめたもの-->
<?php
    if ($count == 1) {
    echo '<div class="post-box1">';<!--カウントが1の時のclassを指定-->
    }else if ($count == 2) {
    echo '<div class="post-box2">';<!--カウントが2の時のclassを指定-->
    }else if ($count == 3) {
        echo '<div class="post-box3">';<!--カウントが3の時のclassを指定-->
        }else if ($count == 4) {
        echo '<div class="post-box4">';<!--カウントが4の時のclassを指定-->
    }else echo '<div class="post-box">';<!--カウントが5以上の時のclassを指定-->
?>
 
 
    <div class="index-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
        <div class="index-date"><?php the_time('F d , Y'); ?></div>
            <div class="exp"><?php the_excerpt(); ?></div>
    </div><!--end post-box-->
    </div><!--end post-->
 
<?php if ($count == 4) : ?>
<!--カウント4のときにAdsenseコードを入力-->
<?php endif; $count++; ?><!--end Adsense。カウントを加算-->
 
 
<?php endwhile; endif; ?><!--end記事のループ-->

カウントが大きくなることに、別々のclassを出力させてあげる事でCSSにて別のデザインを反映する事が出来ます。

2ページ目以降には反映させない方法

最新の記事だけに、この表示方法を適用したいのですが、このままだと2ページ目以降(exp : http://xxx.com/page/2)でも同様の表示になってしまいます。これを回避するためにWordPressの条件分岐関数である is_paged() を使います。

これは2ページ目以降の場合という条件を反映してくれます。最初のカウント直下に以下のコードを書き加えます。

<?php $count = 1; ?>
<?php if(is_paged()){
    $count = 1001;<!--2ページ目以降の場合にカウントを1001にする-->
}?>

これを加える事で、2ページ目以降はカウントのループが1001からのループになります。（1001じゃ少ない人は10001にでもしてくださいｗ）

また、Goriさんの記事途中にAdsenseコードを挿入する方法を使う場合には、

<?php if ($count == 4 || $count == 1003 ) : ?>
<!--カウント4または1003のときにAdsenseコードを入力-->
<?php endif; $count++; ?><!--end Adsense。カウントを加算-->

これにより2ページ目以降でカウントを1001〜にしても、1003でAdsenseコードを出力してくれます。

このままだとカテゴリーページなどでも反映されちゃう

2ページ目以降は、解決しましたがカテゴリーページやアーカイブページを別途用意していない場合はindex.phpを読み込んでしまうので、カウントが1からのループになってしまいますので、classが適用されてしまいます。

これを解決するには2つの方法があります。

1つ目は、別途category.phpやarchive.phpやsearch.phpなどを用意する方法。

2つ目は、ループを1001からに指定してあげる方法。これはさっきis_paged()で2ページ目以降の場合の対処法と同じ方法です。

<?php $count = 1; ?>
<?php if(is_paged() || is_category() || is_archive() || is_search() ){
    $count = 1001;<!--2ページ目以降、カテゴリー、アーカイブ、サーチページの場合にカウントを1001にする-->
}?>

これを加える事で、カテゴリーページ、アーカイブページ、サーチページでも1001からのループになります。

個人的には、カテゴリーページなどは別途phpファイルを用意してあげた方が、デザインを修正するときにわかりやすいかと思います。index.phpで一元管理した方がデザインを大幅に変更する場合に便利ですが、慣れていない人は別々にした方がいいでしょう。

まとめると

<?php $count = 1; ?><!--カウントを１に設定-->
<?php if(is_paged() || is_category() || is_archive() || is_search() ){
    $count = 1001;<!--2ページ目以降、カテゴリー、アーカイブ、サーチページの場合にカウントを1001にする-->
}?>
 
<?php if(have_posts()): while(have_posts()): the_post(); ?><!--記事のループ-->
 
<!--postはサムネイル,タイトル、日付、抜粋をまとめたもの-->
<?php
    if ($count == 1) {
    echo '<div class="post1">';<!--カウントが1の時にclass属性を指定-->
    }else if ($count == 2) {
    echo '<div class="post2">';<!--カウントが2の時にclass属性を指定-->
    }else if ($count == 3){
    echo '<div class="post3">';<!--カウントが3の時にclass属性を指定-->
    }else if ($count == 4){
    echo '<div class="post4">';<!--カウントが4の時にclass属性を指定-->
    }else echo'<div class="post">';<!--カウントが5以上の時にclass属性を指定-->
?>
 
<a href="<?php the_permalink(); ?>"><!--サムネイルのリンク-->
 
<?php
    if ($count == 1) {
    the_post_thumbnail();<!--カウントが1の時のサムネイルの大きさを指定-->
    }else if ($count == 2) {
    the_post_thumbnail();<!--カウントが2の時のサムネイルの大きさを指定-->
    }else if ($count == 3 || $count == 4){
    the_post_thumbnail(medium);<!--カウントが3または4の時のサムネイルの大きさを指定-->
    }else the_post_thumbnail(array(150,150));<!--カウントが5以上の時のサムネイルの大きさを指定-->
?>
</a><!--endサムネイルのリンク-->
 
<!--post-boxはタイトル日付抜粋をまとめたもの-->
<?php
    if ($count == 1) {
    echo '<div class="post-box1">';<!--カウントが1の時のclassを指定-->
    }else if ($count == 2) {
    echo '<div class="post-box2">';<!--カウントが2の時のclassを指定-->
    }else if ($count == 3) {
        echo '<div class="post-box3">';<!--カウントが3の時のclassを指定-->
        }else if ($count == 4) {
        echo '<div class="post-box4">';<!--カウントが4の時のclassを指定-->
    }else echo '<div class="post-box">';<!--カウントが5以上の時のclassを指定-->
?>
 
 
    <div class="index-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
        <div class="index-date"><?php the_time('F d , Y'); ?></div>
            <div class="exp"><?php the_excerpt(); ?></div>
    </div><!--end post-box-->
    </div><!--end post-->
 
<?php if ($count == 4　|| $count == 1004) : ?>
<!--カウント4のときにAdsenseコードを入力-->
<?php endif; $count++; ?><!--end Adsense。カウントを加算-->
 
 
<?php endwhile; endif; ?><!--end記事のループ-->

このようになります。