expexp.jp

WordPress

WordPressでOGP用の画像を出力したい

WordPressテーマでアイキャッチ画像をSNSとの連携に必要なOGP(Open Graph Protocol)に出力する例を紹介します。

関数作成

まずはfunctions.phpに出力用の関数を記述します。

記事ページでアイキャッチ画像が設定されている場合、OGPへURLを出力するようにするため、条件分岐タグはis_single()関数とget_the_post_thumbnail_url()関数を使います。

※ get_the_post_thumbnail_url()はWordPress 4.4から追加された関数です。

なお、アイキャッチ画像の設定が無い場合用に、デフォルトで表示されるサイトの画像を用意しましょう。

functions.php

function get_article_img_url() {
  // 記事ページの場合
  if(is_single()) {

    // 記事のアイキャッチ画像URLを取得し、出力用の変数へ代入
    $article_img_url = get_the_post_thumbnail_url();
  }

  // アイキャッチ画像URLが取得できなかった場合
  if(empty($article_img_url)) {

    // テーマディレクトリからサイトの画像URLを出力
    $article_img_url = get_template_directory_uri().'/img/siteimg.png';
  }

  return $article_img_url;
}

テーマに出力

次にテーマ上の出力したい場所に作成した関数を記述します。今回はOGPに出力するので、head内のメタタグに関数を記述します。

head内OGP部分

<meta property="og:image" content="<?php echo get_article_img_url(); ?>">

これで記事のアイキャッチ画像を、OGP用の画像として出力することができ、記事にアイキャッチ画像が設定されていなければサイトの画像を代わりに出力します。