2017/04/1564 Shares

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

201403カスタマイズ

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

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

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

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

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

before-image

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

after-image

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

まず、トップページの記事一覧を表示している部分(このブログおよび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="http://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="http://b.hatena.ne.jp/entry/image/<?php the_permalink() ?>" /></a>
<?php } ?>

最新記事に「NEW」を表示する方法

今のところ週2~3回更新しているので、最新記事の日付横にある「NEW」は直書きしているだけです。

追記

直書きすると2ページ目以降の最上部記事にも「NEW」が表示されるというイージーミスに気づいたので、日数経過で表示処理を切り替える方法に変えました。

» 最新記事だけ大きく表示する方法・改訂版

直書き以外にも、日数経過と共に表示・非表示を切り替えたり、指定した新着件数に表示したりなど方法はいろいろあります。しばらくこのまま様子を見て、気に入らなかったら変えようかなーと。

「NEW」を表示するパターンはこちらが参考になります。

WordPressでNew!を表示するパターン別4つの方法

シンプルなフラットアイコン追加

カテゴリーとタグの前に挿入するシンプルなアイコンを探していたら、ものすごくピッタリで扱いやすいのを見つけました。

Free vector icons

「SVG」「PSD」「PNG」形式のほか、アイコンフォントとしても使えるみたい。さらに、一括ダウンロードだけじゃなくほしいものをチョイスできるのが激しく便利。

各アイコンを選択して、最後に右上のダウンロードボタンを押すだけ。シンプルなフラットアイコンを探しているならオススメです。

icon-download

まとめ

さらに細かいところでいけば、行間と段落間の余白を微妙に変えてみました。

こういうデザインは自己満足だったりしますが、少しでも読みやすくしたいので勉強しながら改善していきたいと思います。

トップページのファーストビュー部分はおおむね満足なものに仕上がったので、今度は記事一覧最下部とフッターの間をいじる予定。たぶん、夏までには完成するはず…

カスタマイズはハマると病みつきになるので、記事更新とのバランスをみながらぼちぼちやっていきます!

それでは、また。