【WordPress】コメントに記事IDを追加してTippy.jsで投稿内容を表示する

コメント本文に記事本文のツールチップ表示を追加

コメント欄がページの下部にある場合など、投稿内容がすぐ確認できるようにコメント本文にツールチップ表示を追加しました。
Tippy.jsはHTMLにも対応しているので、画像も表示することができてとても便利です。

コメント本文にpost_IDとToolTip用のタグを追加

comment_textフィルターフックでコメント元の投稿ID（post_ID）を追加します。

function custom_comment_text($comment_text, $comment = null) {
	// 管理画面ではそのまま
	if(is_admin())
	{
		return $comment_text;
	}
	if($comment == null)
	{
		return $comment_text;
	}
	
	// ToolTip表示用
	$comment_post_tip = '<span class="commment-tooltip" data-id="'.$comment->comment_post_ID.'">&gt;&gt;'.$comment->comment_post_ID.'</span>';
	$comment_text = $comment_post_tip .$comment_text;
	
	return $comment_text;
}
add_filter('comment_text', 'custom_comment_text', 10, 2);

Tippy.js で記事本文をツールチップで表示する

wp_footerアクションフックでツールチップ表示用のjavascriptを追加します。

function custom_footer_script() {
$footer_script = <<<EOM
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script>
	tippy('.commment-tooltip', {
		content: '<div></div>',
		allowHTML: true,
		offset: [100, 20],
		onShow: (instance) => {
			var id = instance.reference.getAttribute('data-id');
			var post = document.getElementById("post-" + id);
			instance.setContent(post.innerHTML);
		},
	});
	
    </script>
EOM;
	echo $footer_script;
}
add_action( 'wp_footer', 'custom_footer_script' );