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フォルダ内に、サムネイルがなかった場合の数を用意します。

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

no-image-320

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

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です。

トップリストのサムネイル化

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

サムネイルリストモバイル表示

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

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

GitHubリポジトリ

不具合等ありましたらGitHubに、ご連絡いただけると幸いです。

yhira/simplicity2

スポンサーリンク
アドセンス(大)
アドセンス(大)

フォローする

スポンサーリンク
アドセンス(大)

コメント

  1. よしかわ より:

    simplicityを使わさせて頂いています、よしかわといいます。
    よろしくお願いいたします。
    よく行くアクアリウムのショップの入荷情報をまとめるサイトを作っているのですが、
    トップページから一つのアイキャッチ画像ではなく、複数の(少なくとも5個程度)
    本文中の画像を表示させるためのカスタマイズをsimplicityで行いたいと思っています。
    ちょうど複数画像を表示させるための方法を発見したのですが、
    http://www.myu-zin.com/webridge/archives/497.html
    http://www.rusica.net/heft/wp-memo-17 など
    simplicityで具体的にどこのphpを書き換えればカスタマイズできるのか解らず、
    作成者の方に聞いてみようということでコメントいたしました。
    できるのであればトップページの最新記事一覧部分、記事検索結果やカテゴリ、
    タグで出てきた記事一覧に関連するページすべてにそれを表示させたいのですが、
    可能でしょうか?申し訳ありませんがよろしくお願いいたします。

  2. アバター画像 わいひら より:

    編集するファイルはlist.phpでいけるかと思います。

    ただ申し訳ないですが、詳細については、サポート対象外のものにもあるように、各自で検証していただく必要があります。
    僕も、自分の仕事があるので、長いコードを書いて動作確認するという時間的余裕はないです。
    カスタマイズが難しい場合は、クラウドソーシングなどにご依頼ください。

  3. よしかわ より:

    わざわざのご返答、ありがとうございます。
    自分で少し弄ってみたところ、
    list.phpから呼び出されるentry-card.phpにコードを追加することで画像を5枚表示
    することまではできました。
    しかし、本来の
    <a href="” class=”entry-image entry-image-link” title=””>
    で与えられているクラス”entry-image entry-image-link”のままでは
    あたりまえですがレイアウトが大きく
    崩れてしまっています。(サイトの方を見ていただければ解るかと思います)
    これをcssを弄ってレイアウトの調整をしたいのですが、これを定義付けているのは
    style.cssのどの部分なのでしょうか?
    先のコメントで紹介したところの、一番目の画像を左側に大きく、2つ目~5つ目までを
    小さな画像で4つ右に並べ、その下に記事タイトル、本文、カテゴリ等・・・
    のように並べたいと思っております。
    style.cssのentry-imageに該当する部分をどうかお教えください。
    何度もご面倒でしょうが、よろしくお願いいたします。

  4. アバター画像 わいひら より:

    カスタマイズによって付加された部分なので、style.cssに定義部分はないです。
    ただ、.thum-miniクラスと、順番で設定する疑似クラスのCSSセレクタで設定すれば良いのではないかと思います。

    CSSセレクタについては以下を参照してください。
    セレクタ|CSS HappyLife ZERO
    カスタマイズするべき箇所を知るには、デベロッパーツールなどを使用してください。
    WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方

  5. よしかわ より:

    ありがとうございます。色々手を加えてやってみます。