Simplicityのトップページ等のリスト表示をサムネイルカード方式に変更するカスタマイズ方法

テーマ改造

アイキャッチ画像のサイズ変更方法にて、以下のような質問をいただきました。

TOPページのアイキャッチ画像を大きいサイズに変更する方法をご教示頂けないでしょうか。
イメージとしては画像を横に広く表示させ、その画像の下に本文が表示されるように変更したいです。
HTMLとCSSの知識がほぼ皆無なためご教示頂けると助かります。

今回は、このやり方を紹介したいと思います。

スポンサーリンク

準備

まずは準備です。

Simplicityでテーマファイルをカスタマイズする場合は、子テーマを使用することを推奨しているので、子テーマを使用した方法のみ書きます。というか、子テーマを使用した方がのちのち必ず楽になります。

子テーマの準備は、以下の方法を参照してください。

子テーマをインストールする方法

あとこのカスタマイズは、Simplicity1.0.10 20140904時点でのカスタマイズ方法です。

functions.phpの編集

まずは子テーマのfunctions.phpに以下を記入します。

add_image_size('thumb320',320,180,true);//320×180のサムネイルを作成

これは新しいサイズのサムネイルを生成するコードです。カスタマイズが完了したら以下の方法でサムネイルを生成する必要があります。

Simplicityテーマをインストールして、画像の比率が狂うときにやって欲しいこと

entry-card.phpの編集

次に、Simplicity（親テーマ）からentry-card.phpをコピーしてきて、子テーマフォルダ内にペーストします。

その中身を全部消して、以下のコードを貼り付けます。

<?php //投稿をのリスト表示のループ内で呼び出されるサムネイルカード ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('entry') ?>>
  <div class="entry-thumb">
    <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <a href="<?php the_permalink(); ?>" class="entry-image"><?php the_post_thumbnail( 'thumb320', array('style' => 'width:320px;height:180px;') ); ?></a>
    <?php else: // サムネイルを持っていないときの処理 ?>
      <a href="<?php the_permalink(); ?>" class="entry-image"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/no-image-320.png" alt="NO IMAGE" title="NO IMAGE" style="width:320px;height:180px;" class="no-image list-no-image" /></a>
    <?php endif; ?>
  </div><!-- /.entry-thumb -->
  <div class="entry-content">
      
    <h2><a href="<?php the_permalink(); ?>" class="entry-title"><?php echo get_the_title(); ?></a></h2>
    <p class="post-meta">
      <span class="post-date"><i class="fa fa-clock-o fa-fw"></i><?php the_time('Y/n/j') ;?></span>
      
      <?php if (is_category_visible()): ?>
      <span class="category"><i class="fa fa-folder fa-fw"></i><?php the_category(', ') ?></span>
      <?php endif; ?>
    </p><!-- /.post-meta -->
    <p class="entry-snippet"><?php echo get_the_custom_excerpt( get_the_content(''), get_excerpt_length() ); //カスタマイズで指定した文字の長さだけ本文抜粋?></p>
<p class="entry-read"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
  </div><!-- /.entry-content -->
</div>

親テーマからの変更部分は以下です。

<a href="<?php the_permalink(); ?>" class="entry-image"><?php the_post_thumbnail( 'thumb320', array('style' => 'width:320px;height:180px;') ); ?></a>

先程設定した、320×180pxのサムネイルを呼び出すとともに、スタイルもそのように設定しています。

あともうひとつサムネイルがなかった時の処理。

<a href="<?php the_permalink(); ?>" class="entry-image"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/no-image-320.png" alt="NO IMAGE" title="NO IMAGE" style="width:320px;height:180px;" class="no-image list-no-image" /></a>

もし、投稿にサムネイルがなかった場合はこちらは呼び出されます。

Simplicityの親テーマには、320×180用の画像が用意されていないので、子テーマのimagesフォルダ内に、サムネイルがなかった場合の数を用意します。

今回はとりあえずこんなのを用意しました。

画像は自分で好みに合うものを用意してください。

style.cssの設定

最後は、子テーマのstyle.cssに以下を追記します。

#main .entry{
  width:320px;
  height:380px;
  overflow:hidden;
  float:left;
  clear:none;
  margin:10px 10px 0 10px;
}

.entry-thumb {
  float: none;
  margin-right: 0;
  text-align:center;
}

.entry-thumb img{
  margin-bottom:0;
}

.entry-content {
  margin-left: 0;
}

.entry h2{
  margin-top:0;
  font-size:18px;
  max-height:50px;
  overflow:hidden;
}

.entry-snippet{
  height:48px;
  overflow:hidden;
}

.entry .post-meta .category{
  display:none;
}

細かなスタイルは、HTMLクイックリファレンスなどを参考に設定すると良いと思います。

画像の再生成

ここまで編集が終わったら、先程functions.phpで追加したサムネイル設定を元に画像を再生成します。

以下の記事を参考に再生成を行ってください。

Simplicityテーマをインストールして、画像の比率が狂うときにやって欲しいこと

動作確認

ブラウザで動作を確認します。

サイトのトップページやアーカイブページなどで、このように表示されればOKです。

モバイルでは、このように表示されます。

これが質問者のご期待に添えるデザインかどうかはわかりません。

ただ、ここまでの説明にサムネイルサイズを変更するのに必要な方法は含まれているので、好みのデザインではなかった場合は、上記の方法を参考に自身の好みのスタイルに変更してみてください。

スポンサーリンク