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

この記事は約5分で読めます。

20140612

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

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

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

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

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

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

Photonresize機能は、

resize and crop to given dimensions (px)

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

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

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

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

$thumbnail = wp_get_attachment_url( get_post_thumbnail_id() );

get_post_thumbnail_idhttp://付きのアイキャッチ画像の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使用前↓

Image

Photon使用後↓

Image

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

おまけ: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指定を忘れていたので画像の上下が詰まっていたのが、

Image

このように空くようになりました。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ プラグイン
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。