【ブログ村】WordPressのOGP設定でソースコードがコピーできない問題を解消

[st-kaiwa5]ブログ村でOGP設定したいけど、コードが貼り付けられない…[/st-kaiwa5]

 

ブログ村に登録すると、このように自分のブログ記事一覧を見ることができます。

ブログ村 記事一覧

 

しかし初期設定だとサムネイルが非表示になっているんです。

設定方法はブログ村の公式サイトで紹介されていますが、ソースコードが貼り付けられない問題があったので解決策を含めてご紹介します!

目次

 WordpressはOGPの設定が必要

ブログ村でサムネイルを表示するには、header.phpファイルにコードを追加する必要があります。

その手順は公式QAサイトにしっかりと書かれているのですが……

なんと対象コードが画像ファイルになっていて、コピペができません!

プラグインを入れる方法もあるようですが、できるだけプラグインを増やしたくないのでheader.phpにコードを書く方法で設定します。

画像を文字起こしするには

ネットで調べてもコードをコピペできるところが見つからなかったので、画像の文字起こしを試してみることに。

Googleドライブで文字起こしすることができました。

 

手順はこちら↓

①Googleドライブを開く

②Googleドライブに対象の画像をドラッグ&ドロップする

③ファイルを右クリック>アプリで開く>Googleドキュメントを選択

Googleドライブ操作画面

 

これで画像ファイルが文字で表示されるようになります。

画像の下にテキストが表示されます

 

今回ソースコードファイルで試してみたら、少し反映されていないところはあったもののほとんど文字になっていました!

このコードを貼り付ければOK!

テキストにはできたものの、『’』と『”』の違いなどで修正に時間を取られてしまいました。

みなさんはすぐに設定できるように、コードも貼り付けておきますね。

<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”;
}
}
?>

今回ご紹介した文字起こしは他の場面でも活用できそうなので、裏技として覚えておこうと思います^^

最後までご覧いただきありがとうございました💻

 

にほんブログ村 にほんブログ村へ
にほんブログ村

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

気にしいな新米主婦|食べることが大好き|都内で夫と2人暮らし|2022年秋に挙式
日常をちょっと楽にするためのアレコレを発信します:-)

目次