今回は、WordPressを使っている人で「ブログ村」の新着記事サムネイルに画像が表示されない人のための内容です。
いくつかのブログポータルサイトに登録しているのですが、そのうちのひとつに「にほんブログ村」があります。新着記事の自動連携を設定していて、記事の公開とほぼ同時に反映してくれるのですが、あるときからブログ村の仕様が変わって連携されないようになりました。記事の内容に関する連携はしばらくして解決したのですが、画像だけが表示されない状態になってしまいました。
- 2020年8月の内容
- 2020年9月の内容
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'); ?>">
アイキャッチ画像があるときはその画像、ないときは代用される画像を表示してくれます。
ほら、こんな感じで画像が出るようになりましたー。
その後、ブログ村の[マイページ]→[記事管理]→[記事メンテナンス]と進み、それぞれの記事の[記事再取得]を押すと過去の記事の画像を取得してくれます。
にほんブログ村サポートのページには、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->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;
}
}
あと、プラグインで設定する方法もアリだとは思うのですが、むやみにプラグインを入れるのもサイトが重くなるなどの副作用が考えられます。このあたりはサイト運営者個々の考え方しだいですが、これくらいの改造度なら自分で手を加えるほうが絶対いいと思うなー。
月齢:8.7[九日月] 潮汐:小潮
月齢:5.7[六日月] 潮汐:中潮
月齢:4.7[五日月] 潮汐:中潮
月齢:3.7[黄昏月] 潮汐:中潮
月齢:0.7[新月] 潮汐:大潮
月齢:28.4[二十九日月] 潮汐:大潮
