WordPressの内部ブログカードと外部ブログカードのデザインを統一する方法

自分のブログの中の内部リンクであれば、embed.phpをテーマファイルに置くことでデザインをコントロールすることができます。

しかし、他のWordPressサイトのブログカードのデザインはこの方法では統一できません。

以下の方法で実現しました。もっと良い方法があれば教えてください。

//内部ブログカード
//--------------------------------------------------------------------
/*【出力カスタマイズ】Embed 関連のタグを非表示 */
remove_action('wp_head','rest_output_link_wp_head'); // API リンクタグを非表示
remove_action('wp_head','wp_oembed_add_discovery_links'); // 埋め込み用のディスカバリリンクの非表示
remove_action('wp_head','wp_oembed_add_host_js'); // 埋め込み用の JavaScript の非表示


if ( !function_exists( 'show_Linkcard_in' ) ):
function show_Linkcard_in($the_content) {
if(is_single()) {


	$regex = "/^<blockquote class=[\"|']wp\-embedded\-content[\"|\'].*>.*<a href=\"(.*?)\".*>.*<\/a>.*<\/iframe>/im";

	$result = preg_match_all($regex, $the_content, $matches);


	//画像サイズの横幅を指定
	$img_width ="300";
	//画像サイズの高さを指定
	$img_height = "200";

	$i = 0;
	foreach ($matches[0] as $match ) {
		preg_match_all('/<a[^>]+href=([\'"])(?<href>.+?)\1[^>]*>/i', $match, $url01);

		if (!empty($url01)) {
		    # Found a link.
		    $url = $url01['href'][0];
		}

	
		//OGP情報を取得
		require_once 'lib/OpenGraph.php';
		$graph = OpenGraph::fetch($url);

		//OGPタグからタイトルを取得
		$Link_title = $graph->title;
		if(!empty($title)){
			$Link_title = $title;//title=""の入力がある場合はそちらを優先
		}
			
		//OGPタグからdescriptionを取得（抜粋文として利用）
		$Link_description = wp_trim_words($graph->description, 60, '…' );//文字数は任意で変更
		if(!empty($excerpt)){
			$Link_description = $excerpt;//値を取得できない時は手動でexcerpt=""を入力
		}
		
		//wordpress.comのAPIを利用してスクリーンショットを取得
		$screenShot = 'https://s.wordpress.com/mshots/v1/'. urlencode(esc_url(rtrim( $url, '/' ))) .'?w='. $img_width .'&h='.$img_height.'';
		//スクリーンショットを表示
		$xLink_img = '<img src="'. $screenShot .'" width="'. $img_width .'" />';
		
		//ファビコンを取得（GoogleのAPIでスクレイピング）
		$host = parse_url($url)['host'];
		$searchFavcon = 'https://www.google.com/s2/favicons?domain='.$host;
		if($searchFavcon){
			$favicon = '<img class="favicon" src="'.$searchFavcon.'">';
		}
			
		//外部リンク用ブログカードHTML出力
		${'sc_Linkcard'.$i} .='
		<div class="blogcard">
		 <div class="blogcard_thumbnail"><a href="'. $url .'" target="_blank" rel="noopener">'. $xLink_img .'</a></div>
		 <div class="blogcard_content">
		  <div class="blogcard_title"><a href="'. $url .'" target="_blank" rel="noopener">'. $Link_title .'</a></div>
		  <div class="blogcard_excerpt"><a href="'. $url .'" target="_blank" rel="noopener">'. $Link_description .'</a></div>
		  <div class="blogcard_link"><a href="'. $url .'" target="_blank" rel="noopener">'. $favicon .' '. $url .'</a></div>
		 </div>
		</div>';



		$the_content = preg_replace('{^'.preg_quote($match, '{}').'}im', ${'sc_Linkcard'.$i}, $the_content,1);
		
		$i++;
	}
	return $the_content;

} else {
	return $the_content;
}
}

endif;
add_filter('the_content', 'show_Linkcard_in');


//外部ブログカード
//--------------------------------------------------------------------
if ( !function_exists( 'show_Linkcard_out' ) ):
function show_Linkcard_out($the_content) {
if(is_single()) {

	$regex = "/^(<p>)?(<a[^>]+?>)?https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+(<\/a>)?(?!.*<br *\/?>).*?(<\/p>)?/im";

	$result = preg_match_all($regex, $the_content, $matches);


	//画像サイズの横幅を指定
	$img_width ="300";
	//画像サイズの高さを指定
	$img_height = "200";

	$i = 0;
	foreach ($matches[0] as $match ) {
		$url = strip_tags($match);

	
		//OGP情報を取得
		require_once 'lib/OpenGraph.php';
		$graph = OpenGraph::fetch($url);

		//OGPタグからタイトルを取得
		$Link_title = $graph->title;
		if(!empty($title)){
			$Link_title = $title;//title=""の入力がある場合はそちらを優先
		}
			
		//OGPタグからdescriptionを取得（抜粋文として利用）
		$Link_description = wp_trim_words($graph->description, 60, '…' );//文字数は任意で変更
		if(!empty($excerpt)){
			$Link_description = $excerpt;//値を取得できない時は手動でexcerpt=""を入力
		}
		
		//wordpress.comのAPIを利用してスクリーンショットを取得
		$screenShot = 'https://s.wordpress.com/mshots/v1/'. urlencode(esc_url(rtrim( $url, '/' ))) .'?w='. $img_width .'&h='.$img_height.'';
		//スクリーンショットを表示
		$xLink_img = '<img src="'. $screenShot .'" width="'. $img_width .'" />';
		
		//ファビコンを取得（GoogleのAPIでスクレイピング）
		$host = parse_url($url)['host'];
		$searchFavcon = 'https://www.google.com/s2/favicons?domain='.$host;
		if($searchFavcon){
			$favicon = '<img class="favicon" src="'.$searchFavcon.'">';
		}
			
		//外部リンク用ブログカードHTML出力
		${'sc_Linkcard'.$i} .='
		<div class="blogcard">
		 <div class="blogcard_thumbnail"><a href="'. $url .'" target="_blank" rel="noopener">'. $xLink_img .'</a></div>
		 <div class="blogcard_content">
		  <div class="blogcard_title"><a href="'. $url .'" target="_blank" rel="noopener">'. $Link_title .'</a></div>
		  <div class="blogcard_excerpt"><a href="'. $url .'" target="_blank" rel="noopener">'. $Link_description .'</a></div>
		  <div class="blogcard_link"><a href="'. $url .'" target="_blank" rel="noopener">'. $favicon .' '. $url .'</a></div>
		 </div>
		</div>';



		$the_content = preg_replace('{^'.preg_quote($match, '{}').'}im', ${'sc_Linkcard'.$i}, $the_content,1);
		
		$i++;
	}
	return $the_content;

} else {
	return $the_content;
}
}

endif;
add_filter('the_content', 'show_Linkcard_out');