OGPをWP-OGPのプラグインを改変して設定する!!2015年のOGP最新設定

LINEで送る
Pocket

今度こそ。。。OGPの設定で何時間、というより何日?何ヶ月?かかってるんや。。。という感じなのですが、もう最初の投稿から1年なので、時間をかけてでもこれでOGPの設定は終わりにします!!!

ということで、今度こそ最後。2015年ももう終わろうとしてますが、これが最新のOGP設定方法です。

WP-OGPのプラグインを改変して設定する

最初は、もうWP-OGPを使わずにOGPを直でheader.phpに書いて設定しようとしていました。が、WP-OGPが、ホーム、投稿、固定ページ、それぞれでdescriptionやURL等の変更を自動でやってくれる記述をheaderに直接書こうとすると、記述がすんごく長くなりすぎます。
ここでWP-OGPのありがたさを実感したというかなんというか。。

そんなわけで、WP-OGPをだいぶ把握できてきたので、ありがたくそのまま改変して使わせてもらうことにしました。

というわけで、

WP-OGPの改変その0

これは前回ブログで少し改変したので、その改変した状態から入ります。説明、詳細は前回ブログの改変項目を読んでくださいね。

まずは改変前に、html宣言部分に、

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

を記載します。で、wp-ogp.php の、38,39,40行目あたりにある fb:appidfb:app_id に変更して、

define('OGPT_DEFAULT_TYPE', 'website');
define('OGPT_SETTINGS_KEY_FB_app_id', 'wpogp-fb:app_id');//この行です!
define('OGPT_SETTINGS_KEY_FB_ADMINS', 'wpogp-fb:admins');

こうします。で、107行目あたりからの、wpogp_image_url()の関数を、

function wpogp_image_url() {
	global $post;

	//$image = get_the_post_thumbnail_src(get_the_post_thumbnail($post->ID)); // 元からあった記述。これを
	$image = get_the_post_thumbnail_src(get_the_post_thumbnail($post->ID,'full')); // アイキャッチ画像を使用する時はこれを使用
	//$image = get_the_post_thumbnail_src($post->post_content); // 本文内の画像を使用する時はこれを使用

	if ( empty($image) )
		{ return wpogp_image_url_default();}
	else
		{ return $image; }

}

上記のように編集します。ここからが新しい改変です。

WP-OGPの改変その1

102行目からのこの部分がデフォルトでWP-OGPのイメージ画像になってるので、この部分にサイトのアイコンなりイメージを入れる。

function wpogp_image_url_default() {
	// default image associated is in the plugin directory named "default.png"
	return wpogp_plugin_path() . '/ABC.png';//この部分にサイトのアイコンなりイメージを入れる。
}

ここでは “Webデザイン ABC” のロゴ(ABC.png)を指定したので、このロゴの画像を、
wp-content/plugins/wp−ogp
のフォルダ内にFTPソフトなどで入れます。

ogp01

これで、ホーム画面や、アイキャッチの指定等ない場合は、この画像が表示されるようになります。

もともとは “default.png” が記載され、フォルダには入っていたので、そのpngを書き換えれば、記述は変えなくてもOKですね。
とりあえずこれでOKですが、気になる部分を改変します。

※追記
アイコンの大きさは、200px×200px 以上でないとダメなようです。

スクリーンショット 2015-10-12 18.59.32ちなみに500px×500px でアップしたところ、でかく表示されすぎて横長になってたので、200px×200px 〜 250px×250pxくらいがいいようです。

WP-OGPの改変その2

イメージが2つ分読み込まれてたので、120行目くらいからの

function wpogp_set_data() {
	global $wp_query;
	load_wpogp_settings();
	$data = array();
	if (is_home()) :
		$data['og:title'] = get_bloginfo('name');
		$data['og:type'] = OGPT_DEFAULT_TYPE;
		$data['og:image'] = wpogp_image_url_default(); 
		$data['image_src'] = wpogp_image_url_default(); //この行を消す。img2つもいらない。
		$data['og:url'] = get_bloginfo('url');
		$data['og:site_name'] = get_bloginfo('name');
	elseif (is_single() || is_page()):
		$data['og:title'] = get_the_title();
		$data['og:type'] = 'article';
		$data['og:image'] = wpogp_image_url(); 
		$data['image_src'] = wpogp_image_url(); //この行を消す。img2つもいらない。
		$data['og:url'] = get_permalink();
		$data['og:site_name'] = get_bloginfo('name');
	else:
		$data['og:title'] = get_bloginfo('name');
		$data['og:type'] = 'article';
		$data['og:image'] = wpogp_image_url();  
		$data['image_src'] = wpogp_image_url(); //この行を消す。img2つもいらない。
		$data['og:url'] = get_bloginfo('url');
		$data['og:site_name'] = get_bloginfo('name');
	endif;
	
	global $ogpt_settings;
	
	foreach($ogpt_settings as $key => $value) {
		if ($value!='') {
			$data[$key] = $value;
		}
	}
	return $data;
}

この部分を消しちゃいます。問題ないでしょう。

あとは前の記事その前の記事にもあります、Facebookのディベロッパーツールの『デバッガー(Debugger) 』を使って(URL:https://developers.facebook.com/tools/debug/ 画像がでてるかをチェックします。
画像がきちんとしたものになっていればOK!!です。

バナー468-80_iPad-MacBook

まとめ

と、これで終わりたいとこなのですが、実はdescriptionが少々長くなっているので、それも気になるんですよね。

一応記載には
$post_desc_length = 75;
とありますが、日本語に対応していないようなので、descriptionが長〜〜〜くなってしまってます。ので、これも変更したいのですが、今のとこどうやればよいのかわかりません。。ですのでで、とりあえずわかったら再度改変しようと思います。

と、、、またいつになるかわかりませんので、もし『そんなことくらい簡単やん』とおわかりの方がおられましたら、ご教授よろしくお願いします。

そんなわけで、とりあえず2015/10現在では、この “wp-ogp.php” が最新の改変バージョンということで。



関連記事

OPG設定_3

WordPressのプラグインなしで、Jetpackと共存してFacebookやTwitter CardのOGPの設定をする!


先日、ようやく気になっていたOGPの設定を、WP-OGPのプラグインを変更して使えるようにしたのですが(詳細は こちら …

記事を読む▷


正しいショートハンドの書き方のまとめ


コピペ用、ショートハンドのまとめです。 まずはややこしい【background】プロパティから。 【backgr…

記事を読む▷


301_re-direct

301リダイレクトでサイトのリニューアル(ドメインを変更)する!:.htaccessの記述、設定方法、順序etc.


最近サーバーの見直し、ドメイン管理会社の見直し、サイト内の見直し等々しているのですが、以前から使用していたサーバー(エク…

記事を読む▷


wordmork.itの画像3

wordmark.it でフォントを選ぶ方法


フォント選びって結構大変ですよね。使用するフォントによって、そのサイトなりデザインの印象が変わってくるので、色選びもそう…

記事を読む▷


opacityの書き方 クロスブラウザ


今までも書いてましたが、ほんとIE嫌い。 そして、これからもまた同じ事書くでしょう。 さて。クロスブラウザでIE…

記事を読む▷


z-index が効かない時の対処方法


z-index が効かない時がちょくちょくあります。でも、仕事でそういう場合に遭遇すると、その場しのぎで対処法を見つけて…

記事を読む▷


2017最新版:SNS等の公式ロゴ(アイコン)素材のまとめ(Facebook, Instagram, Youtube, Twitter, Line etc.)


一度サイトを作ってしまうとなかなか更新せず使い回してしまうのが、この『SNSのロゴ(アイコン)』だと思うのですが、サイト…

記事を読む▷


お名前.comで “Whois情報公開代行” の設定にチェックを入れ忘れて登録した時の対処方法


先日、こちら で少し書いたのですが、お名前.comでドメインを取った時に、 "Whois情報公開代行" の設定にチェック…

記事を読む▷


サーバー移転の手順 その1:サーバーからサーバーへの移行(同サーバー(EXTREM)同士)


現在使用しているサーバーが、ここ数ヶ月、アクセスできない状態が頻発するようになりました。 その度にこちらからサーバーへ…

記事を読む▷


WordPressのメニューを、footer等用に作成して追加する方法


WorPressのデフォルトでは、gnavi(グローバルナビ)にメニューを追加し、表示させることはできますが、foote…

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

参考にさせていただいてるサイト

Error: Feed has an error or is not valid

PAGE TOP