Help us understand the problem. What is going on with this article?

【WordPress】記事ごとに設定されたアイキャッチ画像をOGPとして設定する(Twitter&Facebook)

More than 1 year has passed since last update.

TL;DR

WordPressでプラグインを使わずに記事ごとに設定されたアイキャッチ画像をOGPとして設定します

ソース

まず以下の関数をfunctions.phpへ追加

functions.php
// URLからドメイン部分を削除したURLを返す
function delete_domain_from_url( $url ) {
    if ( preg_match( '/^http(s)?:\/\/[^\/\s]+(.*)$/', $url, $match ) ) {
        $url = $match[2];
    }
    return $url;
}

この関数が返すURLの例として正規表現チェッカーの結果を貼っておきます↓
https://qiita.com/sola-msr を引数としてセットした場合、$m[2]の値が取得できます)
FireShot Capture 338 - 正規表現チェッカー PHP_ preg_match() _ JavaScript_ match() - okumocchi.jp.png

各環境によってドメインが異なるのでWPの関数で取得したのち、アイキャッチ画像のURL(ドメインを削った相対パス)をくっつけるという感じです。

OGP設定

header.phpへ以下のメタタグを書きます

header.php
<?php if ( is_single() && has_post_thumbnail() ) : ?>
    <!-- 記事に設定されているアイキャッチ画像のOGP -->
    <meta property="og:image" content="<?php echo home_url() . delete_domain_from_url(wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' )[0]); ?>">
<?php else : ?>
    <!-- デフォルトOGP -->
    <meta property="og:image" content="<?php echo home_url() ?>/image/ogp.png">
<?php endif; ?>

Twitter用OGP

header.php
<?php if ( is_single() && has_post_thumbnail() ) : ?>
    <!-- 記事に設定されているアイキャッチ画像のOGP -->
    <meta name="twitter:image" content="<?php echo home_url() . delete_domain_from_url(wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' )[0]); ?>">
<?php else : ?>
    <meta name="twitter:image" content="<?php echo home_url() ?>/image/ogp.png">
<?php endif; ?>

確認方法

Facebook

デバッガー - 開発者向けFacebook
https://developers.facebook.com/tools/debug

「シェアデバッガー」を選択して確認したいURLを張り付けて「デバッグ」をするとシェアした際の状態を確認できる

Twitter

Card Validator | Twitter Developers
https://cards-dev.twitter.com/validator

「Card URL」に確認したいURLを張り付けて「preview card」を押すとシェアした際のTLに表示される状態を確認できる

おわり

  • プラグイン「All in One SEO」の設定とかでog:imageの設定をしてるとうまく反映されないので注意(マジで)

参考URL

sola-msr
ミセ*゚ー゚)リ そんな事言われてもウチ、ポン・デ・ライオンやし
andfactory
Smartphone Idea Companyとして、人々の生活に「&(アンド)」を届ける。
https://andfactory.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした