Luxeritas 「コメント欄」を開閉式へ「コメント送信ボタン」を中央へ

2022年3月23日ルクセリタス

二日前にコメント欄を復活させました。デザインも落ち着いたのでメモしておきます。

Stinger8を使っていた時は設置していたのですが、ルクセリタスに変えてからはスピードが命なので取り外していました。しかし、結局スピードを求めるには「エックスサーバー」とか「mixhost」などを使用しないと意味ないなって思うようになり、コメント欄を復活させました。

ルクセリタスのコメント欄を開閉式にする方法を探したのですが、見つけることが出来ませんでした。それならと、Stinger8で使っていたものを使ってみたら動くではありませんか。灯台下暗しってやつです。

ルクセリタスがマテリアルアイコンを標準化されたので、マテリアルアイコン用に更新しました。

jQueryコードをcomments.phpへ

次のコードを comments.php に追記します。場所は、２２行目と2３行目の間です。

メッセージは自分好みに変えればいいです。

22行目:?>
23行目:<div id="comments" class="grid">
<div id="comments-toggle" class="grid">コメントを閉じる</div>
 <script>
	$(function() {
 		$("#comments-toggle").click(function() {
		if ($("#comments").css("display") == "none") {
			$("#comments").slideToggle();
			$("#comments-toggle").text("コメント欄を閉じる");
		} else {
			$("#comments").slideToggle("fast");
			$("#comments-toggle").html("コメント欄を開く（ <span class=\"material-icons-outlined\">post_add</span> <?php echo get_comments_number(); ?> ）");
		}
	});
	if (location.hash.indexOf("comment-") == -1) {
		$("#comments").hide();
		$("#comments-toggle").html("コメント欄を開く（ <span class=\"material-icons-outlined\">post_add</span> <?php echo get_comments_number(); ?> ）");
	}
	});
 </script>

開閉式ボタンコードをstyle.cssへ

このままでも動きますが、「コメント欄を開く」が文字列ですのでボタンに変更。style.css へ追記します。

/* コメントトグル表示ボタン */
#comments-toggle {
	display: block;
	padding: 5px;
	background: #33cc99;
	color: #121212;
	font-size: 1.6rem;
	text-align: center; 
	border-radius: 0 0 3px 3px;
}
#comments-toggle:hover {
	color: #ff0066;
	cursor: pointer;
}

このようになりました。ボタンというよりバーでした。

コメント送信ボタンの装飾と中央へ

デフォルトでは、グレーの背景色で左揃えですので装飾を施して中央に配置させます。自分としては、マウスの移動量が少ない右揃えがいいと思ったりしますが、ここは見た目重視で。これも style.css へ追記します。

/* コメント送信ボタン */
#comments [type="submit"] {
	padding-top: 12px;
	padding-bottom: 12px;
	background-color : #33cc99;
	border-radius: 5px;
	border: 0;
	color: #121212;
}
#comments [type="submit"]:hover {
	color: #ff0066;
	background-color: #33cc99;
}
#comments .form-submit {
	width: 150px;
	margin-top: 0;
	margin-left: auto;
	margin-bottom: 10px;
	margin-right: auto;
}

追記

comments.phpを見ていて気付いたんですが、画像認証が出来るんですね。気にしていないと気付かないものです。

画像認証については、「綾糸.net」サイトが参考になります。

「メールアドレス、ウェブサイトは任意です。」の独自文字列の入れ方は、「まるっと。」サイトが参考になります。

大変参考になりました。感謝です。

Luxeritas の設定である、
□ jQuery を非同期にする ( 高速化するが注意が必要 )
は、有効にしない。

その後、日本語のみ受付。 URL欄削除

「メールアドレス、ウェブサイトは任意です」の文字列は消しました。

そして、コメントのタイトル名の後に「(In Japanese please.)」の文字列を追記しました。

追記したのは、comment.php の303行目の
. __( 'Comment’, 'luxeritas’ ) . '</label>　の間に
'(In Japanese please.)’ . を挿入。

こんな風にです。
__( 'Comment’, 'luxeritas’ ) . '(In Japanese please.)’ . '</label>

functions.php へ追記。

/* コメント日本語のみ受付 */
add_action( 'pre_comment_on_post', 'mytheme_pre_comment' );

function mytheme_pre_comment( $comment_post_ID ) {
	if ( isset( $_POST['comment'] ) && !preg_match( "/[ぁ-ん]+|[ァ-ヴー]+|[一-龠]+|[ａ-ｚＡ-Ｚ０-９]/u", $_POST['comment'] ) )
		wp_die( __('<p><span style="font-weight:bold;">ERROR</span>: please type a comment in Japanese.</p><p><a href="javascript:history.back()">« 戻る</a></p>') );
}

functions.php へ追記。

// コメントフォームの URL の入力欄を消す
add_filter( 'comment_form_default_fields', function( $fields ) {
	unset( $fields['url'] );
	return $fields;
}, 8 );

ソフトウェアルクセリタス

Posted by すきっぷ