記事を書くより楽しい？ブログのトップページをリニューアルしました

2015/02/20

6 2 2

Naifix新テーマ

Stinger3 から自作テーマへ変更して 1 年ちょっと。その間マイナーチェンジを繰り返して遊んでいましたが、今回はトップページを中心に大幅な変更を加えました。

Theme Test Drive を使って裏でカスタマイズ作業を行い、ベースがある程度できあがったので早速テーマを乗せかえてテスト中です。

備忘録として変更点をご紹介します。

Naifix ビフォーアフター

細かい話は後回しにして、ビフォーアフターのイメージをご覧ください。

旧テーマのトップページは一般的な時系列表示

以前のテーマはこのような感じでした。

Naifix旧テーマのファーストビュー

いわゆる「一般的なブログ」で、記事一覧が投稿日順にずらっと並んでいます。基本的にトップページも記事・アーカイブページも同じレイアウトでした。

Naifix旧テーマのトップページ

サイドバーの新着記事がトップページで表示されないようにしていただけで、メインカラム部分に記事一覧が出るのか記事本体が出るかの違いです。

トップページとそれ以外の出力を変更する方法はこちら

http://naifix.com/is_home-and-is_mobile/

is_homeとis_mobileを使ってカスタマイズの幅を広げよう！

なんか単調だなーと思って、約 1 年前に最新記事のみ大きく目立たせるカスタマイズを行っております。

ただ、それでも古い記事がどんどん埋もれていくのは変わりません。ページャーを設置していましたが、そこから過去記事をたどっていく方は少ないのが現状。

段組にしたり一覧の表示数を増やす方法もありますが、どうせならニュースサイトのようにカテゴリー別で表示したほうが記事を探しやすくなるのでは、というのがテーマ変更の狙いです。

カテゴリー別で記事一覧が表示される例。画像はエキサイトニュース

新テーマのトップページはカテゴリー別の一覧を追加

変更後のテーマはこのようなレイアウトになりました。

Naifix新テーマのファーストビュー

ファーストビューに最新記事 1 件とデイリーランキング。その下に新着記事を 5 件表示しています。

そこから下に進むと、カテゴリー別の記事一覧が出てきます。

Naifix新テーマのトップページ

時事ネタを扱うことはあまりないので、過去記事を埋もれさせないのが目的なら人気順やランダムでも良いのかもしれません。ここら辺はアクセス解析とにらめっこしながら検討する予定です。

カスタマイズの詳細と参考にしたサイト

このブログは WordPress を使用しているので、他の CMS を利用しているなら技術的なことはあまり参考にならないかもしれません。

また、一部で非推奨の方法を採用しているため、コピペして使用する場合はご注意ください。

タイトルロゴのフォントを探すなら Fonts 500

ブログ名である「Naifix」のロゴは、開設当初から何度か変えております。今回のロゴはたぶん 6 代目ぐらい。

一時期は WEB フォントも使用していたのですが、どの環境でも同じく表示されるよう画像にしています。

たんにフリーフォントを探して色をつけているだけなのですが、このフォントを探すというのが実に面倒。何となく良さそうなものをダウンロードしても、ロゴにするとちょっとイメージと違ったりしますよね。

これらの問題を一気にクリアできるのが、「Fonts 500」という WEB サービスです。

「Use custom text」を選択してテキストを入れると、このようにそれぞれのフォントでどんな感じになるかあらかじめ表示してくれます。

FONTS500を使ったサンプル

気に入ったのがあれば、そのままフォントをダウンロードして使えます。誰か日本語対応サービス作ってください！

get_postsで最新記事を取得

WordPress テーマを自作 or 望みどおりのカスタマイズを考えるなら、ループ処理は避けて通れません。

小難しい話は専門家にまかせておいて、本テーマのイメージはこうなります。

Naifix新テーマレイアウトイメージ

サブループとしている最新記事と新着記事の表示は、「get_posts」というテンプレートタグを使用しています。

各コードはこんな感じ（クラス名は省略しています）。

最新記事を1件取得するコード

<a href="<?php the_permalink();?>">
<div>
<?php
$postslist = get_posts('numberposts=1&orderby=post_date&order=DESC"');
foreach ($postslist as $post) : setup_postdata($post);
?>
<div>
<h2>最新記事</h2>
<p><?php the_time('Y.m.d') ?><span><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span></p>
<h3><?php the_title(); ?></h3>
</div>
<div>
<?php if ( has_post_thumbnail() ): ?>
<?php
$title= get_the_title();
the_post_thumbnail(array( 600,400 ),
array( 'alt' =>$title, 'title' => $title)); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="600" height="400" />
<?php endif; ?>
</div>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</div>
</a>

<div>

<?php

$postslist = get_posts('numberposts=1&orderby=post_date&order=DESC"');

foreach ($postslist as $post) : setup_postdata($post);

<div>

</div>

<div>

<?php if ( has_post_thumbnail() ): ?>

<?php

$title= get_the_title();

the_post_thumbnail(array( 600,400 ),

array( 'alt' =>$title, 'title' => $title)); ?>

<?php else: ?>

<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="600" height="400" />

<?php endif; ?>

</div>

<?php endforeach; ?>

<?php wp_reset_postdata(); ?>

</div>

</a>

最新記事をのぞく新着記事 5 件を取得するコード

<div>
<div>
<h2>おすすめ新着記事</h2>
</div>
<?php
$postslist = get_posts('numberposts=5&offset=1&orderby=post_date&order=DESC"');
foreach ($postslist as $post) : setup_postdata($post);
?>
<a href="<?php the_permalink();?>">
<div>
<div>
<?php if ( has_post_thumbnail() ): ?>
<?php
$title= get_the_title();
the_post_thumbnail(array( 150,150 ),
array( 'alt' =>$title, 'title' => $title)); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="150" height="150" />
<?php endif; ?>
</div>
<div>
<p><?php the_time('Y.m.d') ?><span class="new-ca-name"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span></p>
<h3><?php the_title(); ?></h3>
<p>SNSシェア数</p>
</div>
</div>
</a>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<p><i class="fa fa-link"></i>&nbsp;<a href="http://naifix.com/site-map/">Naifix記事一覧はこちら</a></p>
</div>

<div>

<h2>おすすめ新着記事</h2>

</div>

<?php

$postslist = get_posts('numberposts=5&offset=1&orderby=post_date&order=DESC"');

foreach ($postslist as $post) : setup_postdata($post);

<div>

<?php if ( has_post_thumbnail() ): ?>

<?php

$title= get_the_title();

the_post_thumbnail(array( 150,150 ),

array( 'alt' =>$title, 'title' => $title)); ?>

<?php else: ?>

<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="150" height="150" />

<?php endif; ?>

</div>

<div>

<p>SNSシェア数</p>

</div>

</a>

<?php endforeach; ?>

<?php wp_reset_postdata(); ?>

<p><i class="fa fa-link"></i> <a href="http://naifix.com/site-map/">Naifix記事一覧はこちら</a></p>

</div>

最新記事を 1 件のみ取得し、それ以降の 2 ～ 6 件目はオフセット offset という方法を使って取得しています。

シェア数の表示はもともと使っていた「SNS Count Cache」というプラグインに任せています。公式ボタンに比べるとそのスピードは一目瞭然。

プラグインの設定方法はこちら

ツイート数やはてブ数を取得して高速表示できるSNS Count Cache

もう少しキレイなコードが書きたい今日この頃ですが、とりあえず表示されればいいかなというレベルですｗ

WordPress ネタは検索するとたくさん出てきますが、なかにはかなり古い情報も混じっているので、これから勉強するなら本を買ったほうが早そう。

いちばんやさしいWordPressの教本人気講師が教える本格Webサイトの作り方第2版 WordPress 4.x対応 (「いちばんやさしい教本」シリーズ)

本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版

WordPress Popular Posts でデイリーランキング表示

ファーストビュー最新記事のとなりにはデイリーランキングを表示しています。ここは「WordPress Popular Posts」という人気プラグインで処理。

各記事・アーカイブページのサイドバーには、同プラグインで週間ランキングを出力しています。

スマホ用ランキングページを作ったり、記事ページの上部にランキングを貼ろうかとも考えたのですが、今のところ保留中です。

プラグインの設定とカスタマイズ方法はこちらが参考になります。

これで自由自在！WordPress Popular Postsで人気記事を任意の箇所に表示する3つの方法

【非推奨】query_postsでメインループ書き換え

ここでご紹介するカテゴリー別の記事取得方法は非推奨なので、あくまで参考程度に留めておいてください。

最適な方法が見つかれば改めてご紹介しようと思います。個人で使う分には問題ないのですが、単にコピペしただけでは至るところで不具合が発生する可能性があります。

その方法は「query_posts」というテンプレートタグを使うもので、コードは以下のようになります。

<?php
$categories = get_categories('parent=0');
foreach($categories as $category) :
?>
<div>
<h2><a href="<?php echo get_category_link( $category->term_id ); ?>"><?php echo $category->cat_name; ?></a></h2>
</div>
<?php
query_posts('showposts=3&cat='.$category->cat_ID);
if (have_posts()) : while (have_posts()) : the_post();
?>
<a href="<?php the_permalink() ?>">
<div>
サムネイル・タイトル・日付など
</div>
</a>
<?php endwhile; endif; ?>
<?php endforeach; ?>
<?php wp_reset_query(); ?>