WordPressのコメント入力欄にメンションを自動入力させた

 WordPressのコメントに返信する際に、相手のアカウントを記載しなくても、返信としてFediverseに送信、通知されるので記載する必要はないかもしれないが、記載した方が良い場合もあるかもしれないので入力フォームに自動で入力されたら便利かもしれない。Geminiに尋ねたら、phpではなくJavaScriptで可能なことが分かった。WordPressのテーマCocoonの子テーマ用のjavascript.jsに記載すれば良さそうなので、Geminiにコードを教わった。
 Geminiによると、WordPressのテーマごとにコードが異なるようで、テーマを尋ねられてCocoonだと告げて、「返信」ボタン周辺のソースコードを示したり、こちらの希望を告げたりして、次のコードを教わった。

// コメント入力欄に自動でメンションを入れる。
(function($) {
	$(function() {
		$(document).on('click', '.comment-reply-link', function() {
			// 返信先コメントの要素を取得
			var $commentBody = $(this).closest('.comment-body');
			
			// 表示されている「名前」を取得
			var displayName = $commentBody.find('.fn').text().trim();
			
			// リンク(URL)からIDとドメインを取得
			var authorUrl = $commentBody.find('.fn a').attr('href');
			
			var $commentField = $('#comment'); // コメント入力欄
			var accountInfo = ""; // 初期値は空にしておく

			// 1. リンク(authorUrl)が存在する場合のみ中身を解析
			if (authorUrl) {
				try {
					var urlObj = new URL(authorUrl);
					var domain = urlObj.hostname;
					var path = urlObj.pathname;
					
					// パスに @ が含まれている場合のみアカウント情報を作成
					if (path.indexOf('@') !== -1) {
						var accountId = path.replace('/', '');
						accountInfo = accountId + '@' + domain + " "; 
					}
					// @ がない場合は accountInfo は "" (空) のまま次へ進む
				} catch (e) {
					// URLが不正な形式だった場合も、エラーで止めずに空のまま進む
					console.error("URL解析失敗:", e);
				}
			}

			// 2. 最終的な出力
			// accountInfo があれば「@ID@domain 名前さん、」、なければ「名前さん、」になる
			var replyPrefix = accountInfo + displayName + "さん、\n";
			
			$commentField.val(replyPrefix + $commentField.val()).focus();
		});
	});
})(jQuery);

 このコードで、「返信」ボタンを押すと、コメントの入力欄の一番上(既に入力された文章がある場合は、その上)にメンションと表示名が入力されるようになった。

 このコードは、一度入力されたコメント欄の文章は送信されるまでリセットされずに残る。それは、送信前に別のコメントの「返信」を押しても同じ。そんな仕様だから、同じページに複数のアカウントから返信があったら、それぞれのコメントの「返信」ボタンを押して、最後に返信したいコメントの「返信」ボタンを押せば、複数のアカウントのメンションを入力することができる。また、アカウントのURLが「ドメイン/@~」という形式でなかったり、そもそもコメント投稿者の名前にリンクが無かった場合は名前だけが入力される。
 自分のコメントに自分で返信する場合は「ishiiさん、」と自動で入力されて消す手間が生じるが、ずっとメンションの入力を面倒だと思っていたので、これで楽になった。直接の返信だったらメンションの記載は必要ないのだが…。

未分類
管理人のマストドンアカウントへのリンクなど

コメント

タイトルとURLをコピーしました