[Ha-Basic] Review OGP tag output method

【ha-Basic】OGPタグの出力方法見直し

公開日:2019年5月16日 制作備忘録
Knowledge Base Wordpress ha-Basic テーマ
☆☆ この機能は【ha-Basic】テーマ バージョン1.1で実装(対応)済みです ☆☆
まだまだ続くよ微調整ということで今回はSNSへ埋め込み表示するためのOGPタグ出力に関するブラッシュアップです。

※もちろん今からダウンロードされる方は最新はこの変更までが包括されたものになります。

ベースにしたテーマに入っていたOGPタグの出力機能ではきちんと認識されなかったため、別の方法で出力することにしました。

これにより、初期設定の手順も少し増えましたので改編しました。

ダウンロード数は現状ゼロですが、もしかしたらカウントロスなどですでに使われている方もいるかもしれませんので、私的な備忘録も兼ねて変更したファイルと内容を記載しておきます。

OGPタグの出力変更に関する資料

変更・追加したファイル

  1. 「functions.php」(変更)
  2. 「ogp-tag.php」の内容を実行するための行を追加しました。追加したのは以下のコード

    // OGPタグの出力
    locate_template(‘ogp-tag.php’, true);
  3. 「header.php」(変更)
  4. 元コードのOGP出力部分を削除しました

  5. 「ogp-tag.php」(追加)
  6. 「functions.php」へ直書きすると非常に長くなり、初期設定も大変になるので別ファイルとしました

「ogp-tag.php」の内容

<?php
/**
* OGPタグ出力ファンクション
*
* OGPタグをheadタグ内に出力します。
*
* ■出力するタグ
* ・OGPタグ
* ・Twitterカード
* ・Facebook
*/
function my_meta_ogp()
{
if (is_front_page() || is_home() || is_singular()) {
/**
* 初期設定
* ・初期設定内の変数項目を修正してください。
*
* ############ 初期設定 ここから ######################
*/
// 画像 (アイキャッチ画像が無い時に使用する画像URL)
$ogp_image = get_template_directory_uri().'/images/webclipicon.png';
// Twitterのアカウント名 (@xxx)
$twitter_site = '';
// Twitterカードの種類(summary_large_image または summary を指定)
$twitter_card = 'summary_large_image';
// Facebook APP ID
$facebook_app_id = '';
/**
* ############ 初期設定 ここまで ######################
*/
global $post;
$ogp_title = '';
$ogp_description = '';
$ogp_url = '';
$html = '';
if (is_singular()) {
// 記事&固定ページ
setup_postdata($post);
$ogp_title = $post->post_title;
$ogp_description = mb_substr(get_the_excerpt(), 0, 100);
$ogp_url = get_permalink();
wp_reset_postdata();
} elseif (is_front_page() || is_home()) {
// トップページ
$ogp_title = get_bloginfo('name');
$ogp_description = get_bloginfo('description');
$ogp_url = home_url();
}
// 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(), 'medium');
$ogp_image = $ps_thumb[0];
}
// 出力するOGPタグをまとめる
$html = "\n";
$html .= '<meta property="og:title" content="' . esc_attr($ogp_title) . '" />' . "\n";
$html .= '<meta property="og:description" content="' . esc_attr($ogp_description) . '" />' . "\n";
$html .= '<meta property="og:type" content="' . $ogp_type . '" />' . "\n";
$html .= '<meta property="og:url" content="' . esc_url($ogp_url) . '" />' . "\n";
$html .= '<meta property="og:image" content="' . esc_url($ogp_image) . '" />' . "\n";
$html .= '<meta property="og:site_name" content="' . esc_attr(get_bloginfo('name')) . '" />' . "\n";
$html .= '<meta name="twitter:card" content="' . $twitter_card . '" />' . "\n";
$html .= '<meta name="twitter:site" content="' . $twitter_site . '" />' . "\n";
$html .= '<meta property="og:locale" content="ja_JP" />' . "\n";
if ($facebook_app_id != "") {
$html .= '<meta property="fb:app_id" content="' . $facebook_app_id . '">' . "\n";
}
echo $html;
}
}
// headタグ内にOGPを出力する
add_action('wp_head', 'my_meta_ogp');
?>

参考記事

です。

2019年5月21日追記

ソース内の画像サイズが「full」になっていたので「medium」へ変更しました。

「full」だとオリジナル画像なのでクオリティの高い画像を出力しておいて、あとは埋め込まれた先で調整してちょ!ということなんですけど、元サイズが大きすぎるので相手に大迷惑、逆に小さすぎると拡大されて粗くなる可能性があるので程よい「中」サイズに変更した次第です。

2019年6月10日追記

アイキャッチ画像のないページの画像出力用コードが誤っていましたので修正しました

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報