任意の画像を『WP-OGP』のサムネイルに使う

今朝参加した勉強会でその存在をきちんと知ることになったOGP（Open Graph Protocol）。遅ればせながら当サイトにも実装してみるか、とググってみたところ『WP-OGP』というその名もズバリなプラグインがヒットしました。嗚呼素晴らしきかなプラグインの世界。

ですがこのプラグイン、例えばFacebook上でシェアしたとき、デフォルトだと

こんな画像が表示されてしまいます。せっかくプラグインを組み込むのなら、オリジナルの画像を使いたいのが人情というものでしょう……ということで二つの方法を紹介。

デフォルト画像を上書き

How do I replace the default image?
Go to “wordpress directory”/wp-content/plugins/wp-ogp and replace default.jpg with another image with the same name! This only works for the default image, you need to add a featured image on the post page for it to work with articles.

……と『WP-OGP』のFAQにも載っている方法。任意の画像に default.jpg というファイル名をつけ wp-content/plugins/wp-ogp 内にアップロードするだけです。上書きするのでもともとの default.jpg が消えてしまったり、JPEG以外の画像だと使えなかったり、という欠点も。

functions.phpに追記

『WP-OGP』内の wpogp_add_head 関数をアクションフックで置き換える方法です。管理パネルの [外観] – [ヘッダー] で設定した画像だけでなく、サイト外の画像も表示可能という利点があります。例のごとく「ご利用は計画的に :-)」のコードですが、こんな感じで functions.php に追記します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function my_wpogp_add_head() {
 
        if ( function_exists( 'wpogp_add_head' ) ) {
                global $post;
                $image = get_the_post_thumbnail_src( get_the_post_thumbnail( $post -> ID ) );
                $data = wpogp_set_data();
 
                if ( empty( $image ) ) {
                        $data['og:image'] = $data['image_src'] = get_header_image();
                }
                else {
                        $data['og:image'] = $data['image_src'] = $image;
                }
 
                echo get_wpogp_headers( $data );
        }
 
}
remove_action( 'wp_head', 'wpogp_add_head' );
add_action( 'wp_head', 'my_wpogp_add_head' );

上記の例では

• アイキャッチ画像がないとき……サムネイルはヘッダー画像
• アイキャッチ画像があるとき……サムネイルはアイキャッチ画像

となります。ヘッダー画像以外のものをサムネイルにしたいときは、9行目の get_header_image(); を ‘http://www.example.com/hoge.jpg’; のように書き換えればオッケイです。

［2011.5.1追記］
初出時のコードにて『WP-OGP』プラグインOFF時の挙動に不具合がありました。コードを修正しましたので、初出時のものをお使いになった方がいらっしゃいましたら、再設定をおねがいいたします。