OGPをWP-OGPのプラグインを改変して設定する!!2015年のOGP最新設定
- 2015/10/12
- HowTo, Webデザインテクニック
- OGP
今度こそ。。。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="https://www.facebook.com/2008/fbml">
を記載します。で、wp-ogp.php の、38,39,40行目あたりにある fb:appid を fb: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ソフトなどで入れます。
これで、ホーム画面や、アイキャッチの指定等ない場合は、この画像が表示されるようになります。
もともとは “default.png” が記載され、フォルダには入っていたので、そのpngを書き換えれば、記述は変えなくてもOKですね。
とりあえずこれでOKですが、気になる部分を改変します。
※追記
アイコンの大きさは、200px×200px 以上でないとダメなようです。
ちなみに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!!です。
まとめ
と、これで終わりたいとこなのですが、実はdescriptionが少々長くなっているので、それも気になるんですよね。
一応記載には
$post_desc_length = 75;
とありますが、日本語に対応していないようなので、descriptionが長〜〜〜くなってしまってます。ので、これも変更したいのですが、今のとこどうやればよいのかわかりません。。ですのでで、とりあえずわかったら再度改変しようと思います。
と、、、またいつになるかわかりませんので、もし『そんなことくらい簡単やん』とおわかりの方がおられましたら、ご教授よろしくお願いします。
そんなわけで、とりあえず2015/10現在では、この “wp-ogp.php” が最新の改変バージョンということで。
Google AdS
関連記事
onMouseOver、onMouseOutで、簡単に画像を切り替える
今までマウスオーバー等で画像を切り替える時は、jQueryを使ったり、cssで画像を重ねてopacityで画像を透過させ…
日付を自動更新で表示させる! 簡単コピペ!!
先週『日付を毎月変えるの邪魔くさいし、サイトに書いてる日付とってくれへんやろか?』という依頼がありました。 とって…
wordmark.it でフォントを選ぶ方法
フォント選びって結構大変ですよね。使用するフォントによって、そのサイトなりデザインの印象が変わってくるので、色選びもそう…
簡単に画像を「右クリック&ドラッグ&直接リンク」させない方法・対策
WordPress(ワードプレス)で作成している管理サイトで、/wp-content/uploads/ 以下の階層に保存…
WP Social Bookmarking Lightを好きな場所に設置、移動する方法
WP Social Bookmarking Lightを好きな場所に設置、移動する方法です。 以前、自分で管理している…