JetpackのOGPのimageがブランクのときはサイトのロゴにする

Image

先週はJetpackのOGPを使わずにheader.phpに独自にOGP設定をする方法でOGPを設定しました。私の運営する趣味サイトの うさぎクラフト ページは何もしないでいたのですが、やはりちょっと手を入れたくなりました。

今回はimageがブランクになってしまう、ということだけを避けられるように簡単な修正をしてブランクではなくロゴを表示するようにしてみました。

改定しました! 現在の使用に合わせたカスタマイズは→【改訂版】JetpackのOGPのimageがブランクのときはサイトのロゴに こちらをご覧くださいm(_ _)m

それまでの状況を確認してみる

Jetpackで設定されるOGPそのままの うさぎクラフト はこのような感じでした。

トップページ

Image

↑og:imageは、

となっているため、画像が表示されないのではなく ブランク画像 が表示されています。

投稿ページ(画像有り)
Image

↑アイキャッチ画像を指定してありますが、記事中に入っている画像が複数選択できるようになっていました。今回、こちらはこのままで。

投稿ページ(画像無し)

Image

↑og:imageはトップと同じくブランク画像でした

どこでブランク画像を指定しているのか?

plugins\jetpack の中を全文検索して場所は分かりました。

wp-content\plugins\jetpack\functions.opengraph.php

の function jetpack_og_get_image というところで、

このように指定しているからのようでした。このurlをサイトのロゴurlにしてしまえば簡単だと思うのですが、しかしアップデートがあるたびにこの部分を書き換えないといけません。忘れてしまいそうです。

ということでfunctions.phpで書き換えられないか、、、ググりました(^_^;

functions.phpでog:imageを置き換えるコード

こちらのサイトを見つけました。

WordPress : Jetpackが生成する og:image のデフォルト画像「blank.jpg」を変更したい

まさにやりたいことそのものでした。

ロゴの名前だけを置き換えて(http://usagicraft.com/wp-content/themes/chocolat-ryus/img/logo1.png)、あとはそのまま、子テーマのfunctions.phpに追加しました。

結果はどのようになったか?

トップページ
Image

投稿ページ(画像有り)
Image

投稿ページ(画像無し)
Image

と想定通り、今までブランク画像だったものがog:image用に作成してアップロードしておいた画像に置き換わりました(^^)/

ロゴ画像について

ということで、今回作ったog:image用の画像についてちょっとメモ的に書きます。

フォントは、フォントなさんの ロゴたいぷゴシック-コンデンスド を使いました。

フォントなさんにはとても良いフォントが揃っていて、私は可能な限りこちらの やさしさゴシック を色々なソフトで使っています(^^)/

上の うさぎ という文字は横幅を125%にするなどしてバランスをとってみました。

あと、考えたのはog:imageとして出るので正方形で、ぱっと見ただけでサイトの名前が分かるようにと考えました。

このblogのイメージもあまり考えずに指定してしまったので、今度正方形のロゴ画像を作って入れ替えたいと思いました。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。