【WordPress】アイキャッチ画像を自動で切り抜き・リサイズ

Nov 11, 2013

【WordPress】アイキャッチ画像を自動で切り抜き・リサイズ

ブログを美しく見せる最も手っ取り早い手段がアイキャッチ画像だと思います。まさに、記事毎に表示されている ⇧⇧⇧ この上の画像ですね。

アイキャッチとは、その名の通りコンテンツの内容を端的なイメージで訴求するためのもの。記事への興味を持ってもらうために必須と言えますが、毎回フォトレタッチソフトで画像を整形するのはかなり面倒です。僕の場合はかつて更新が滞った一因にもなりました。

そこで！　アイキャッチ用にアップした画像を自動で切り抜いたりリサイズする方法をご紹介します。Auto Post Thumbnailなどのプラグインを利用したりテンプレートファイルに直接記述する方法を多く見掛けますが、僕個人のポリシーで可能な限りfunctions.phpからコントロールする方法を推奨しています。

functions.phpに以下のコードを追加

functions.phpはテーマディレクトリの直下にあるファイルで、テーマによってはfunction.phpだったりします。直接ファイルを編集してFTPでアップロードするか、管理画面の「外観」⇒「テーマ編集」⇒「テーマのための関数」を編集します。いずれにしてもバックアップはしっかりと。

アイキャッチ機能を使用可能にする設定

`1`	`// アイキャッチ画像を使えるようにする`

`2`	`add_theme_support(` `'post-thumbnails'` `);`

WordPress管理画面の投稿/固定ページでアイキャッチ画像を設定するためのコードです。

切り抜きの場合

`1`	`// アイキャッチ画像の表示の仕方を指定（切り抜き）`

`2`	`set_post_thumbnail_size(520, 220, true );`

そして表示サイズを指定するコード。数字はそれぞれ画像の横幅と縦幅なので自由に設定してください。trueは画像を切り抜きたい場合に記述します。上記の例では、アップロードした元画像のサイズを640×480とすると、そのままの比率（4:3）で520×390に縮小してから天地の余剰部分をカットして520×220にする作業を自動で行うわけです。

リサイズの場合

`1`	`// アイキャッチ画像の表示の仕方を指定（リサイズ）`

`2`	`set_post_thumbnail_size(520, 220 );`

trueを記述しない場合は自動リサイズになります。縦横比を保ったまま縮小されなので、たとえば縦横1：1に指定すると足りない部分が生じます。

実例を挙げるとこんな感じですね。当サイトでは各記事のアイキャッチを520×220、新着記事のサムネイルを50×50でいずれも切り抜きモードに設定しています。

表示したいテンプレートファイルに以下のテンプレートタグを追加

`1`	`<?php the_post_thumbnail();?>`

以下はこのサイトにおける記述例です。index.phpとsingle.phpに上記のタグを追加しています。

1<div class="post">
2    <div class="cal"><?php echo get_post_time('M j, Y'); ?></div>
3    <?php the_post_thumbnail(); ?>
4    <div class="entry">
5    <div class="title">
6        <ul>
7        <li class="cat"><?php the_category(', ') ?></li>
8        <li class="tag"><?php the_tags('', ', '); ?></li>
9        </ul>
10        <h2 class="entry_title">
11        <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
12        <?php the_title(); ?></a>
13        </h2>
14    </div>
15    <span class="goog_qs-tidbit goog_qs-tidbit-0"><?php the_content('続きを読む'); ?>
16    </div>
17</div>

挿入する場所はデザインに合わせて任意で。あとでスタイルシートで微調整もできます。これで一旦は完了です。

ついでにアイキャッチが無い場合の代替画像を指定

いくら簡単にアイキャッチを表示できるようになったとはいえ、それでも記事内容によってはマッチする画像を見つけてくること自体が難しかったりします。

でも当サイトの場合はデフォでアイキャッチが必要なサイトデザインなので、画像が用意できないときに予め設定しておいた代替画像を表示させるようにしました。そのために以下のコードを同じくfunctions.phpに追加で記述しています。

1// アイキャッチ画像が無い場合の代替画像を指定
2add_action( 'save_post', 'save_default_thumbnail' );
3function save_default_thumbnail( $post_id ) {
4    $post_thumbnail = get_post_meta( $post_id, $key = '_thumbnail_id', $single = true );
5    if ( !wp_is_post_revision( $post_id ) ) {
6        if ( empty( $post_thumbnail ) ) {
7            update_post_meta( $post_id, $meta_key = '_thumbnail_id', $meta_value = '23' );
8        }
9    }
10}