WordPressで「ブログ村」の新着記事サムネイルにアイキャッチ画像を表示させる。

2021年05月17日 12時00分月齢:5.7[六日月] 潮汐:中潮
4年前に投稿 | WordPress | 4件のコメント

12分ぐらいで読めます。

今回は、WordPressを使っている人で「ブログ村」の新着記事サムネイルに画像が表示されない人のための内容です。

いくつかのブログポータルサイトに登録しているのですが、そのうちのひとつに「にほんブログ村」があります。新着記事の自動連携を設定していて、記事の公開とほぼ同時に反映してくれるのですが、あるときからブログ村の仕様が変わって連携されないようになりました。記事の内容に関する連携はしばらくして解決したのですが、画像だけが表示されない状態になってしまいました。

2020年8月の内容

2020年9月の内容

2020年8月までは画像が表示されていたのに、2020年9月からサムネイル画像が表示されなくなっています。これがブログ村に登録されている全部のブログではなく、特定のブログだけに発生しているものだからよけいに気になります。別に画像が表示されていなくても支障ないけれど…なんだか寂しい。やっぱり画像を表示させたいっ!

ということで、WordPressを使っている人で同じような症状に悩んでいる人は、ぜひ試してみてください。

参考にしたのは、

WordPressのアイキャッチ画像をOGPに設定する方法

実際に設定した方法は以下のとおりです。

[WordPress管理画面]→[外観]→[テーマエディター]から今使っているテーマの[テーマヘッダー(hearder.php)]を選択する。(ここの記述はテーマによって異なるのですが、大事なのは<head>タグを見つけることです。)

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" media="screen">
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/print.css" media="print">
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" type="image/x-icon">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>">

<head>から</head>の間のどこかに、以下の内容

<?php if (has_post_thumbnail()) : ?>
<meta property="og:image" content="<?php the_post_thumbnail_url(); ?>" />
<?php else: ?>
<meta property="og:image" content="<?php bloginfo('template_directory'); ?>/images/no-eyecatch.png" />
<?php endif; ?>

を挿入する。今回は<head>の3行下に入れたけれど、別にここじゃなくても大丈夫だと思います。ピンク色の文字の部分はアイキャッチ画像がないときに代用される画像のURLを記述してくださいね。この例ではWordPressの関数を使っているので「<?php」で始まっていますが、もちろん普通に「http://」「https://」で始まるURLでOKです。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width,initial-scale=1">
<?php if (has_post_thumbnail()) : ?>
<meta property="og:image" content="<?php the_post_thumbnail_url(); ?>" />
<?php else: ?>
<meta property="og:image" content="<?php bloginfo('template_directory'); ?>/images/no-eyecatch.png" />
<?php endif; ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" media="screen">
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/print.css" media="print">
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" type="image/x-icon">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>">

アイキャッチ画像があるときはその画像、ないときは代用される画像を表示してくれます。

ほら、こんな感じで画像が出るようになりましたー。

その後、ブログ村の[マイページ]→[記事管理]→[記事メンテナンス]と進み、それぞれの記事の[記事再取得]を押すと過去の記事の画像を取得してくれます。

にほんブログ村サポートのページには、OGPの設定が必要なブログサービス一覧として

OGPの設定が必要なブログサービス一覧

2019/04/01 10:40

下記ブログサービスをご利用されている場合は、設定や設定変更をすることによりOGPが取得できるブログサービスになります。

FC2ブログ

WordPress

忍者ブログ

Blogger

と書かれていたので、WordPress以外でも同じような症状で困っていたら同じような方法(全く同じとは言い切れないけれど)で解決するかも。

とりあえず、これが最低限の解決方法なのですが、もう少し調べてみましょう。

上記の方法では5行追加しただけですが、もっとしっかりしたOGPの設定がありました。これを丸ごと<head>から</head>の間に記述すればいいようです。試していないので、実際どうなるのかは何とも言えないですけど。

<meta property='og:locale' content='ja_JP'>
<meta property='og:site_name' content='<?php bloginfo('name'); ?>'>
<meta property="og:type" content="blog">
<?php
if (is_single()){
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";
echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";
endwhile; endif;
} else {
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";
echo '<meta property="og:type" content="blog">';echo "\n";
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';
if (is_single()){
if (has_post_thumbnail()){
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl )){
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
}
}
?>

またheader.phpではなく、functions.phpに書くっていうのもアリのようです。最近はこの方法が主流なのかな。

[WordPress]プラグインに頼らずOGP設定してみる

からの引用です。ページごとに出力がコントロールされているようですね。

以下を丸ごとfunctions.phpに追記してください。これも試していないので、実際どうなるのかは何とも言えないですけど。

//headにOGPを出力

add_action('wp_head','my_meta_ogp');
function my_meta_ogp() {
if( is_front_page() || is_home() || is_singular() ){
global $post;
$ogp_title = '';
$ogp_descr = '';
$ogp_url = '';
$ogp_img = '';
$insert = '';

if (is_front_page() || is_home()) { //フロントページまたは投稿インデックスページの場合
$ogp_title = get_bloginfo('name');
$ogp_descr = get_bloginfo('description');
$ogp_url = home_url();
} elseif(is_singular()) { //投稿ページまたは固定ページの場合
setup_postdata($post);
$ogp_title = $post->post_title;
$ogp_descr = mb_substr(get_the_excerpt(), 0, 100);
$ogp_url = get_permalink();
wp_reset_postdata();
}

//og:type
$ogp_type = (is_front_page() || is_home()) ? 'website' : 'article';

//og:image
if (is_singular() && has_post_thumbnail()) {
$ps_thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
$ogp_img = $ps_thumb[0];
} else {
$ogp_img = '●アイキャッチが無い場合に表示されるOGP画像のパス●';
}

//出力するOGPタグ
$insert .= '<meta property="og:title" content="'.esc_attr($ogp_title).'">' . "\n";
$insert .= '<meta property="og:description" content="'.esc_attr($ogp_descr).'">' . "\n";
$insert .= '<meta property="og:type" content="'.$ogp_type.'">' . "\n";
$insert .= '<meta property="og:url" content="'.esc_url($ogp_url).'">' . "\n";
$insert .= '<meta property="og:image" content="'.esc_url($ogp_img).'">' . "\n";
$insert .= '<meta property="og:site_name" content="'.esc_attr(get_bloginfo('name')).'">' . "\n";
$insert .= '<meta property="og:locale" content="ja_JP">' . "\n";

echo $insert;
}
}

あと、プラグインで設定する方法もアリだとは思うのですが、むやみにプラグインを入れるのもサイトが重くなるなどの副作用が考えられます。このあたりはサイト運営者個々の考え方しだいですが、これくらいの改造度なら自分で手を加えるほうが絶対いいと思うなー。

古い記事・新しい記事

古い記事 [2021年01月23日]: ← WordPressで固定ページをホームにするとき、タイトルを非表示にする。
新しい記事 [2021年07月05日]: → WordPressで年齢を自動更新する仕組みがおもしろくて実装してみた。

他にも「WordPress」カテゴリの記事はいかがですか。

たうビーからのコメント | 2021年05月29日 #

ありがとうございました!

すっごい悩んで
いろんなブログ見たんですけど
うまく行かなくて…。

こちらのブログのとおりやったら、
すぐ画像反映されました!

ランキング応援させてもらおうと思ったんですが、
バナーがない?

煤からのコメント | 2021年05月31日 #

コメントありがとうございます。
お役に立てて光栄です。

ランキングのバナーは、以前は設置していたのですが最近は設置していないのです…
応援していただけるお気持ちだけで十分です!

210918 台風 | hc9からのピンバック | 2021年09月18日 #

[…] 調べたら詳しい方が、ネットにやり方を記載してくれてました。 […]

ワードプレスブログ村で画像が表示されない問題を解決 – とりあえず、やってみる課からのピンバック | 2021年10月09日 #

[…] WordPressで「ブログ村」の新着記事サムネイルにアイキャッチ画像を表示させる。 […]

煤式自動連結器