WordPressのアイキャッチをFacebookに合わせる

雑記帳
スポンサーリンク

FBWPImage
Facebookでの表示を意識したアイキャッチ画像を作成するのならば、WordPressでのアイキャッチ画像の表示もそれにしよう。
そんな思いつきで、アイキャッチ画像周りの設定を変更しました。

これから同じようにFacebookに合わせたアイキャッチ画像の表示にしようとされている方には、参考になる部分があるかもしれません。
しかし、雑が喰おうでの既存の設定からの変更の記録ですので、万人向けではないかもしれませんが参考程度にどうぞ。

[TOC]

スポンサーリンク

OGP画像とアイキャッチ画像

Facebookでのアイキャッチ画像は、1200×630のサイズを推奨 1 とのこと。
正方形で作成する場合には、1200×1200で。
とりあえず、1.91:1の割合で小さすぎないサイズで作成しとけばいい。

雑が喰おうでは、画像の横幅はmax-width値640pxで表示するようにしていますので、その倍にあたる1280で作成したいと思います。
先の割合でいうと、1280×670です。

そのまま縮小リサイズした画像を用意すれば、iPhoneのRetinaディスプレイにもすぐに対応できます。

OGP画像シミュレータ

私はOGP画像用に、1280×670と1280×1280の台紙を用意しましたが、そこまでやるつもりもないが、公開前に確かめたいという場合があります。
そんな時は『OGP画像シミュレータ』が便利です。

アイキャッチ画像のトリミング

雑が喰おうでは現在、正方形にアイキャッチ画像をトリミングしていますが、今後はとりやめて、ちょっとデザインも修正したいと思います。
Facebookの横長表示に合わせたいと思います。
正方形にトリミングされたやつに合わせるのは、アイキャッチ画像を作成する度に意識しなくてはならなくなるので、めんどくさいですしね。
とはいえ、はじめから正方形で作成するのもなぁという。
正方形画像ってちょっと苦手です。

WordPress アイキャッチ画像関連のコード修正

方向性が決まったところで、さっそく修正開始。

functions.php

WordPressでアイキャッチ画像を使用するためのコードをテーマファイルのfunctions.phpに記述します。

とはいえ、すでにアイキャッチ画像を使用しているので、下記のコードを追記する必要はないのですが、改めて確認です。

/* アイキャッチを使用する設定 */
function mysetup() {
  add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'mysetup' );

テーマファイル:PHP

続いて、テーマファイルの修正。
実際にアイキャッチ画像を表示させたいところにWordPress関数を入れます。

修正前はこんな感じでした。

<div id="entry-body">
    <?php
    if (has_post_thumbnail()) {
    the_post_thumbnail( array(150,150) );
    }
    ?>
    <?php
    $my_content = get_the_content(続きを読む);
    $my_content = preg_replace("|(<img[^>]+>)|si","",$my_content);
    echo $my_content;
    ?>
</div>

Auto Post Thumbnailプラグインで出た不具合の対策
WordPressでアイキャッチ画像があるかどうかを判定するようにしたのが最後。
それ以来の修正です。
もう、Auto Post Thumbnailを使用していないので、後半部分は省略してもいいのかなぁとも思いますが、そのままいきます。

で、変更後が以下

<div id="entry-body">
    <?php
    if (has_post_thumbnail()) {
    the_post_thumbnail( array(640,640),false );
    }
    ?>
    <?php
    $my_content = get_the_content(続きを読む);
    $my_content = preg_replace("|(<img[^>]+>)|si","",$my_content);
    echo $my_content;
    ?>
</div>

the_post_thumbnail( array(640,640),false );に変更しただけです。
表示サイズを変更させ、トリミングしないように指定しています。

雑が喰おうでは、WordPressのリサイズ画像作成をしないようにしている 2 ので、元画像を縦横指定して表示させることになります。

大きな画像を用意しておけば、そのままRetinaディスプレイに対応させることもできます。

アイキャッチ画像のスマホ用表示について

スマホには大きな画像はその分表示速度が遅くなることに直結してしまいますので、スマホとそれ以外で分岐 3 させたほうがいいでしょう。

ですが、先述の通り、雑が喰おうではWordPressのトリミング機能を停止させているので、分岐させても縮小リサイズした画像を参照しようがないので、意味がないです。

アイキャッチ画像に指定した画像のみリサイズすることができればいいのですが、手動では絶対忘れるでしょうし、毎回サイズが同じとも限りません。
なので今回は分岐せず、大きい画像をそのままスマホにも表示させています。

残った課題

先のスマホとPCでの分岐のためにも、
アイキャッチ画像に指定した画像のみWordPressにリサイズさせる手段があれば、教えてください。

AJAX Thumbnail Rebuildというプラグインでは、アイキャッチ画像のみの処理ができるようですが、あくまで一括リサイズ用のプラグインですので、毎回実行するかと考えると現実的ではないです。

やはりWordPress側でスマホとそれ以外で分岐 3 させる方法が合理的でしょう。

wp_is_mobileis_mobileでスマホとそれ以外を分岐させ、スマホとそれ以外それぞれに、srcsetやRetina.jsで画像を振り分ける。
ただし、それにはアイキャッチ画像のリサイズは必須。

近い将来やってくる、srcsetの指定では、最終的にRetinaディスプレイMacとPC、Retinaディスプレイスマホと単なるスマホとで画像をちゃんと表示させたい 4 と思っており、通常の画像よりもアイキャッチ画像の方がWordPress側で分岐もできるし、それができそうだと思っていたのですが、残念です。

とはいえ、将来的にはスマホでのRetinaディスプレイは標準になるでしょうから、スマホ用の表示ではウインドウサイズちょうどの画像の用意は不要になるかもしれないとも考えています。

テーマファイル:CSS

過去使用していたアイキャッチ画像用の設定 5 で指定していますので、CSSも編集します。

/* アイキャッチ画像 */
.attachment-●●x●● {}
.wp-post-image {}

このへんはそれぞれ好みですが、私はマージンだけ設定しました。

/* アイキャッチ画像 */
.wp-post-image {margin:1em auto;}

フルサイズで表示しているので、中央配置するよう左右のmarginをautoにする必要はないんですけど。

過去のアイキャッチ画像をどうするか

これらの設定が完了しても、既に作られているサムネイルのサイズは変更されません。
ではどうするか。

大概の場合、Regenerate ThumbnailsAJAX Thumbnail Rebuild などの
プラグインで修正しているようです。

私は修正しません。
未来に生きるので。
めんどいだけですが。

OGPタグを修正

雑が喰おうでは、All in One SEO Packで設定しており、All in One SEO Pack からOGPimageはアイキャッチ画像を選ぶように設定しています。
またメディアサイズのリサイズをしないようにしているので、特に変更点はありまません。

まとめ

これで一応の修正はおわりました。
しかし、気になるのはやはり、リサイズ画像を自動で用意していないが故の部分。

この辺は解消方法がわかりしだい修正したいです。

タイトルとURLをコピーしました