WordPress : Jetpackが生成する og:image のデフォルト画像「blank.jpg」を変更したい

2014/3/8 技術系メモ

広告：超オススメUnity Asset
　　広告：超オススメUnity Asset

WordPressにJetpackを入れると、どうやらアイキャッチを設定していないページ、例えばトップページとかの og:image が

<meta property="og:image" content="http://wordpress.com/i/blank.jpg" />

のようにブランク画像が設定されてしまうようですね。各エントリーでは、アイキャッチ画像を設定する事でその画像が og:image になってくれます。このデフォルトの「blank.jpg」はいったいどこで設定できるのか、設定画面をいろいろ探したのですが見つけられませんでした。

そこで強引に変えてやろうと思ってファイル検索したところ、「functions.opengraph.php」というファイルに

	// Second fall back, blank image
	if ( empty( $image ) ) {
		$image[] = "http://wordpress.com/i/blank.jpg";
	}

という部分を見つけました。これを変えて更新してやれば、まぁなんとかなりそうなんですが、プラグインファイルを直接書き換える事はしたくないですね。アップデートしたら元に戻るし。

という事で、カスタマイズしたテーマでなんとかする方法を見つけました。↓

Default OpenGraph Image for Jetpack

「WordPress : レスポンシブなTwenty Fourteenの子テーマをつくる」で既存のテーマを子テーマ化する流れを簡単に書きましたが、そこで

Javascriptの関数を子テーマで上書きしたい場合は、子テーマ内に「functions.php」というファイルを用意して、そこに親が持つ関数と同じ名前で書く事で上書きできます。

と書いたように「functions.php」を用意して、そこに上記のサイトに書かれている関数を書き加えてあげると、Jetpackが書き込む og:image を独自のURLに差し替える事ができます。

こちらの子テーマの場合は、「twentyfourteen-mskg2014」というフォルダの中に「functions.php」を作ってあげて、そこに書き加えたい以下の関数だけ書いておけばうまくいくと思います。

/**
 * Adds default OpenGraph image.
 * Christoph Nahr 2014-02-28
 * @param array $tags Array of OpenGraph tags.
 * @return Specified array, possibly modified.
 */
function add_default_image( $tags ) {

    // replace blank Jetpack default image with site header
    if ( $tags['og:image'][0] == "http://wordpress.com/i/blank.jpg" ) {
        unset( $tags['og:image'][0] );
        $tags['og:image'][0] = 'http://mushikago.com/i/appsmemo_logo.png';
    }

    // always remove useless HTTPS image tags
    unset( $tags['og:image:secure_url'] );

    return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'add_default_image' );

ついでにすぐそばにある「twitter:site」というmetaタグも


function mushikago_twitter( $og_tags ) {
	$og_tags['twitter:site'] = '@mushikago';
	return $og_tags;
}
add_filter( 'jetpack_open_graph_tags', 'mushikago_twitter', 11 );

と書き加えてあげる事で独自のTwitterアカウントを設定できます。上記のように「functions.php」書き加えて追加してあげた結果は、

og:imageは、

<meta property="og:image" content="http://mushikago.com/i/appsmemo_logo.png" />

のようになり、twitter:siteの方は

<meta name="twitter:site" content="@mushikago" />

となります。

このエントリーは、あえて画像も使わず、アイキャッチも設定しないで公開してみます。さて、うまく行くかな？