ワードプレスでは記事中の内部リンクはURLを貼り付ければ自動的にブログカードになるが使い勝手が悪いので自作してみる

デフォルトの内部リンクの埋込コードは使いにくい

通常記事中に内部リンクのURLを貼り付けると以下のようにブログカードと言われる画像付きのリンクが自動で作成される

正直使いにくい。

ちたまん

どのへんが気に食わないの?

ツン子

デフォルトの気に食わない点

  • コメント数の表示とか恥ずかしい
  • シェアボタンとか中身見てから押すだろ
  • スマホで余白多すぎ。無駄
  • imgタグの中身が長い

こんなところかな。まあ完全に主観なので人によってはメリットもあるかもしれないけど、僕としては気に食わない。

Amzonアフィリエイトリンクをショートコードで作成する

ASPのツールもアソシエイトツールバーも使わずにアマゾンのアフェリエイトリンクをそれなりのデザインで生成する方法

この間のアマゾンのリンクとほぼ一緒だしwww

ツン子

ふふふ。良く気づいたね!
しかしこれは手抜きではないのだよ

ちたまん

内部リンクとアフィリエイトリンクのデザインを寄せることには意味がある。

誤認させるのはよろしくないが、内部リンクを安全で役に立つものとして何度も押していると、似たデザインのアフィリエイトリンクも危険はなく役立つものだろうという心理が働くようになる。

つまりこちらの都合の良いように思考の誘導、教育を行っているわけだよ

ちたまん

あんたがいうと詐欺っぽいのはなぜだろう・・・

ツン子

と、いうことで手抜きではないことが証明されたので作っていこうw

今回もショートコードで作成する

ということで作っていくけど、今回もブロックではなくショートコードで作成しよう

面倒だからでしょ?w

ツン子

そうともいうね

ちたまん

記事IDを引数にする

どうやってリンク先の記事を特定するかだけど今回は記事IDを使用する。URLでは内部か外部の判別が必要だし、URLからタイトルやアイキャッチ画像を導きだすことが難しいから。

記事IDを調べるという一手間が必要になるけど、このサイトの場合記事ページのURLにIDが含まれるようにパーマリンクを設定しているので手間は増えない。

https://cheater-man.com/it/wordpress/358

functions.php

// 内部リンク
function siteInnerLink($atts){
	
	$title = get_the_title($atts['id']);
	$url = get_the_permalink($atts['id']);
	
	$img = get_the_post_thumbnail_url($atts['id'],'min');
	$expt = get_the_excerpt($atts['id']);
	
	$html  = '<a href="'.$url.'" class="inLink fPadding1x">'."\n";
	$html .= '	<div class="img">'."\n";
	$html .= '		<picture class="imgWrap" itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject">'."\n";
	$html .= '			<source class="lazy" media="(min-width: 1600px)" srcset="" data-src="'.get_the_post_thumbnail_url($atts['id'],'small').'">'."\n";
	$html .= '			<source class="lazy" media="(max-width: 1599px)" srcset="" data-src="'.get_the_post_thumbnail_url($atts['id'],'min').'">'."\n";
	$html .= '			<img src="'.get_the_post_thumbnail_url($atts['id'],'thumbnail').'" alt="'. $title .'" />'."\n";
	$html .= '		</picture>'."\n";
	$html .= '	</div>'."\n";
	$html .= '	<div class="text">'."\n";
	$html .= '		<h4>'. $title .'</h4>'."\n";
	$html .= '		<p>'. $expt .'</p>'."\n";
	$html .= '	</div>'."\n";
	$html .= '</a>'."\n";
	return $html;
}

add_shortcode('inLink','siteInnerLink');

こんな感じ。使用するときは・・・

[inLink id=記事ID]

このようにショートコードを書けばいい

記事idから情報を引き出す関数

  • 記事タイトル・・・get_the_title(記事ID)
  • 要約文・・・get_the_excerpt(記事ID)
  • アイキャッチ画像・・・get_the_post_thumbnail_url(記事ID,サイズ)

これらを使えばOK。

注意

今回の使い方だと「the」が付くタイプの関数を使う。基本的にtheが無いのはecho無しで単独出力できるタイプなので今回のように結合する場合は「the」が付いてるやつ。※画像はさらに最後にurlが付くやつ。

アイキャッチはPictureタグを使用

ウィンドウサイズによる画像サイズの分岐はPictureタグで行っている。このサイトではjavascriptによって遅延読み込みを行っておりimgタグの画像がまず読み込まれてその後ウィンドウサイズに応じてPictureタグの画像が読み込まれるようになっている。

MEMO

分岐ピクセルが1600ピクセルのみでスマホサイズで行っていないけど、スマホはブラウザサイズの3倍程度の解像度を持つ。例えばブラウザサイズで横360pxでも実際のデバイスの解像度は1080pxある。ブラウザサイズに合わせると画質のアラが目立ってしまう。なので画像に関して言うとPCとスマホでサイズを切り替える必要性は無い。しかし画質をある程度保ちつつ読み込み速度を上げたいので、ここでは低解像度PCとスマホまたは高解像度PCという区切りで1600pxにしている。

こんな感じ。CSSはまあいっか。

既存記事の内部リンクを置き換えないといけない・・・

ちたまん

当然そうなるよね・・・。早めに対処してよかったじゃん

ツン子