[WordPress] アイキャッチ画像にリンクを挿入した（ショートコード）

• サイトのヒートマップなどを分析すると、けっこうアイキャッチ画像がタップされているようです。
• そこで、アイキャッチ画像にリンクを付けられるショートコードを作ってみました。

eyecatch_link ショートコードを作った

記事中に以下のようなショートコードを入力します。

[eyecatch_link href="https://chiilabo.com/blog/"]

functions.phpにコードを追加する

このコードを解釈できるように、functions.phpにコードを追加します。

/** 
 * アイキャッチ画像にリンクを追加するショートコード
 * */
function eyecatch_link_func ( $atts ) {
	$url = $atts['href'];
	if (has_post_thumbnail() && $url) {
		
		return '
<script type="text/javascript">
var elem = document.querySelector(".eye-catch");
var htm = elem.innerHTML;
elem.innerHTML = "<a href=\"'. $url .'\">" + htm + "</a>";
window.addEventListener("load", function() {
baguetteBox.destroy();
baguetteBox.run("#container");

});
</script>
';
	} else {
		return '';
	}
	
}
add_shortcode('eyecatch_link', 'eyecatch_link_func');

これで、eye-catchクラスの画像にアンカーリンクを追加できます。

こちらもどうぞ。

[PHP] タグ一覧に件数を追加する（Cocoon）

ショートコードで表示している、ブログの記事のタグ一覧に、「件数」を追加しました。 「タグリンク」をタップしても表示される記事が少ないと、別のタグを探し直さないといけないからです。 「クリック率向上のために！WordPressで「タグ一覧」に...

chiilabo.com

[WordPress] 投稿月でグループ分けした月別PV集計表を見るためのプラグインを作った【ChatGPTと】

一ヶ月分のブログ公開がどれぐらいのページビューにつながっているのか、集計する自分用のWordPressプラグインを作成しました。 自分にとっては未経験の分野でしたが、対話型AI「ChatGPT」に相談してみると、使える叩き台を用意してくれま...

chiilabo.com

[Cocoon] 各見出し後に「目次に戻る」リンクを追加した（functions.php）

ブログの中でもっともよくクリックされるのは、「目次」だそうです。 各セクションに Cocoonの目次に対応した「戻る」ボタンを設置しました。 参考サイトを元に、自分のブログに合うように一部修正しました。 確かに、目次からサッと読みたいところ...

chiilabo.com

「Microsoft Clarity」を設定してサイトのヒートマップを確認した（Microsoft版の「Analytics」）

Microsoftにも Google Analytics のようなサービスがあります。それが「Microsoft Clarity」です。 設定すると、ヒートマップやレコーディングなど、閲覧者の細かな操作まで分析できました。 Microsof...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。