A2-blog

【ワードプレス】OpenGraph.phpでブログカードを大量に表示させると読み込みが異常に遅くなる！

投稿日:2021/7/20 更新:2021/7/21 コメント 2件 ワードプレス OpenGraph.php, ショートコード, ブログカード, ワードプレス, 内部リンク, 遅延

ブログカードを生成するショートコードをSearch Regexで書き換えたらそのショートコードを利用している特定のページの読み込みがただ読み込みが遅いという現象ではなく、読み込みを示すクルクルも表示されずに20秒ほど何も表示されないということになり、しかもページタイトル、サムネイルなどの情報も表示されなかったりしたので色々調べてみたらどうも書き換えたショートコードの中身に問題があったようです。

本来、ブログカードは下図のように表示されます。

リロードすると表示されることもありますが問題が発生してからタイトル、サムネイル、内容等が何も表示されなかったりします。

 

 

原因はOpenGraph.phpの大量読み込み！？

書き換えたショートコードです。

[ nlink url= ]  元のショートコード

↓

[ ediusLink url= ]  書き換えたショートコード

※ショートコードはPreタグ内でも動作するのでカッコの前後にスペースを入れて動かないようにしています

書き換えたブログカードを生成するショートコードのPHPコードです。

function shortcode_edius_link($atts){
	extract(shortcode_atts(array(
		'url' => "",
	), $atts));
	require_once('OpenGraph.php');
	$graph = OpenGraph::fetch($url);
	$card_title = $graph->title;
	$site_name = $graph->site_name;
	$description = wp_trim_words($graph->description, 80, '...');
	$image = $graph->image;
	if (!empty($image)) {
		$card_img = '<img src="' . $image . '" width="200" height="113">';
	} else {
		$card_img = '<img src="' . get_template_directory_uri() . '/images/no_image.jpg' . '" width="200" height="113" alt="thumbnail">';
	}
	$linkcard = <<<EOS
		<div class="blog-card">
			<a href="{$url}">
				<div class="blog-card-thumbnail">{$card_img}</div>
				<div class="blog-card-content">
					<div class="blog-card-title">{$card_title}</div>
					<div class="blog-card-description">{$description}</div>
				</div>
				<div class="site-name">
					<span>edius...?</span><img alt="" title="サイトアイコン" alt="" title="" class="blog-card-icon" src="https://edit-anything.com/edius/wp-content/uploads/site_icon.jpg" width="32" hight="32">
				</div>
				<div class="clear"></div>
			</a>
		</div>
EOS;
	return $linkcard;
}
add_shortcode("ediusLink", "shortcode_edius_link");

コード自体はshortcodes.phpに記載してfunctions.phpでインクルードして読み込んでいます。

include('shortcodes.php');

「OpenGraph.php」で参照サイトに埋め込まれたOGP(Open Graph protocol)metaタグからタイトルやサムネイルなどの情報を取得してブログカードに表示するのに利用しているんですが、読み込みが異常に遅いページではブログカード(内部リンク)を11個も貼っていたので「OpenGraph.php」も同じ数だけ利用していたことになります。

どういった仕組みでデータを取得しているのか分かりませんが、ediusLinkのショートコードも数個の場合は読み込み遅延は起きないんですが大量にあると今回のようなことが起こるみたいです。

それで書き換える前に利用していたショートコードに戻したら読み込み遅延が起きなくなったのでやはりショートコードに問題があったのは間違いなようです。

// 内部リンクをショートコードでブログカード化
function get_the_custom_excerpt($content, $length) {
	$length = ($length ? $length : 70);// デフォルトの長さを指定する
	$content =  strip_shortcodes($content);// ショートコード削除
	$content =  strip_tags($content);// タグの除去
	$content =  str_replace(" ","",$content);// 特殊文字の削除（今回はスペースのみ）
	return $content;
}
// 内部リンクをはてなカード風にするショートコード
function nlink_scode($atts) {
	extract(shortcode_atts(array(
		'url'=>"",
		'title'=>"",
		'excerpt'=>""
	),$atts));
	$id = url_to_postid($url);// URLから投稿IDを取得
	$post = get_post($id);// IDから投稿情報の取得
	$date = mysql2date('Y-m-d', $post->post_date);// 投稿日の取得
	$sitename  = get_bloginfo( 'name' );
	$siteicon  = get_site_icon_url( 30,'',0 );
	$img_width ="1280";// 画像サイズの幅指定
	$img_height = "720";// 画像サイズの高さ指定
	$no_image = get_template_directory_uri().'/images/no_image.jpg';// アイキャッチ画像がない場合の画像を指定
	// タイトルを取得
	if(empty($title)){
		$title = esc_html(get_the_title($id));
	}
	// アイキャッチ画像を取得 
	if(has_post_thumbnail($id)) {
		$img = wp_get_attachment_image_src(get_post_thumbnail_id($id),array($img_width,$img_height));
		$img_tag = "<img src='" . $img[0] . "' alt='{$title}' width=" . $img[1] . " height=" . $img[2] . ">";
	} else { $img_tag ='<img src="'.$no_image.'" alt="" width="'.$img_width.'" height="'.$img_height.'">';
		   }
	$nlink .='
		<div class="blog-card">
			<a href="'. $url .'">
				<div class="blog-card-thumbnail">'. $img_tag .'</div>
				<div class="blog-card-content">
					<div class="blog-card-title">'. $title .' </div>
					<div class="blog-card-date">'.$date.'</div>
				</div>
				<div class="site-name">
					<span>'.$sitename.'</span><img  alt="サイトアイコン" title="サイトアイコン" class="blog-card-icon" src="'.$siteicon.'">
				</div>
				<div class="clear"></div>
			</a>
		</div>';
	return $nlink;
}  
add_shortcode("nlink", "nlink_scode");