Luxeritas（ルクセリタス） 「コメント欄」を開閉式へ「コメント送信ボタン」を中央へ
二日前にコメント欄を復活させました。デザインも落ち着いたのでメモしておきます。
Stinger8を使っていた時は設置していたのですが、ルクセリタスに変えてからはスピードが命なので取り外していました。しかし、結局スピードを求めるには「エックスサーバー」とか「mixhost」などを使用しないと意味ないなって思うようになり、コメント欄を復活させました。
ルクセリタスのコメント欄を開閉式にする方法を探したのですが、見つけることが出来ませんでした。それならと、Stinger8で使っていたものを使ってみたら動くではありませんか。灯台下暗しってやつです。
ルクセリタスがマテリアルアイコンを標準化されたので、マテリアルアイコン用に更新しました。
https://www.star.ne.jp/post-4535/?ref=NA62x59mjQueryコードをcomments.phpへ
https://life-jam.com/stingerplus-comment-openable-switch/次のコードを 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」サイトが参考になります。
https://ayaito.net/luxelitas/l_manual/6648/「メールアドレス、ウェブサイトは任意です。」の独自文字列の入れ方は、「まるっと。」サイトが参考になります。
https://martto.net/luxeritas-theme/customize/7421/大変参考になりました。感謝です。
Luxeritas の設定である、
□ jQuery を非同期にする ( 高速化するが注意が必要 )
は、有効にしない。
その後、日本語のみ受付。 URL欄削除
「メールアドレス、ウェブサイトは任意です」の文字列は消しました。
そして、コメントのタイトル名の後に「(In Japanese please.)」の文字列を追記しました。
追記したのは、comment.php の303行目の
. __( 'Comment’, 'luxeritas’ ) . '</label> の間に
'(In Japanese please.)’ . を挿入。
こんな風にです。
__( 'Comment’, 'luxeritas’ ) . '(In Japanese please.)’ . '</label>
https://elearn.jp/wpman/column/c20120131_01.htmlfunctions.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>') );
}
https://thk.kanzae.net/net/wordpress/t9269/functions.php へ追記。
// コメントフォームの URL の入力欄を消す
add_filter( 'comment_form_default_fields', function( $fields ) {
unset( $fields['url'] );
return $fields;
}, 8 );ディスカッション
コメント一覧
まだ、コメントがありません
コメントをどうぞ