ブログにカード型リンクを貼る方法を考えた

2022/04/272022/05/02

Wordpress

ブログ運用備忘録

見栄えの良さと回遊率を上げるため、リンクをカードタイプにして表示したいので調べてみたよ。

この記事は未解決です。今後少しずつ加筆していく予定です

すまぬ‥‥

1.OpenGraph.phpを使う

OpenGraph.phpはURLからタイトルとOGP画像、descriptionなどをを引っ張ってきてくれるヤツです。

【外部リンク対応】ブログカードをプラグインなしで設置する方法【長文】 | DISPLAY-ディスプレイ

自動で取得してくれるので便利なんですが、試しに使ってみたら

おっっっっっっつも‥‥

ってなりました。
解決方法も見つけたけど、サーバーを変えないと対処できないレベルで重かったので却下となりました。

よわよわサーバーでは使えない…

2.プラグインを使う

Pz-LinkCardという有名なプラグインがあります。

Pz-LinkCard – WordPress プラグイン | WordPress.org 日本語

評価も高いし良さそうですが、使用するプラグインは最小限に抑えたいので保留にしました。最終手段として使いたい。
このプラグインも「重い」というレビューがちらほらあるので私のサーバーでは厳しいかも…

3.自作のfunctionを作る

サーバー側でOGP取得するのが重いなら、ブックマークレットでOGP取得してそれをショートコードで入れたらいいのでは？

そう思って作ったのがコレ。

function link_card( $atts ) {
  extract(shortcode_atts(array(
    'url' => '',
    'title' => '',
    'image' => '',
), $atts));
$xLink_img = '<img src="'. $image .'" class="c-postThumb__img" loading="lazy" />';
if(strpos($url,'mogumogu-design.com') !== false){
  $target = '_self';
} else {
  $target = '_blank';
}
  $linkcard = '
  <ul class="p-postList -type-list mylink">
    <li class="p-postList__item">
      <a href="'. $url .'" target="_blank" class="p-postList__link">
        <div class="p-postList__thumb c-postThumb" data-has-thumb="1">
          <figure class="c-postThumb__figure">'. $xLink_img .'</figure>
        </div>
        <div class="p-postList__body">
          <div class="p-postList__title">'. $title .'</div>
        </div>
      </a>
    </li>
  </ul>
  ';
  return $linkcard;
}
add_shortcode('link', 'link_card');

javascript:(function(){const e=document.createElement('input');e.value=`【link url = "${location.href}" title="${document.title}" image="${document.querySelector('meta[property="og:image"]').content}"】`;document.querySelector('body').append(e);e.select();document.execCommand('copy');e.remove();})();
//※【】は[]に変更する

このブックマークレットを任意のサイトでクリックしたら、

[link url = "https://mogumogu-design.com/study-studio03/" title="【勉強メモ】コーダー目線のSTUDIO覚書3～グルーピングとシンボルについて～ - もぐもぐ食べるおいしいwebデザイン。 - もぐでざ" image="https://mogumogu-design.com/wp-content/uploads/eye_220418.jpg"]

こんな感じのショートコードがコピーされるから記事に貼る。

ううーん…外部リンクは良いけど、自サイトで使うのは違和感…タイトルとかOGPをわざわざブックマークレットで取得する必要あるかな…？

4.はてなブログカードを使う

👆こんな感じになる。
これもブックマークレットがあるので比較的簡単。OpenGraph使ってるけど自分のサーバーで処理してるわけじゃないから重すぎない。脳死で入れられるしメンテとかも考えなくていいから割とよさそう。ただスタイルとかはあまり変えられなさそう。
仕様がAPIの提供側に依存するっていうのがちょっと気になるかな？

テクテクテクテク

ここで一旦考え方を変えました。

内部リンクはカードにしたほうがいいけど、外部リンクは別にOGP画像表示しなくていいのでは…？
どうしてもOGP使いたいときは「自作のfunction」「はてなブログカード」にしようかな？

内部リンクのみに重点を置いて考えることに。
内部リンクだけで良いなら、OpenGraphを使わずにOGP画像は取得できるため、重くなることもないはず。

5.（内部リンク限定）WPの機能を使う

oEmbedでリンクを挿入した状態。 — oEmbedでリンクを挿入した状態（これは画像だよ）

👆こうなる。URL貼るだけで勝手に変換してくれるやつ。なんか見た目がアレだけど、embed.phpを使えば調整できそう。
→試してみた！

<?php
//埋め込み用のCSSを削除する
remove_action( 'embed_head', 'print_embed_styles' );
//「コピーして埋め込み」を削除する
remove_action( 'embed_footer', 'print_embed_sharing_dialog' );
if ( ! headers_sent() ) {
	header( 'X-WP-embed: true' );
}
// 埋め込み用のCSSを追加する
function my_embed_styles() {
	wp_enqueue_style( 'wp-oembed-embed', '【親テーマディレクトリ】/main.css' );
	wp_enqueue_style( 'wp-oembed-embed2', '【子テーマディレクトリ】/style.css' );
}
add_action( 'embed_head', 'my_embed_styles' );

?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
	<title><?php echo wp_get_document_title(); ?></title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<?php do_action( 'embed_head' ); ?>
</head>
<body <?php body_class(); ?>>

<?php
if ( have_posts() ) :
	while ( have_posts() ) : the_post();
?>
<ul class="p-postList -type-list mylink">
   <li class="p-postList__item">
    <a href="<?php the_permalink(); ?>" class="p-postList__link">
	<?php
	$thumbnail_id = 0;
	if ( has_post_thumbnail() ) {
		$thumbnail_id = get_post_thumbnail_id();
	}
	if ( 'attachment' === get_post_type() && wp_attachment_is_image() ) {
		$thumbnail_id = get_the_ID();
	}
	$image_size = 'medium';
	?>
        <div class="p-postList__thumb c-postThumb" data-has-thumb="1">
            <figure class="c-postThumb__figure">
            <?php echo wp_get_attachment_image( $thumbnail_id, $image_size ); ?>
            </figure>
        </div>
        <div class="p-postList__body">
            <div class="p-postList__title"><?php the_title(); ?></div>
        </div>
    </a>
</li>
</ul>
<?php
	endwhile;
endif;
do_action( 'embed_footer' );
?>