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

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

14分ぐらいで読めます。

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

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

  • 2020年8月の内容
    202008
  • 2020年9月の内容
    202009

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

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

参考にしたのは、

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

[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'); ?>">

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

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

202105

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

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

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

2019/04/01 10:40

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

と書かれていたので、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に書くっていうのもアリのようです。最近はこの方法が主流なのかな。

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

以下を丸ごと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-&gt;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() &amp;&amp; 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;
}
}

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

古い記事・新しい記事

古い記事
新しい記事

3件のコメント »

[RSS on this post] [TrackBack URI]

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

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

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

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

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

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

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

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

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

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

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

コメントをどうぞ

Translate »