function refcard_enqueue_fontawesome() {
	wp_enqueue_style( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css', array(), '6.7.2' );
}
add_action( 'enqueue_block_assets', 'refcard_enqueue_fontawesome' );

<?php
/**
 * Plugin Name: REFERENCE Card
 * Description: URL を書くだけで、外部サイトのリンクカードを表示する（スクリーンショット付きの大きいカード／REFERENCE の小さいカード）。ショートコード [reference_card] [reference] とブロック「REFERENCE（外部リンク）」。
 * Version:     2.0.0
 * Requires at least: 6.3
 * Requires PHP: 7.4
 *
 * 表示されるカード
 *   大きいカード [reference_card url="…"]
 *     ┌──────────────────────────────┐
 *     │ スクリーンショット                       │
 *     ┃ ↗ REFERENCE › ページのタイトル  [ファビコン] │
 *     ┃ https://example.com/page/       [  2行分  ] │
 *     └──────────────────────────────┘
 *   小さいカード [reference url="…"]
 *     ┃ ↗ REFERENCE
 *     ┃ [ファビコン] ページのタイトル
 *     ┃ [  2行分  ] EXAMPLE.COM
 *
 * デザイン：reference-card.css　ブロック（編集画面）：reference-block.js（3つとも同じフォルダに格納する）
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // 直接アクセスされたら何もしない
}

// REFERENCE の横のひと言（空なら表示しない。表示するときはここだけ変える：例 '"STRAIGHT FROM THE SOURCE"'）
define( 'REFCARD_TAGLINE', '' );

/**
 * リンク先のページのタイトルと、ページがあるかどうかを取得する
 *
 * ・表示のたびにリンク先のサイトから取得すると、ページの表示が遅くなり、リンク先のサイトにも負担がかかるため、
 *   transient に保存しておく（取得できた：7日／取得できなかった：1日で取得し直す）
 * ・wp_safe_remote_get を使う（localhost や社内ネットワークへのアクセスは WordPress 側で止まる）
 * ・読むのは先頭 200KB まで（タイトルは <head> にあるので足りる）
 * ・status：'ok'＝ページあり／'notfound'＝つながらない・404・410
 *   （403 などは、ボット対策で弾かれただけのことが多いので 'ok' として扱う）
 *
 * @param string $url リンク先の URL。
 * @return array { title: string, status: string }
 */
function refcard_get_page( $url ) {
	$cache_key = 'refcard2_' . md5( $url );
	$cached    = get_transient( $cache_key );
	if ( is_array( $cached ) && isset( $cached['status'] ) ) {
		return $cached;
	}

	$page     = array(
		'title'  => '',
		'status' => 'ok',
	);
	$response = wp_safe_remote_get(
		$url,
		array(
			'timeout'             => 5,
			'redirection'         => 3,
			'limit_response_size' => 200 * 1024,
			'user-agent'          => 'Mozilla/5.0 (compatible; WordPress; ' . home_url() . ')',
		)
	);

	if ( is_wp_error( $response ) ) {
		$page['status'] = 'notfound'; // ドメインが無い・サーバーが止まっている・時間切れ
	} else {
		$code = (int) wp_remote_retrieve_response_code( $response );
		if ( in_array( $code, array( 404, 410 ), true ) ) {
			$page['status'] = 'notfound';
		} elseif ( 200 === $code ) {
			$html = (string) wp_remote_retrieve_body( $response );

			// 文字コード：UTF-8 以外（Shift_JIS・EUC-JP など）のページは UTF-8 に直してから読む
			if ( preg_match( '/<meta[^>]+charset=["\']?([\w-]+)/i', $html, $cm ) && 'utf-8' !== strtolower( $cm[1] ) && function_exists( 'mb_convert_encoding' ) ) {
				$converted = @mb_convert_encoding( $html, 'UTF-8', $cm[1] ); // phpcs:ignore WordPress.PHP.NoSilencedErrors -- 知らない文字コード名のときは変換しない
				if ( false !== $converted ) {
					$html = $converted;
				}
			}

			// og:title（property と content の順番が逆のページもあるので両方見る）→ なければ <title>
			$title = '';
			if ( preg_match( '/<meta[^>]+property=["\']og:title["\'][^>]+content=["\']([^"\']*)["\']/i', $html, $m )
				|| preg_match( '/<meta[^>]+content=["\']([^"\']*)["\'][^>]+property=["\']og:title["\']/i', $html, $m ) ) {
				$title = $m[1];
			} elseif ( preg_match( '/<title[^>]*>(.*?)<\/title>/is', $html, $m ) ) {
				$title = $m[1];
			}

			// 文字参照（& など）を戻して、改行・余分な空白を1つに
			$page['title'] = trim( preg_replace( '/\s+/u', ' ', html_entity_decode( wp_strip_all_tags( $title ), ENT_QUOTES | ENT_HTML5, 'UTF-8' ) ) );
		}
	}

	set_transient( $cache_key, $page, '' !== $page['title'] ? WEEK_IN_SECONDS : DAY_IN_SECONDS );
	return $page;
}

/**
 * カードの HTML を作る（ショートコード・ブロック共通）
 *
 * @param array  $atts  url（必須）／title（タイトルを自分で決めたいとき）。
 * @param string $style 'card'＝大きいカード／'simple'＝小さいカード。
 * @return string HTML
 */
function refcard_build( $atts, $style ) {
	$atts = shortcode_atts(
		array(
			'url'   => '',
			'title' => '',
		),
		$atts
	);

	// URL は http:// か https:// で始まり、ドメインがあるものだけ（空・おかしな URL なら何も表示しない）
	$url = trim( $atts['url'] );
	if ( ! preg_match( '#^https?://#i', $url ) ) {
		return '';
	}
	$url  = esc_url_raw( $url, array( 'http', 'https' ) );
	$host = (string) wp_parse_url( $url, PHP_URL_HOST );
	if ( '' === $host ) {
		return '';
	}

	// タイトル：指定 → リンク先のページから取得したタイトル → ドメイン名 の順
	// （ページが無いときは、リンク先の 404 ページのタイトルを使わずドメイン名）
	$page  = refcard_get_page( $url );
	$title = sanitize_text_field( $atts['title'] );
	if ( '' === $title && 'ok' === $page['status'] ) {
		$title = $page['title'];
	}
	if ( '' === $title ) {
		$title = $host;
	}

	// ファビコン（Google の favicon API。64px で読み込んで小さく表示＝高解像度の画面でもぼやけない）
	// ・<img> ではなく <span> の背景画像にする（テーマの「記事内の画像」の指定で大きさ・位置が変わらないように）
	$favicon = add_query_arg(
		array(
			'domain' => rawurlencode( $host ),
			'sz'     => 64,
		),
		'https://www.google.com/s2/favicons'
	);
	$fav_html = '<span class="refcard__fav" style="background-image: url(\'' . esc_url( $favicon ) . '\');" aria-hidden="true"></span>';

	// 見出し：↗ REFERENCE（ひと言があれば横に）
	$head = '<i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i><span class="refcard__label">REFERENCE</span>';
	if ( '' !== REFCARD_TAGLINE ) {
		$head .= '<span class="refcard__tagline">' . esc_html( REFCARD_TAGLINE ) . '</span>';
	}

	// ---- 小さいカード ----
	if ( 'simple' === $style ) {
		return '<a class="refcard" href="' . esc_url( $url ) . '" target="_blank" rel="noopener noreferrer">'
			. '<span class="refcard__head">' . $head . '</span>'
			. '<span class="refcard__row">'
			. $fav_html
			. '<span class="refcard__text">'
			. '<span class="refcard__name">' . esc_html( $title ) . '</span>'
			. '<span class="refcard__host">' . esc_html( preg_replace( '/^www\./', '', $host ) ) . '</span>'
			. '</span>'
			. '</span>'
			. '</a>';
	}

	// ---- 大きいカード ----
	// スクリーンショット（WordPress.com の mShots）。初めての URL は、撮り終わるまで仮の画像が表示される
	// ・大きさは CSS の .refcard-l__img（横幅 650px まで・縦横比 650:300）
	// ・リンク先のページが無いときは読み込まない。mShots は撮れなくても仮の画像を返すだけで、失敗を見分けられないため
	if ( 'notfound' === $page['status'] ) {
		$shot = '<span class="refcard-l__none">404 Not Found</span>';
	} else {
		$shot_url = add_query_arg(
			array(
				'w' => 650,
				'h' => 300,
			),
			'https://s.wordpress.com/mshots/v1/' . rawurlencode( $url )
		);
		// <img> ではなく <span> の背景画像にする（テーマの「記事内の画像」の指定で大きさ・位置が変わらないように）
		$shot = '<span class="refcard-l__img" style="background-image: url(\'' . esc_url( $shot_url ) . '\');" aria-hidden="true"></span>';
	}

	return '<a class="refcard-l" href="' . esc_url( $url ) . '" target="_blank" rel="noopener noreferrer">'
		. '<span class="refcard-l__shot">' . $shot . '</span>'
		. '<span class="refcard-l__body">'
		. '<span class="refcard-l__text">'
		. '<span class="refcard__head">' . $head . '<span class="refcard-l__name"><i class="fa-solid fa-chevron-right" aria-hidden="true"></i>' . esc_html( $title ) . '</span></span>'
		. '<span class="refcard-l__url">' . esc_html( $url ) . '</span>'
		. '</span>'
		. $fav_html
		. '</span>'
		. '</a>';
}

/**
 * ショートコード [reference url="…"]（小さいカード）
 *
 * @param array $atts ショートコードの属性。
 * @return string
 */
function refcard_shortcode_simple( $atts ) {
	return refcard_build( $atts, 'simple' );
}
add_shortcode( 'reference', 'refcard_shortcode_simple' );

/**
 * ショートコード [reference_card url="…"]（大きいカード）
 *
 * @param array $atts ショートコードの属性。
 * @return string
 */
function refcard_shortcode_card( $atts ) {
	return refcard_build( $atts, 'card' );
}
add_shortcode( 'reference_card', 'refcard_shortcode_card' );

/**
 * デザイン（reference-card.css）を、公開ページと編集画面（ブロックのプレビュー）の両方で読み込む
 * ・enqueue_block_assets フックは、公開ページとブロックエディタの中の両方で動く
 */
function refcard_enqueue_style() {
	wp_enqueue_style(
		'refcard',
		plugins_url( 'reference-card.css', __FILE__ ),
		array(),
		filemtime( plugin_dir_path( __FILE__ ) . 'reference-card.css' ) // 更新したら自動でキャッシュ更新
	);
}
add_action( 'enqueue_block_assets', 'refcard_enqueue_style' );

/**
 * ブロック「REFERENCE（外部リンク）」を登録
 * ・表示はショートコードと同じ refcard_build()（保存するのは URL・タイトル・表示スタイルの設定だけ。表示は毎回 PHP で作る）
 * ・編集画面の入力欄：reference-block.js（ビルドなし）
 */
function refcard_register_block() {
	wp_register_script(
		'refcard-block',
		plugins_url( 'reference-block.js', __FILE__ ),
		array( 'wp-blocks', 'wp-element', 'wp-block-editor', 'wp-components', 'wp-server-side-render' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'reference-block.js' ),
		true
	);

	register_block_type(
		'refcard/reference',
		array(
			'api_version'     => 3,
			'editor_script'   => 'refcard-block',
			'attributes'      => array(
				'url'   => array(
					'type'    => 'string',
					'default' => '',
				),
				'title' => array(
					'type'    => 'string',
					'default' => '',
				),
				'style' => array(
					'type'    => 'string',
					'default' => 'simple', // 'simple'＝小さいカード／'card'＝大きいカード
				),
			),
			'render_callback' => function ( $attributes ) {
				$style = ( isset( $attributes['style'] ) && 'card' === $attributes['style'] ) ? 'card' : 'simple';
				return refcard_build( $attributes, $style );
			},
		)
	);
}
add_action( 'init', 'refcard_register_block' );

/* =====================================================================
   REFERENCE Card（reference-card.php の refcard_build()）
   ・小さいカード（.refcard）：左に縦線、1行目「↗ REFERENCE」、2・3行目に左のファビコンとタイトル・ドメイン
   ・大きいカード（.refcard-l）：外枠の中に、上にスクリーンショット、下に縦線と
     「↗ REFERENCE › タイトル」「URL」の2行、右端にファビコン
     下の縦線は外枠の左の線に重ねる → 小さいカードと縦線・文字の位置が揃う
   ・カード全体がリンク（別タブ）。マウスオンで文字が薄くなる
   ===================================================================== */

/* ---------------------------------------------------------------------
   共通：見出し ↗ REFERENCE
   --------------------------------------------------------------------- */
.refcard__head {
  display: block;
  font-size: 12px;
  line-height: 1.3;
}
.refcard__head i {
  color: #bcbcbc;                   /* アイコンの色 */
  margin-right: 0.4em;
}
.refcard__label,
.refcard__tagline {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.refcard__tagline {
  margin-left: 0.6em;
}

/* ファビコン（画像は reference-card.php で style に入れている） */
.refcard__fav {
  flex: 0 0 auto;
  display: block;
  width: 28px;                      /* 文字2行分 */
  height: 28px;
  background: no-repeat center / cover;
  border-radius: 4px;               /* 少しだけ角丸（アイコンっぽく） */
}

/* ---------------------------------------------------------------------
   小さいカード
   --------------------------------------------------------------------- */
a.refcard,
a.refcard:link,
a.refcard:visited {
  display: block;
  margin: 24px 0;
  padding: 2px 0 2px 14px;
  border: 0;                        /* テーマがリンクに設定している線（下線など）を消してから */
  border-left: 3px solid #bcbcbc;   /* 縦線 */
  color: #3c3c3b;                   /* 文字の色 */
  text-decoration: none;            /* テーマのリンクの下線を打ち消す */
  box-shadow: none;
}

/* 2・3行目：左にファビコン、右にタイトル・ドメイン */
.refcard__row {
  display: flex;
  align-items: center;
  gap: 8px;                         /* ファビコン 〜 文字 */
  margin-top: 3px;
}
/* ファビコンをグレーに（カラーのままにするときは、このまとまりをコメントアウト） */
.refcard .refcard__fav {
  filter: grayscale(1);
  opacity: .8;                      /* 濃さ（1 で元の濃さ） */
}
.refcard__text {
  display: block;
  min-width: 0;
}
.refcard__name {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;          /* 長い英語のタイトルでもはみ出さない */
}
.refcard__host {
  display: block;
  margin-top: 3px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   大きいカード
   --------------------------------------------------------------------- */
a.refcard-l,
a.refcard-l:link,
a.refcard-l:visited {
  display: block;
  margin: 24px 0;
  padding: 0 0 10px;                /* 文字 〜 外枠の下 */
  border: 1px solid #dddddd;        /* 外枠 */
  background-color: #ffffff;
  color: #3c3c3b;
  text-decoration: none;
  box-shadow: none;
}

/* スクリーンショット：外枠から 10px 内側 */
.refcard-l__shot {
  display: block;
  padding: 10px;
}
.refcard-l__img,
.refcard-l__none {
  display: block;
  width: 100%;
  max-width: 650px;                 /* 横幅（reference-card.php の w=650 とセット） */
  aspect-ratio: 650 / 300;          /* 縦横比（reference-card.php の w=650・h=300 とセット） */
}
.refcard-l__img {
  background: no-repeat left top / cover;   /* 画像は reference-card.php で style に入れている */
  transition: opacity .3s;
}

/* リンク先のページが無いとき：スクリーンショットと同じ大きさの白地、左上に「404 Not Found」 */
.refcard-l__none {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #bcbcbc;
}

/* 下の文字：縦線を外枠の左の線に重ねる（外枠の太さ 1px ぶん左へ） */
.refcard-l__body {
  display: flex;
  align-items: center;              /* ファビコンを2行の真ん中に */
  gap: 8px;                         /* 文字 〜 ファビコン */
  margin-left: -1px;
  padding: 2px 10px 2px 14px;       /* 右は外枠から 10px（スクリーンショットの右端と揃う） */
  border-left: 3px solid #bcbcbc;   /* 縦線：小さいカードと同じ */
}
.refcard-l__text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
.refcard-l__name {
  margin-left: 0.6em;
  overflow-wrap: anywhere;
}
.refcard-l__name i {
  margin-right: 0.3em;
}
.refcard-l__url {
  display: block;
  margin-top: 3px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;          /* 長い URL でもはみ出さない */
}

/* ---------------------------------------------------------------------
   マウスオン：文字を薄く・画像を薄く
   --------------------------------------------------------------------- */
a.refcard:hover .refcard__name,
a.refcard:hover .refcard__host,
a.refcard-l:hover .refcard-l__name,
a.refcard-l:hover .refcard-l__url {
  color: #bdc3c7;
}
a.refcard-l:hover .refcard-l__img,
a.refcard-l:hover .refcard__fav {
  opacity: .6;
}

/* =====================================================================
   ブロック「REFERENCE（外部リンク）」：記事の編集画面で URL を入力するだけで外部リンクのカードを作る
   - 表示（公開ページ・編集画面のプレビュー）は reference-card.php の refcard_build()（ショートコードと同じ）
   - ブロックの中：URL の入力欄 ＋ 入力欄の下にプレビュー
   - 右の設定パネル：表示スタイル（小さいカード／大きいカード）、タイトル（空なら相手のページから自動）
   - ショートコード [reference …] [reference_card …] からブロックに変換できる
     （段落に貼り付けたとき・クラシックブロックの「ブロックへ変換」のとき）
   - ビルド（npm）なしで動くように、WordPress に入っている部品を素の JavaScript で使う
   ===================================================================== */
( function ( wp ) {
	'use strict';

	var el                = wp.element.createElement;
	var Fragment          = wp.element.Fragment;
	var registerBlockType = wp.blocks.registerBlockType;
	var useBlockProps     = wp.blockEditor.useBlockProps;
	var InspectorControls = wp.blockEditor.InspectorControls;
	var PanelBody         = wp.components.PanelBody;
	var TextControl       = wp.components.TextControl;
	var RadioControl      = wp.components.RadioControl;
	var Disabled          = wp.components.Disabled;
	var ServerSideRender  = wp.serverSideRender;

	// ショートコードの url・title をブロックの設定に移す（表示スタイルはショートコード名で決める）
	function fromShortcode( tag, style ) {
		return {
			type: 'shortcode',
			tag: tag,
			attributes: {
				url:   { type: 'string', shortcode: function ( a ) { return a.named.url || ''; } },
				title: { type: 'string', shortcode: function ( a ) { return a.named.title || ''; } },
				style: { type: 'string', shortcode: function () { return style; } }
			}
		};
	}

	registerBlockType( 'refcard/reference', {
		apiVersion: 3,
		title: 'REFERENCE（外部リンク）',
		description: 'URL を入力するだけで、外部リンクのカードを作る（小さいカード／大きいカード）',
		category: 'widgets',
		icon: 'external',
		keywords: [ 'reference', '外部リンク', 'リンクカード', 'url' ],
		attributes: {
			url:   { type: 'string', default: '' },
			title: { type: 'string', default: '' },
			style: { type: 'string', default: 'simple' }
		},
		supports: { html: false },

		// ショートコード → ブロックに変換（ショートコードブロックの「変換」メニューには表示されない。WordPress の仕様）
		transforms: {
			from: [
				fromShortcode( 'reference', 'simple' ),
				fromShortcode( 'reference_card', 'card' )
			]
		},

		edit: function ( props ) {
			var a          = props.attributes;
			var blockProps = useBlockProps();

			return el( Fragment, null,
				el( InspectorControls, null,
					el( PanelBody, { title: 'REFERENCE の設定', initialOpen: true },
						el( RadioControl, {
							label: '表示スタイル',
							selected: a.style,
							options: [
								{ label: '小さいカード', value: 'simple' },
								{ label: '大きいカード（スクリーンショット付き）', value: 'card' }
							],
							onChange: function ( v ) { props.setAttributes( { style: v } ); }
						} ),
						el( TextControl, {
							label: 'タイトル（空なら相手のページから自動）',
							value: a.title,
							onChange: function ( v ) { props.setAttributes( { title: v } ); }
						} )
					)
				),
				el( 'div', blockProps,
					el( TextControl, {
						label: 'REFERENCE：リンク先の URL',
						type: 'url',
						placeholder: 'https://',
						value: a.url,
						onChange: function ( v ) { props.setAttributes( { url: v } ); }
					} ),
					a.url
						? el( Disabled, null, el( ServerSideRender, { block: 'refcard/reference', attributes: a } ) )
						: null
				)
			);
		},

		// 保存しない（表示は毎回 PHP で作る）
		save: function () { return null; }
	} );
} )( window.wp );

[reference_card url="https://example.com/"]
[reference url="https://example.com/"]

[reference url="https://example.com/" title="表示したいタイトル"]