home.phpを修正してみる

デフォルトの表示設定は「最新の投稿」になっており、Gush2では通常次のような感じで表示されます。

WS000532

各投稿ごとにアイキャッチ画像と投稿日付、タイトル、カテゴリーが表示されています。

このページは、gush2ではhome.phpで作成されています。

アイキャッチ画像

アイキャッチ画像は、何も指定しないとデフォルトの同じ画像が表示されてしまいますので、投稿するときに設定してやる必要があります。
ブログでは、いわゆるアイキャッチ、注目を促すための画像でしかありませんが、商品紹介のページだとすれば商品画像などを入れてもいいです。
画像サイズはデフォルトでは150px×150pxになりますが、商品画像などの場合はもう少し大きくした方がいいまもしれません。
場合によっては、いちいち画像をアップロードしたくないから表示しないようにしてしまいたいという場合もあるかもしれません。

サムネイルを表示する部分は下のようになっています。
ユーザーがアップロードしたサムネイルが無いときは、デフォルトの画像を表示するようになています。

まずサムネイルを表示しないようにするには、上のコードの部分を全部削除するだけなので簡単です。

サムネイル画像は、アップロードする時に100×100,110×110,150×150 のものが生成されています(この画像は、wp-content/uploads/年/月 に保存されています)が、単純に上のコードの 150 という数字を任意の値に変えただけで・縮小できました。
アップロード時に生成されたサイズ以外を使うと、
例えば、the_post_thumbnail(“medium”, array( ‘alt’ =>$title, ‘title’ => $title)); ?>
などとすると、オリジナルの画像ファイルから持ってこられるようで、それが正方形でない場合縦横の比率がデフォルトのサムネルと違ってきます。また、class=”thumb_box” の CSS で width が指定されているのでそれ以上の幅にはなりません。商品画像など大きく表示したい場合はこれも修正する必要があります。

公式ページで「サムネイルをリサイズして幅と高さをキレイにそろえる方法」が紹介されていますので、ご参照ください。

タイトル下の記事抜粋を挿入

googleで検索したときのように、タイトルの下に記事の抜粋が表示されると親切ですので、これを入れてみることにします。

記事を表示しようとした場合、記事のタイトルフォントが大きすぎてスペースがないのでカテゴリ表示を日付の右側に並べて、タイトルの下を開けます。

なおタイトルフォントの大きさを変えたければ、style.css に

でフォントサイズを指定してください。

カテゴリが記事のタイトルを書きだしているところは、

の部分です。この中のクラス名が”eb_cat”の div ブロックを<h3>の上にもっていきます。
日付の隣に並べるには float を使います。日付を消してしまいたい場合は、float せずに <p class=”date-time”><?php the_time(‘Y/m/d’) ?></p> の部分を削除してください。

とりあえず style.css は次のようにしました。

記事の抜粋を表示するには、 the_excerpt(); を使用します。<h3> ~ </h3> タグの下に、

を挿入します。

home

しかし、home.php は、[設定]-[表示設定]の「フロントページ」の表示で、「最新の投稿」を選択していなければ使われませんので、コーポレートサイトなどの場合はいじることはないかもしれませんね。

スポンサーリンク