WordPressトップページカスタマイズ－最新記事だけ大きく表示する方法

2014-03-152021-08-17

先月はWordPress無料テーマGushの公開と修正に時間を費やして、メインであるこのブログはあまり手をつけていませんでした。うずうずしてきたので気になっていたところをプチリニューアルしています。

主な変更点はトップページ。今までは新着記事がお行儀よく並んでいましたが、最新記事だけちょっと目立たせるデザインに。

その他細かい変更点を備忘録として載せておきます。

ビフォーアフターのイメージ

肝心の変更前キャプチャを撮り忘れていましたが、こんな感じで記事一覧が更新日順に並んでいました。よくある普通のデザイン。

今回はこのように最新記事1件のみ目立つよう変更しました。

トップページ最新記事を大きく表示させる方法

まず、トップページの記事一覧を表示している部分（このブログおよびGushではhome.php）を書き換え、あとはCSSで好みのデザインに仕上げていきます。

追記

「query_postsは使ったらダメ！」というご指摘をいただきまして、別の方法に切り替えました。

» 最新記事を大きく表示する方法改訂版はこちらです。

全体のPHPコードサンプル

■変更前イメージ

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<div class="home_area">
<section>
<div class="thumb_box">
記事サムネイル表示部分
</div><!--//thumb_box-->
<div class="entry_box">
<h3>記事タイトル</h3>
<p>更新日・カテゴリ・タグ</p>
</div>
<div class="clear"></div>
</section>
</div><!--//home_area-->

<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>

■変更後イメージ

<!--最新記事1件-->
<?php query_posts('posts_per_page=1'); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>

<div class="home_area_top">
<section>
<div class="entry_box">
<h3>記事タイトル</h3>
<p>日付・カテゴリ・タグ</p>
</div>

<div class="thumb_box">
記事サムネイル
</div><!--//thumb_box-->

<!--抜粋はスマホ非表示-->
<?php if(is_mobile()) { ?>
<?php } else { ?>
<div class="extract">
<p>記事本文100文字抜粋</p>
</div>
<?php } ?>

<div class="clear"></div>
</section>
</div><!--//home_area_top-->

<?php endwhile; endif; ?>

<!--更新日順一覧表示-->
<?php query_posts('offset=1'); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>

<div class="home_area">
<section>

省略

<div class="clear"></div>
</section>
</div><!--//home_area-->

<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>

この部分が最新記事1件分を取得するコード。

<?php query_posts('posts_per_page=1'); ?>

そして、こちらが最新記事1件分を除いて表示させるコードです。

<?php query_posts('offset=1'); ?>

追記

この方法はページャー（ページ分割機能）がうまく動かないおそれがあります。offsetを使う場合はページ送りのエラーを回避してください。

» WP-PageNaviとoffsetの関係

サムネイル取得サイズは、最新記事が300、それ以降は150に設定して区別しています。

CSS設定

各記事を囲んでいるDIV要素には「home_area」というクラス名をつけています。最新記事部分は「home_area_top」というクラス名をつけて区別しました。

また、タイトルの<h3>もクラス名を変えて文字サイズを指定。

レスポンシブデザインなので、ブレイクポイントごとに調整しています。

GushのCSSはこのようになっています。

レスポンシブデザインCSSの構成

その他のカスタマイズと意図

PCとスマホで出力を変える分岐

抜粋部分はスマホからアクセスがあった時は出力していません。

振り分け処理を行うには、まず「functions.php」に下記を記述します。
（WP無料テーマGushは設定済み）

//スマホ表示分岐
function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android.*Mobile', // 1.5+ Android *** Only mobile
        'Windows.*Phone', // *** Windows Phone
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser

    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

つづいて、振り分けを行いたい部分に下記コードを記述すればOK。今回スマホ用は空白にしました。

<?php if(is_mobile()) { ?>
スマホ用表示
<?php } else { ?>
PC用表示
<?php } ?>

レスポンシブデザインを採用していても、スマホ表示に不要なものは外したほうが良いです。とくに表示スピードに影響がある部分は気をつけましょう。

抜粋は余分なスクロールを必要とするので、スマホで外しています。

各記事のはてブ数を表示する方法

トップページの記事ごとにはてブ数を表示するのは、今回のカスタマイズ前にやっていました。

WordPressであれば、下記コードをコピペするだけでOK。

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>"><img src="https://b.hatena.ne.jp/entry/image/<?php the_permalink() ?>" /></a>

時間帯等によって表示が重くなるので、スマホでは出力していません。前述の方法と組み合わせて、こんな感じにしています。

<!--はてブ数-->
<?php if(is_mobile()) { ?>
<?php } else { ?>
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>"><img src="https://b.hatena.ne.jp/entry/image/<?php the_permalink() ?>" /></a>
<?php } ?>