- サイトのヒートマップなどを分析すると、けっこうアイキャッチ画像がタップされているようです。
- そこで、アイキャッチ画像にリンクを付けられるショートコードを作ってみました。
◆ タップできる目次 ◆
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] アイキャッチ画像にリンクを挿入した(ショートコード)](https://chart.googleapis.com/chart?cht=qr&chs=200x200&chco=000000&chl=https://chiilabo.com/2023-08/wordpress-eyecatch-link-shortcode-functions-php/)