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

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

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

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

2. 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で「タグ一覧」に「記事数」を追加する方法」のコードを元に、ショートコード用関数にするために echo の部分を return にして、文字列を返すようにします。// the_tags_with_count() の末尾echo $before . ...

chiilabo.com

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

一ヶ月分のブログ公開がどれぐらいのページビューにつながっているのか、集計する自分用のWordPressプラグインを作成しました。自分にとっては未経験の分野でしたが、対話型AI「ChatGPT」に相談してみると、使える叩き台を用意してくれました。WordPressプラグインづくりははじめてでしたが、かなりの時間短縮。無事に完成しました。アクセス集計プラグイン一ヶ月分のブログ公開が、どれぐらいの成果になっているのか知りたいことがあります。これまでは、Google Analytic...

chiilabo.com

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

ブログの中でもっともよくクリックされるのは、「目次」だそうです。各セクションに Cocoonの目次に対応した「戻る」ボタンを設置しました。参考サイトを元に、自分のブログに合うように一部修正しました。確かに、目次からサッと読みたいところを確認できるサイトは、とても便利ですよね。目次に戻るリンクを挿入するコードfunctions.phpに追加します。/** 自動で目次に戻るリンクを挿入 */add_filter('the_content', function($content) ...

chiilabo.com

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

Microsoftにも Google Analytics のようなサービスがあります。それが「Microsoft Clarity」です。設定すると、ヒートマップやレコーディングなど、閲覧者の細かな操作まで分析できました。Microsoft Clarityに出会う先日、Microsoft Bing Webmaster Toolsを設定しました。● 前回はこちら。そこで、「Microsoft Clarity」というツールの表示を見かけました。Microsoft Clarityは、...

chiilabo.com

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