wordpressコメント欄周りのカスタマイズ

前回のコメント欄周りのカスタマイズはまあまあ満足していたんだけど
記事にコメントがある状態でコメント欄が閉じられると、開閉用の部分が残ったままになり
ちょっと見た目が悪いなーとなり、再度弄ってみました
以前の記事と被る所もありますが、そこはご了承ください

Index

やりたい事
コメント欄の全幅を縮める
名前とメールアドレス部分の並列化
ウェブサイト欄の削除
コメント入力欄を下へ
各部のマージン、パディングの調整
スマホ、タブレット用の調整
その他
おわり

やりたい事

デフォルトの状態に戻しなるべくコンパクトにする
ただ開閉式には出来なそうなので、閉じられるまでは常に表示状態になる

コメント欄の全幅をデフォルトの幅から縮める
高さをコンパクトにする為に名前とメールアドレス部分を並列化
ウェブサイト欄は削除
コメント欄を一番下へ移動する
各部分のマージン、パディングの調整
名前、メールアドレス、認証欄の高さ調整など

以上の項目をやった後のコメント欄はこんな感じになります

完成形

コメント欄の全幅を縮める

デフォルトはメインカラム幅と同じ800pxなのを640pxへ変更しました

/* 幅の調整 */
#respond.comment-respond {
    width: 640px;
}

指定部分は他の所の方が良いかも知れないんだけど、上手い事行かなかったので
この部分を指定して変更しました

Sponsor Link

名前とメールアドレス部分の並列化

高さをコンパクトにするために、名前とメールアドレス部分を並列化しました

ソースコードを開く

/* name,emailの並列化 */
.comment-form-author {
    margin: 10px 0;
    float: left;
}
.comment-form-email {
    margin: 10px 0;
    float: right;
}
.comment-form-author, .comment-form-email {
    width: calc(50% - 25px);
    display: inline-block;
}
.comment-form-email+p {
    clear: both;
}

floatを使い左右に分けて並べ、.comment-form-email+pで回り込み解除です

ウェブサイト欄の削除

ここは特に必要性を感じないのと少しでもコンパクトにするために削除
この部分は名前、メールアドレス、クッキー部分も変更してあります

functions.phpへ追記して子テーマディレクトリへアップロード

ソースコードを開く

function my_comment_form_custom($arg) {
    $commenter = wp_get_current_commenter();
    $req = get_option('require_name_email');
    $aria_req = ($req ? " aria-required='true'" : '');
    
    $arg['author'] = '<p class="comment-form-author">' . '<label for="author">' . __( 'name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>';
    $arg['email'] = '<p class="comment-form-email"><label for="email">' . __( 'email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' . '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>';
    $arg['url'] = '';
    $arg['cookies'] = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $consent . ' />' .
                     '<label for="wp-comment-cookies-consent">' . __( ' 次回のコメントのために名前とメールアドレスを保存する' ) . '</label></p>';
    return $arg;
}
add_filter('comment_form_default_fields', 'my_comment_form_custom');

function～下の3行は要らない気もするんだけど、入れない状態で名前～クッキー部分を弄ると
必須マークが消えちゃったので一応入れてある感じです

この部分はcomment_template.phpに書いてある部分です

コメント入力欄を下へ

やっぱりずっと見慣れていた？並びが落ち着くのでコメント入力欄を下へ移動

functions.phpへ追記して子テーマディレクトリへアップロード

// コメント入力欄の表示順を変更する
function move_comment_field_to_bottom( $fields ) {
    $fields['comment'] = '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="30" rows="5" maxlength="65525" required="required" placeholder="コメントをどうぞ"></textarea></p>';
    $comment_field = $fields['comment'];
    unset( $fields['comment'] );
    $fields['comment'] = $comment_field;
    
    return $fields;
}
add_filter( 'comment_form_fields', 'move_comment_field_to_bottom' );

この部分は関連Cocoonに変更してからやったカスタマイズ | 楽しみのない猫でも書きましたが

WordPressでコメント欄の不要な項目を削除したりカスタマイズをする方法【初級編】 | oku-log

WordPressで投稿記事の最後に表示されるコメントフォームを含むコメント欄。デフォルトだと見た目も機能的な部分もイマイチなんですよね。きちんと使えるコメント...

こちらのサイトの物を使わせて貰っています
コメント部分のラベルを無くし代わりにフォーム内にplaceholder="コメントをどうぞ"でコメントを表示させました

各部のマージン、パディングの調整

入力欄のパディングや各部のマージンの数値がちょっと気になっていたのでその部分を調整
同じ部分で変更できたので、各部入力欄の幅や高さ調整

ソースコードを開く

/* 入力欄パディング */
.comment-notes {
    margin: 10px 0 0 0;
}
input#author, input#email {
    height: 30px;
    padding: 5px;
}
input#siteguard_captcha {
    width: 150px;
    height: 30px;
    padding: 5px;
}
textarea#comment {
    width: 640px;
    min-height: 160px;
    padding: 5px;
}

スマホ、タブレット用の調整

これまでの変更のままだとスマホ、タブレットでの表示(特にスマホ)でデザインが崩れるのでその調整
幅を100％にするだけですけどね

ソースコードを開く

@media screen and (max-width: 480px){
    ｜
/* 入力欄パディング */
    input#author, input#email,
    input#siteguard_captcha {
        height: 30px;
        padding: 5px;
    }
    textarea#comment {
        width: 100%;
        min-height: 200px;
        padding: 5px;
    }
    #respond.comment-respond {
    width: 100%;
    }
}

幅の指定をPC用と同じだと横にはみ出るので100％にしてあげます

その他

メールアドレスは～の部分はfunctions.phpへの追記でも消せるらしいんだけど
どうも上手く行かなかったので大元のcomment-template.phpを弄って消しました

- 'comment_notes_before' => '<p class="comment-notes"><span id="email-notes">' . __( 'Your email address will not be published.' ) . '</span>'. ( $req ? $required_text : '' ) . '</p>',
+ 'comment_notes_before' => '<p class="comment-notes"><span id="email-notes">' . __( '' ) . '</span>'. ( $req ? $required_text : '' ) . '</p>',

また試してみて消したい部分だけ消せたら追記しようかな

コメントフォームのH3非表示

/* H3の非表示 */
h3#reply-title.comment-reply-title {
    display: none;
}

おわり

出来れば開閉式にして普段は隠しておきたかったんだけど
冒頭にも書いたけど以前のやり方だとコメントが有る状態でコメ欄が閉じられると
そのまま残っちゃうし、色々やってみたんだけど上手く行かずこんな感じになりました

調べてもメール欄やウェブサイト欄の削除記事ばかりで
なかなか自分がやりたい事が見つけられず、良いなーと思ったフォームを
デベロッパーツールを使って覗いたりしながらやったので
参考になる部分があるかは分かりませんが、もし参考になったら嬉しいです

[share]