Page top

BLOG

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

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

2018/08/16 9:05

 はい、俺です。

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

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

 

 

WPコメント欄のカスタム

 

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

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

 

 

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

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

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

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

 

 

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

 

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

 

これがまた重い!

 

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

 

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

 

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

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

 

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

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

 

 

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

 

 

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の話も入れていこうかと思います。

 

 

ではまた近いうち!

 

アディオス!

 

 

63 Views

コメントはこちらから

※コメントは承認後に反映されます
■新規投稿のデスクトッププッシュ通知を受け取れます(個人情報入力不要&無料)
※アンドロイドスマホの方もプッシュ通知受け取れます ※解除する時は再度上記ボタンから解除を選択してください。

Menu

Search

About Me

管理人(記事書いてる人)

tossy696

・大阪在住
・WEBデザイナー
・ラーメン好き
・バス釣り
・元バンドマン

ラオウさん

・アメショー(♂)
・2004/3/31 - 2019/7/1

Ranking

2018/07/16

淡路島の野池入れ食いですよ奥さん!1日目

2018/05/27

京都宇治川、伏見港&塔の島へバス釣りの旅

2020/04/30

自粛どころか人増えてね…?

2020/05/24

アラフォーとしての過酷な現実、その生き方を語ってみる

2020/05/10

Stay Home!ってことでホットサンド作る

  • Category