【スポンサーリンク】

[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で「タグ一覧」に...

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

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

「Microsoft Clarity」を設定してサイトのヒートマップを確認した(Microsoft版の「Analytics」)
Microsoftにも Google Analytics のようなサービスがあります。それが「Microsoft Clarity」です。 設定すると、ヒートマップやレコーディングなど、閲覧者の細かな操作まで分析できました。 Microsof...
QRコードを読み込むと、関連記事を確認できます。
[WordPress] アイキャッチ画像にリンクを挿入した(ショートコード)
【スポンサーリンク】
タイトルとURLをコピーしました