アイキャッチ画像をトリミングして出力する方法

2014年6月13日

この記事は最終更新日から11年経過しています。内容が古い可能性があります。

昨日、かわいくて人気のあるテーマchocolatをカスタマイズヘッダ画像をアイキャッチ画像にで、アイキャッチ画像をヘッダ画像と置き換えて出力するようにしました。

しかし、ヘッダ画像の（大）をそのまま表示しているのでかなりのスペースを取られてしまっていました。そこで、今回はアイキャッチ画像をトリミングして出力するようにカスタマイズしてみました。

記事をざっと見る

トリミングの構想—どのようにトリミングしたいか

今指定してあるヘッダ画像の縦は380ピクセル横幅は980ピクセルでした。だいたいこのぐらいの大きさにトリミングしたいと思います。

調べてみるとCSSでトリミングすることは可能みたいなのですが、開始位置を固定で指定しないといけないようです。アイキャッチ画像に指定する画像がどのような大きさかは決まっていないので、固定だとちょっとうまくありません。大きめの画像を指定するので　縦横の真ん中　の画像部分をヘッダに表示したいと思います。

そこで、思い出したのが　Jetpackの機能のPhotonです。このblogでも urlに書くだけで投稿中にある画像を簡単トリミング！ Photon API でご紹介しています。

Photonのresize機能は、

resize and crop to given dimensions (px)

ということでリサイズしてレイアウトにあった構図に切り取ってくれるようです。結果を見ると縦横の真ん中のところを切り取ってくれるようです。

ということで、アイキャッチ画像のリサイズをPhotonで行ってみようと思います。

Photonで大きいアイキャッチ画像のリサイズをする

アイキャッチ画像のURLを取得します。

$thumbnail = wp_get_attachment_url( get_post_thumbnail_id() );

get_post_thumbnail_id でhttp://付きのアイキャッチ画像のURLが取得できます。photonの記述に追加する部分はhttp://部分は不要ですので、

        $thumbnail = str_replace('http://', '', $thumbnail);

このようにhttp://部分をなくしてしまいます。そして、Photonでリサイズしたものをイメージとして出力するのが、

        <img alt="" src="http://i0.wp.com/<?php echo $thumbnail;?>?resize=980,380" />

この指定方法です。http://i0.wp.com/ の後にhttp://部分を取ったサムネールのURLをくっつけます。
resize=横幅ピクセル,縦幅ピクセル を指定します。

これで表示すると、

Photon使用前↓

Photon使用後↓

このように真ん中のあたりでリサイズされて表示されました。アイキャッチ画像を独自の大きさで表示したいときはこのような方法でリサイズすることが出来ます！

おまけ：chocolatのheader修正

昨日、子テーマでheader.phpを修正しましたが上記のPhotonを追加した部分と、アイキャッチ画像にdiv指定をし忘れていたのでその部分を追加しました。

    <div id="header-center" class="clearfix">
        <?php if ((is_single()) AND (has_post_thumbnail())) : ?>
        <?php
        $thumbnail = wp_get_attachment_url( get_post_thumbnail_id() );
        $thumbnail = str_replace('http://', '', $thumbnail);
        ?>
        <div id="header-image" class="thumbnail">
        <img alt="" src="http://i0.wp.com/<?php echo $thumbnail;?>?resize=980,380" />
        </div><!-- /header-image -->
        <?php else : ?>
        <?php if ( get_header_image() ) : ?>
        <div id="header-image" class="thumbnail">
            <img src="<?php header_image(); ?>" height="<?php echo get_custom_header() -> height; ?>" width="<?php echo get_custom_header() -> width; ?>" alt="" />
        </div><!-- /header-image -->
        <?php endif; ?>
        <?php endif; ?>

        <!-- globalnav -->

これで、div指定を忘れていたので画像の上下が詰まっていたのが、