Stinger3　カスタマイズ – トップページ(最新の投稿)のカラム数を変えてみる。

トップページ(最新の投稿)のデザインっていろんなパターンがありますよね。
ちょっと変えてみたらどうなるのだろう。。
と思っていじってみたのでメモ。

参考にしたサイトは最下部に記載のサイト。
参考と言うか、例によってまるまる同じようにしてしまいましたが。。

トップページ(最新の投稿)のカラム数を変えてみる。

とりあえず、2カラムにしてみたらこんな感じになります。
このようにカラム数を増やしてみました。

header.phpの変更

まずはじめにトップページの「home」部分のid名を変更します。
Stingerでは記事ページやアーカイブページでも「#main」というidを使っている。らしいです。
以前、一度自分でやってみようと、やみくもにカラム数を変更してみたところ、アーカイブページも変更されてしまって、やっぱりできないのかなぁと悩んだこともありました。
「#main」を直接変更してしまうと、こういった悪い影響も他のページで出てしまうので注意しましょう。
参考にしていたページの通り、トップページのみid名を「#homemain」に変更しました。

header.phpの最後の部分を下記のように変更しました。

変更前

<div id="wrap">
<div id="wrap-in">
<div id="main">

変更後

<div id="wrap">
<div id="wrap-in">
    <?php if(is_mobile()) { ?> <!-- スマホサイトは変更しない -->
      <div id="main">
    <?php } else { ?> <!-- ここからパソコン版の動作 -->
      <?php if(is_front_page()||is_archive（）): ?> <!-- トップページは#homemain -->
        <div id="homemain">
      <?php else :?> <!-- 他のページは#main -->
        <div id="main">
      <?php endif; ?>
    <?php } ?>

style.cssの変更

#wrap #wrap-in #main {…中略
}

の記述の下に下記を追加しました。

/*--------------------2カラム用追記start-----------------*/ 
/*-----------------------#homemainの設定---------------------*/
#wrap #wrap-in #homemain {
	float: left;
	width: 710px;
	padding-right: 19px;
	padding-left: 19px;
	padding-top: 20px;
	border: 1px solid #ccc;
	background-color: #FFF;
	border-radius: 4px 4px 4px 4px;
	padding-bottom: 20px;
}

/*--------------------2カラムに整えます-----------------*/

#wrap #wrap-in #homemain .entry{
    width: 342px;
    height: 300px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding:0px;
    float:left;
    border:1px groove;
    background-color: #ffffff;
}

/*トップページ記事一覧のタイトル長さ調整*/ 
#wrap #wrap-in #homemain .post .entry .entry-content {
    float: left;
    width: 320px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: transparent;
}
 
#wrap #wrap-in #homemain .entry .entry-title-ac{
    width:280px;
    padding:0px;
    margin:0px;
    margin-top:1px;
}

/*サムネイルの大きさを調整*/
#homemain .entry .sumbox {
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    height: 150px;
    width: 300px;
    padding: 0px;
    background: #fff;
    border: none;
}
/*--------------------2カラム用追記end-----------------*/ 

見え方とかの微調整は下図のようなのを書きながら、少しずつ調整して、見栄えが良くなるような感じにしていきました。
全体の幅をどれくらいにしているのか、サイドの幅をどれぐらいにしているのか。によっても変わってくるかと思いますので、自身のサイトによって微調整が必要になってくるかと思います。

それからついでといってはなんですが、4カラムにしてみるときのstyle.cssは下記。
同じように実際の画面を見ながら数値を微調整していきました。

/*--------------------4カラム用追記start-----------------*/ 
/*-----------------------#homemainの設定---------------------*/
#wrap #wrap-in #homemain {
	float: left;
	width: 710px;
	padding-right: 19px;
	padding-left: 19px;
	padding-top: 20px;
	border: 1px solid #ccc;
	background-color: #FFF;
	border-radius: 4px 4px 4px 4px;
	padding-bottom: 20px;
}

/*--------------------4カラムに整えます-----------------*/
#wrap #wrap-in #homemain .entry{
    width: 170px;
    height: 322px; 
    margin-right: 5px;
    margin-bottom: 5px;
    padding:0px;
    float:left;
    border:1px groove;
    background-color: #ffffff;
}

/*トップページ記事一覧のタイトル長さ調整*/ 
#wrap #wrap-in #homemain .post .entry .entry-content {
    float: left;
    width: 150px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: transparent;
}
 
#wrap #wrap-in #homemain .entry .entry-title-ac{
    width:150px;
    padding:0px;
    margin:0px;
    margin-top:1px;
}

/*サムネイルの大きさを調整*/
#homemain .entry .sumbox {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    height: 280px;
    width: 150px;
    padding: 0px;
    background: #fff;
    border: none;
}
/*--------------------4カラム用追記end-----------------*/ 

実際に4カラムにしてみた絵づらはこちら。

カラム数などはお好みで決めればよいですね。
カラムの大きさとかも好みがあると思います。

サムネイル画像のサイズを変更する

functions.phpに次の行を追加します。
これはサムネイル画像のサイズを決める定義になります。
//アイキャッチサムネイル
と記載がある部分が良いかと思います。

//アイキャッチサムネイル
add_image_size('thumb_columns',ここに幅を入力,ここに高さを入力,true);

とりあえず、自分の場合は、4カラムにして、サムネイル画像の大きさを幅150px、高さ280pxとしました。

//アイキャッチサムネイル
add_image_size('thumb_columns',150,280,true);

次にhome.phpを変更します。
上記て定義したものを呼び出す。といった感じです。

変更前

<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php
$title= get_the_title();
the_post_thumbnail(array( 150,150 ),
array( 'alt' =>$title, 'title' => $title)); ?>

デフォルトでは、「array(150,150)」と呼び出していますが、ここを「'thumb_columns'」に変更します。

変更後

<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php
$title= get_the_title();
the_post_thumbnail('thumb_columns',
array( 'alt' =>$title, 'title' => $title)); ?>

このサムネイルの変更に伴い、style.cssもこちらに合わせて変更します。
上記のstyle.cssの
/*サムネイルの大きさを調整*/
のところでサムネイルの大きさを調整します。
自分の例ですと、4カラムの場合、サムネイルのサイズは幅150px、高さ280pxとしていますので、こちらのstyle.cssも変更してあります。(上記style.cssを参照。)
また、それに伴い、サムネイル画像の大きさだけでなく、カラム自体の高さにも注意をしてサムネイル画像が収まる大きさに変更してください。

カラム内の表示項目を変更する

あとは、カラム内に何を表示するのかを決めてカスタマイズします。

デフォルトで表示されるのは、
・サムネイル画像
・タイトル
・投稿日付
・カテゴリー
・タグ
・本文の一部
・「続きを読む」リンク
でしょうか。

これらはhome.phpに記載があるので、どれを表示してどれを表示しないかを決めてカスタマイズしていきます。
mobileとPCとで分岐があるのでそれも自分で決めながらやると良いでしょう。
とりあえずシンプルに、サムネイル画像とタイトルだけにしてみました。

そして、サムネイル画像に黄色い画像(幅150px、高さ280px)を入れてみて表示して見た結果がこちら。

この場合は、サムネイル画像とタイトルが表示される感じのカラムになります。

まとめ

・トップページ(最新の投稿)のカラム数を変えるために、headder.phpとstyle.cssを変更する。
・サムネイル画像のサイズの変更をする場合には、functions.phpとhome.phpとstyle.cssを変更する。
・カラムに表示される項目はhome.phpを変更する。
・実際のページを見ながらstyle.cssの数値を微調整して見た目を調節する。

といったところでしょうか。
これである程度自由なカスタマイズができるのではないでしょうか？

参考にしたのは下記サイトです。

Stinger3カスタマイズ！2カラムのおしゃれ記事一覧をつくろう！

 - wordpress カラム