Simplicityのダーティーなカスタマイズをご紹介します。

やりたいこと

Simplicityのレイアウトを好みに修正したところ、「ちょっとサムネイルが小さいな」と感じるようになり、「記事一覧画面のサムネイルを任意のサイズ」で表示することにしました。

Before:サムネイルが150の正方形

After: サムネイルが270x200の長方形


%%※Simplicityを直接更新するためSimplicityのアップデートはできなくなる(アップデートすると修正が消えてしまう)点にご注意ください。%% 子テーマSimplicity childを利用して影響を最小限に抑えることができます。不勉強でした。 Simplicity childをインストール、有効化しておいてください。

また、今回のエントリはSimplicityのデフォルトレイアウトサムネイルカードを採用していることが前提の内容です。
一覧ページのレイアウトは管理ツールの外観>カスタマイズから確認、変更することができますよ。

カスタマイズ

  • 手順1. サムネイルサイズを追加する
  • 手順2. サムネイルカードの変更
  • 手順3. CSSの編集

手順1. サムネイルサイズを追加する

Simplicityでは初期状態で以下サイズのサムネイルが用意されています。

  • 100x100
  • 150x150
  • 320x180

今回横長のサムネイル使いしたいのですが、画像をきれいに表示するため、新しいサムネイルサイズの設定を定義します。

  • WordPressの管理ツールにログインし外観>テーマの編集に遷移します。
  • テーマのための関数 (functions.php)をクリックします
  • functions.phpを編集、保存します。

functions.phpの編集内容

functions.phpthumb270の行を追加してください。
第2引数がwidth、第3引数がheightの指定です。

//以下にSimplicity子テーマ用の関数を書く
add_image_size('thumb270',256,200,true);

ちょっとメモ

add_image_sizeは「画像widthが第2引数とwidthとイコール」な場合に横幅のリサイズが発生せず、heightが上下均等にカットされる処理でした。
リサイズが発生しない=>画像の劣化が起こりくいため、元の画像が活かされる形がベターと思います。

当ブログのアイキャッチ素材は256x256サイズで統一しているため、サムネイルもwidth256で設定し、画像がきれいに出るようにしています。

手順2. サムネイルカードの変更

サムネイルカードのレイアウトで、今回追加したサムネイルサイズが表示されるようにプログラムを修正します。

entry-card.phpのコピー

サムネイルカードのプログラムは親テーマにしか存在しません。
そのため、親テーマに存在するentry-card.phpを子テーマにコピーし子テーマで扱うことができるようにします。

WordPressのインストールディレクトリが/var/www/wp/の場合、テーマのディレクトリはそれぞれ以下の場所です。

  • 親テーマ:/var/www/wp/wp-content/themes/simplicity/
  • 子テーマ:/var/www/wp/wp-content/themes/simplicity-child/

コピー方法は次のいずれかでしょうか。

  1. WinSCPなどのFTPクライアントソフトでサーバにログインし、ファイルをコピーする
  2. SSHクライアントソフトでサーバにログインし、CPコマンドを打つ
cp /var/www/wp/wp-content/themes/simplicity/entry-card.php /var/www/wp/wp-content/themes/simplicity-child/entry-card.php

この手順は不慣れな方には難しいと思います。ごめんなさい。

entry-card.phpの編集

entry-card.phpを子テーマにコピーするだけで、WordPressの管理ツール上から編集することができるようになります。


ファイルが追加されていますね。
修正内容は以下の通りです。

  • WordPressの管理ツールにログインし外観 > テーマの編集に遷移します。
  • entry-card.phpを選択し、次のコードの’thumb150’を’thumb270’に編集し、保存します。
<;a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'thumb150', array('class' => 'entry-thumnail', 'alt' => get_the_title()) ); ?></a>

手順3. CSSの編集

今回正方形ではなく長方形のサムネイルとしましたが、このままでは画像が縮小されて表示されてしまいますので、最後にCSSの変更を行います。

  • WordPressの管理ツールにログインし外観>テーマの編集に遷移します。
  • スタイルシート (style.css)を編集し、.entry-thumb imgを編集します。

css.entry-thumb img{ border:0; width:256px; height:200px; }

これで画像がきれいに表示されます。
修正するところが多く複雑ですが、仕上がりが期待通りになると嬉しくなりますよね!


2015年9月8日 手順を、Simplicity childを利用する形に修正