内部リンクだけにリンクカードのデザインを適用する方法

公開日:2023(令和5)年10月6日/最終更新日:

WordPressのカスタマイズ方法についての画像

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



以前、WordPress標準のリンクカードデザインを編集する方法を紹介しました。

上記の方法だと、リンクカードが埋め込みとして挿入される性質上、外部のサイトに埋め込まれた場合にも、スタイルが適用されるので、場合によってはリンクを敬遠されることがあるかも知れないので、今回は少し発展させて、内部リンクだけにデザインを適用する方法をメモとして紹介します。

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)

内部リンクのカードのみにスタイルを適用する方法

内部リンクかどうかを判定するためには、現在表示しているページのドメインが何なのかを知る必要があります。これには以下のコードを使います。

$_SERVER['HTTP_HOST'];

まあテストするなら、以下のようにfunctions.phpなどに書いて、ソース表示すれば、先頭に結果が出るので確認できます。

echo $_SERVER['HTTP_HOST'];

これで返ってきたドメイン名を以下の関数に入れて判定させます。

function sample_embed_style(){
	$site = '返ってきたドメイン名';
	$host = $_SERVER['HTTP_HOST'];

if($site == $host){
	?>
<style>
ここにカードのスタイルを記述
</style>
<?php
}


}
add_action('embed_head','sample_embed_style');

コード内の以下の部分で、返ってきたドメインと設定したドメインが一致するかどうかを判別して、一致していれば「embed_head」にフックして「ここにカードのスタイルを記述」に書いたスタイルを適用させるわけです。

if($site == $host){

案外簡単に判別させられますね。こんなカスタマイズをしたい方には言うまでもありませんが、リンクカードのスタイルは通常のスタイルシートに書いても適用されず、「embed_head」にフックする必要がありますのでお間違いなく!


以上、このコード体系は、公式のフォーラムで似たような質問が上がっていて、どうやったら解決するかな?というのを試してみたメモです。

一応簡易的にテストしてみただけですので、確実にそうなる!というものではないかも知れませんが、気になる方は試してみてください。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressブロックテーマのカスタマイズ方法画像
ブロックテーマでサイトの背景画像を設定する5つの方法