WordPressのプラグイン「JETPACK」を使わずにコメント欄をシンプルにカスタムしてみた

 はい、俺です。

相変わらず頭の中はBass、でも手で書いてるのはSass。

これバサー＆WEBデザイナージョークね。

WPコメント欄のカスタム

そうそう、こないだブログのコメント欄をいじってみたんですよ。

今後作るサイトでコメント欄をカスタムした形のものを採用したいなと思いまして。

何かWPのコメント欄って、デフォでゴチャゴチャしてて

ユーザーがコメントしにくい仕様になってますよね。

メアド欄とかURL入力欄とかって敷居が高いというか。

いくら公開されないとはいえ、メールアドレス入力するのも何か抵抗ありますからね。

で、もっとシンプルに誰もが気軽に足跡残せるような感じにカスタマイズしてみたくて。

ほんで調べてみたらWPの公式プラグインっぽい「JETPACK」ってのがよさげやったんですが…

これがまた重い！

導入してみた瞬間、ページ開くのが10倍くらい遅くなった…

という訳で即行で「JETPACK」アンスコしまして…

ただただシンプルなコメント欄を目指してコードをいじってみる事に。

いろいろと紹介されてる記事を参考にしながら現在のコメント欄の仕様に変更してみました。

いじった箇所は「functions.php」のファイルと「comments.php」のファイル。

※テンプレじゃなくて自作のテーマの方はcomments.phpのファイルも自作しないといけないと思います。

functions.phpはミスるとすぐサイト真っ白になるので注意しましょうｗ

functions.php

//コメント文言を変更
function custom_comment_form($args) {
  $args['comment_notes_before'] = '';
  $args['comment_notes_after'] = '';
  $args['label_submit'] = 'SUBMIT';
  return $args;
}
add_filter('comment_form_defaults', 'custom_comment_form');

上記は送信ボタンを「SUBMIT」に変更した例です。

functions.php

//コメントからEmailとウェブサイトを削除
function my_comment_form_remove($arg) {
$arg['email'] = '';
$arg['url'] = '';
return $arg;
 }
 add_filter('comment_form_default_fields', 'my_comment_form_remove');

で、上記がコメント一式の中からメアドとURLの入力欄を削除した例です。

comments.php内の例

<?php if (is_singular()) wp_enqueue_script("comment-reply"); ?>
<div id="comment_area">
  <?php if(have_comments()): ?>
    <ol class="comments-list">
      <?php wp_list_comments('avatar_size=48'); ?>
    </ol>
  <?php endif; ?>

  <?php
  $comments_args = array(
    'fields' => array(
        'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' . '<input id="author" name="author" type="text" value="名無し" size="30" maxlength="245"' . $aria_req . $html_req . ' /></p>',
        'email'  => '',
        'url'    => '',
    ),
    'comment_field'        => '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></p>',
    'comment_notes_before' => '',
    'comment_notes_after'  => '',
    'title_reply'          => 'お気軽にコメントどうぞ！<br>Feel free to leave me a comment!',
  );
  comment_form($comments_args);?>

</div>

で、これが実際のコメント欄一式のコードですね。

名前入力欄はデフォで「名無し」さんにして、見出しの文言なんかもこの中でいじってる感じです。

後はスタイルとかは自分の好きに当てていけばよいかと。

はい、今回はWordpressのコメント欄カスタムのお話でした。

たまにはこんな感じでWEBの話も入れていこうかと思います。

ではまた近いうち！

アディオス！