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

二日前にコメント欄を復活させました。デザインも落ち着いたのでメモしておきます。
Stinger8を使っていた時は設置していたのですが、ルクセリタスに変えてからはスピードが命なので取り外していました。しかし、結局スピードを求めるには「エックスサーバー」とか「mixhost」などを使用しないと意味ないなって思うようになり、コメント欄を復活させました。
ルクセリタスのコメント欄を開閉式にする方法を探したのですが、見つけることが出来ませんでした。それならと、Stinger8で使っていたものを使ってみたら動くではありませんか。灯台下暗しってやつです。
コメント欄を開閉式にするには jQuery を使います。詳しい説明は「Life Jam」サイトが参考になります。
jQueryコードをcomments.phpへ
次のコードを comments.php に追記します。場所は、ver3.7.4 – 3.9.0 なら22行目と23行目の間です。
メッセージは自分好みに変えればいいです。
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("コメント欄を開く(<i class=\"fas fa-comment-dots\"></i> <?php echo get_comments_number(); ?>)");
}
});
if (location.hash.indexOf("comment-") == -1) {
$("#comments").hide();
$("#comments-toggle").html("コメント欄を開く(<i class=\"fas fa-comment-dots\"></i> <?php echo get_comments_number(); ?>)");
}
});
</script>
開閉式ボタンコードをstyle.cssへ
このままでも動きますが、「コメント欄を開く」が文字列ですのでボタンに変更。style.css へ追記します。
/* コメントトグル表示ボタン */
#comments-toggle {
display:block;
padding:5px;
background-color:#009999;
color:#fff;
font-size:16px;
font-weight:bold;
text-align:center;
}
#comments-toggle:hover {
color:#ffccff;
cursor:pointer;
}
このようになりました。ボタンというよりバーでした。

コメント送信ボタンの装飾と中央へ
デフォルトでは、グレーの背景色で左揃えですので装飾を施して中央に配置させます。自分としては、マウスの移動量が少ない右揃えがいいと思ったりしますが、ここは見た目重視で。これも style.css へ追記します。
/* コメント送信ボタン */
#comments [type="submit"] {
padding-top:12px;
padding-bottom:12px;
background:#009999;
border-radius:5px;
}
#comments [type="submit"]:hover {
background:#ff66cc;
}
#comments .form-submit {
width:150px;
margin-top:0;
margin-left:auto;
margin-bottom:10px;
margin-right:auto;
}
追記
comments.phpを見ていて気付いたんですが、画像認証が出来るんですね。気にしていないと気付かないものです。
画像認証については、「綾糸.net」サイトが参考になります。
「メールアドレス、ウェブサイトは任意です。」の独自文字列の入れ方は、「まるっと。」サイトが参考になります。
大変参考になりました。感謝です。
Luxeritas の設定である、
□ jQuery を非同期にする ( 高速化するが注意が必要 )
は、有効にしない。
その後
メールアドレスとウェブサイトを必須にしたので、「メールアドレス、ウェブサイトは任意です。」の文字列は消しました。
そして、コメントのタイトル名の後に「日本語で頼みます。」の文字列を追記しました。
追記したのは、comment.php の311行目辺りの
. __( 'Comment’, 'luxeritas’ ) . '</label> の間に
'(<span style="font-weight:bold;">日本語で頼みます</span>)’ . を挿入。
こんな風にです。
. __( 'Comment’, 'luxeritas’ ) . '(<span style="font-weight:bold;">日本語で頼みます</span>)’ . '</label>