湾岸ハートプレイス Coastal Heart Place

WordPressのリンクにアイキャッチ画像を表示するために

WordPressで記事を更新し、facebookやツイッターに新着記事がリンクされるようにしている。facebookにはアイキャッチ画像が添付さていたが、それが表示されずに大きなデフォルト画像が表示されるようになった。

今までは特別な設定はしなくてもfacebookには縦横150pxのアイキャッチ画像がついていただが、このところWordPressもプラグインもアップデートが続いていたので、その関係での不具合かと思った。

<All in One SEO>の設定そこでこの症状を検索して調べたところ、どうやら
<All in One SEO>が高機能になったらしく設定が必要だとわかった。とりあえずここでの設定<All in One SEO Pack の設定方法と使い方>をしてみた。
すると変なデフォルト画像が出なくなった。
まずは一歩前進。

次いでfacebookへのリンクでアイキャッチ画像が表示されるようにしたいと、いろいろ調べたがどうも難しくて手に負えない。やはりこういう時はWordPressの日本語サイトのフォーラムで質問してみる。WordPress.org 日本語 フォーラム
待つこと約1日、素晴らしいアドバイスをもらった。

アイキャッチ画像を表示するためには <meta property=”og:image”・・・というソースが書き出されないとけないらしいが、そもそもWordPress自体はこのソースタグを出力しないのです。そこで、それを書き出すために使用しているテーマの<header.php>に

< ?php if(has_post_thumbnail()): //画像のOGタグ開始
$thumbnail_id = get_post_thumbnail_id();
$eye_img = wp_get_attachment_image_src( $thumbnail_id , ‘full‘ );?>
< ?php echo ‘<meta property=”og:image” content=”‘.$eye_img[0].'” />’; ?>

< ?php echo ‘<meta property=”og:image:width” content=”‘.$eye_img[1].'” />’; ?>

< ?php echo ‘<meta property=”og:image:height” content=”‘.$eye_img[2].'” />’; ?>
< ?php endif; //END 画像のOGタグ ?>

これを加えてアップロードした。
ただ、私の場合は縦横150pxサイズにしたかったので、
$eye_img = wp_get_attachment_image_src( $thumbnail_id , ‘full‘ ); を
$eye_img = wp_get_attachment_image_src( $thumbnail_id , array( 150, 150 ) ); にした。

これで何とか元に戻ったのだが、今までは特別な設定もしないで気持ちよく動作していたのに、バージョンアップで今までより複雑にされたのにはストレスが募った。シンプルに優しくしていくのがバージョンアップじゃないのかなぁ?

ま、とりあえず覚え書きです。

Leave a Reply

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください