🐕

【備忘録】WordPressのブログカード（embed）をカスタマイズ

に公開
PHP
WordPress
tech

背景

仕事でWordPress利用した実装があって、そのときにブログカードのカスタマイズが必要だった。
今までもWordPressの実装してきたけど、ブログカードはあまりカスタマイズする機会なかったので、備忘録兼ねて書いておく！

そもそも埋め込みをカスタマイズするには…

wp-includes/theme-compact/embed-content.php をコピー。
コピーしたembed-content.phpをwp-content/themes/{適用させたいテーマ}内に入れ込みます。

対象ページによってスタイルを変える（クラスの付け替え）

embedってiframeで埋め込む形になるので、WordPressだとJSで親の何かを取ろうとすると、セキュリティ的にNGがかかっちゃうのでできない。

ChatGPTからアドバイスをもらいつつ、下記で対応。

<?php
$referrerURL = wp_get_referer();
if (empty($referrerURL)) {
  $referrerURL = $currentPageURL; // リファラーが取得できなければ、現在のページURLを取得
}

// カテゴリslugが含まれているかどうかチェック。含まれていれば追加クラスを変数に代入
$isSample = (strpos($referrerURL,'sample') !== false) ? ' c-embedCard--sample' : '';
?>

<div class="c-embedCard<?php echo $isSample; ?>">
  <!-- 埋め込み用の記述がわしゃわしゃ入る -->
</div>

WordPressのURL構造が /article/{カテゴリ名}/{スラグ名} みたいな構造の場合、

  • カテゴリ「sample」以外の記事に埋め込んだ場合： .c-embedCardというクラスのみ
  • カテゴリ「sample」の記事に埋め込んだ場合：.c-embedCard .c-embedCard--sampleという2つのクラスを利用

のような条件でクラスを付け替えることで、適用させるスタイルを変更することができる。

wp_get_referer()をembed内で呼び出すと、親ページのURLが取得できる。
取得したURLからカテゴリを特定できるので、strpos()を利用して、カテゴリ名が含まれているかどうかを判断。
含まれていれば、追加クラスを付与してあげる…と。

やってみて

最初、条件分岐利用したカスタマイズできないかと思ってたから、できてほっとしてるｗ
今回はリファラー利用した条件分岐にしたけど、もっとスマートな方法あるんじゃないかなーとは思う。。。

参考サイト様（感謝！）

https://tnyk.jp/frontend/wp-embed-content-customize/

GitHubで編集を提案

Discussion