home.phpのカスタマイズ

このテーマはちょっと特殊でして、トップページをいじるには、index.phpではなく、home.phpをいじる必要があります。

さらに、細かい調整をするにはcontent.phpを触る必要があります。
結局、このcontent系のPHPが重要なので、何かデザイン変更するときは、ここをいじるのがいいでしょう。

一番新しい投稿を大きくする

見てもらうとわかるように、僕のTOPページやカテゴリ検索結果ページでは、ブロックの横幅が倍になっています。
これは『WallPress』のデフォルトではこうはなりません。
すべての横幅が均一となっているからです。

それだと見栄えとしてさびしい部分があるので、ちょっと調整しました。
元々、ブロックのclassにgrid-doubleを加えればいいわけですが、これは直接加えると全てがこの幅になってしまいます。
なので、以下のように調整。

functions.php　249行目付近

		//Has first posts
		if ( isFirst( $post->ID ) ) {
			$classes[]="grid-double";
		}
		

	}
	return $classes;
}
endif;

function isFirst(){
    global $wp_query;
    return ($wp_query->current_post === 0);
}

さらに、この横幅が倍になったときにmediumサイズの画像を持ってくる処理をします。

content.php　29行目付近

					<?php
					if($grid == 'double') :
						the_post_thumbnail('medium');
					else :
						the_post_thumbnail('thumbnail');
					endif;
					?>

上を以下に書き替え


					<?php
					if(isFirst()) :
						the_post_thumbnail('medium');
					else :
						the_post_thumbnail('thumbnail');
					endif;
					?>

これで最初の投稿が幅が倍になるというわけです。

サムネイルサイズの一括変更

今回、リキッドレイアウトの変更という事で、ブロックごとの幅がデバイスごとに可変するようになりました。
すると、今までのサムネイルサイズでは画像が大きさが足りず、粗くなってしまいます。

そこで、サムネイルサイズの一括変更を行う事にしました。
幸い、以下を参考に簡単にできますので、やり方は以下を参照してください。
思ったより簡単！WordPressのサムネイルを別サイズも含め作り直す方法！！ | 株式会社LIG

CSSの調整

TOPページに関しては、これ以外はCSSの調整で事足りました。
他は特に何も特殊な事はやっていません。

ただ、テーマを使うに当たって便利な知識として、CSSを新しく作ることを推奨します。
何故なら、新しく加えるclass等は、次のテーマ変更に引き継ぎたいとき等に便利だからです。
直接、元々あるstayle.cssに加えて行ってもいいのですが、その流用するときに時間がかかるのは誰も望みませんしね。

hedder.phpに以下を追加

<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/assets/css/home.css" />

名前はhome.cssとしてますが、add-style.cssでもなんでも構いません。
わかりやすい名前をつけましょう。

総括

まずはトップページのカスタマイズを紹介したのですが、ほとんどがCSSで何とかなるものばかりです。
しかし、複雑なリキッドレイアウトですので、CSSも複雑です。
ここは試行錯誤を行い、気にいったものになるまでやり続けることによって、中身を理解していくことをお薦めします。

今回から始まった中級者へ道は、6回ほどの連載を予定しています。
今までのやり方では物足りなかった初心者の方、どうか参考までに読んで下さい。