STINGER7:コメント欄をカスタマイズする方法【シンプル掲示板風】

      2016/10/03

eye_stinger7

読者様からリクエストがあったので、STINGER7のコメント欄をカスタマイズしたいと思います。
今回はシンプルで気軽に書き込める「掲示板風」にするカスタマイズです。
こんな感じになります↓

20160408c

WordPressはバージョン4.4からコメントの入力欄の仕様が少し変わっていて、名前やメールアドレスを入力するところと、本文を入力するところの位置が入れ替わっていますね。
それを元に戻す方法もご紹介します。

今回のカスタマイズはSTINGER7以外の方でも応用できますので、参考にしてみてください。
それじゃあいってみよ!

スポンサーリンク

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7:テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7:親テーマの任意のファイルを子テーマで編集する方法

コメントに関する設定を変更する

必須項目の解除

まずは管理画面のメニューから「設定 → ディスカッション」を開き、コメントに関する設定を変更します。
今回は「メールアドレス」や「ウェブサイト」の入力欄を非表示にするので、「コメントの投稿者の名前とメールアドレスの入力を必須にする」のチェックを外しましょう↓

20160408a

承認制の解除

次の設定はお好みですが、承認しなくてもコメントが反映されるようにします。
同じくディスカッションの「コメント表示条件」の項目の「コメントの手動承認を必須にする」と「すでに承認された〜」のところを両方ともチェックを外しておきます↓

20160408b

なぜ承認制にしないのか?

WordPressの仕様上、メールアドレスの入力がない場合は承認待ちのメッセージが出ません。
承認制にしている場合、普通はコメントをした人が送信ボタンを押すと「あなたのコメントは承認待ちです」と表示されコメントがちゃんと送信できていることが分かります。

しかしメールアドレスの入力がない場合は「〜承認待ちです」のメッセージが表示されなくなるため、送信ボタンを押しても何も変化がなく、管理者が承認するまでは確認することができません。

送信ボタンを押して何も反応がないと「失敗」したと思って何度も送信しちゃう人もいるかもしれないですよね。
ということでメールアドレスの入力欄を非表示にする場合は「承認制の解除」もオススメします。

でも誰でもコメントできるようになるので、炎上には注意しましょう(笑)
スパムコメントは「Akismet」のプラグインを入れておけば大体は防いでくれると思うのでそんなに心配しなくても大丈夫だと思います。

functions.phpをカスタマイズ

次に「function.php」に下記コードを追加します。
そのままコピペでオッケーです。

簡単に説明すると、デフォルトの設定から「アバター」や「返信」の項目をなくしたり、日付の表示方法を少し変えたりしています。

21行目「function move_comment_field( $fields ) {」以下のコードが、WordPress4.4から変更になったコメント欄の入力位置を元に戻すためのコードです。
上から「名前 → メールアドレス → ウェブサイト → 本文」という順番に戻ります。

バージョン4.3以前をお使いの方、または4.4で「本文入力 → 名前 → メールアドレス」のような順序のままで良いという方は、21行目以下は削除してください。

comments.phpをカスタマイズ

次は「comments.php」です。
STINGER7をお使いの方は親テーマの「comments.php」をコピーしてから子テーマ内にアップ、その後中身を全て削除して下記コードに書き換えてください。
STINGER7以外のテーマの場合は、お使いのテーマの「comments.php」で応用してください。

6行目
<h5 id="resp"><i class="fa fa-commenting"></i>&nbsp;comment</h5>」で赤字の所を変えるとコメントがあった時の見出しの文字を変えることができます↓

20160408d

日本語でもオッケーです。

 

14行目
'title_reply' => 'Message',」は赤字のところがコメント入力欄の見出しです↓

20160408e

こちらも日本語などお好きな文に変更できます。

15行目
'comment_notes_before' => '',」はデフォルトの「メールアドレスが公開されることはありません」という文字を非表示にしています。
やっぱりメールアドレスの入力は復活させたい、という人はこの行は削除してください。

19行目
'email'  => '',」でメールアドレスの項目を非表示にしています。
メールアドレスを復活させたい人は以下のように変更してください↓

必須項目にする場合は「設定 → ディスカッション」の設定も見直しましょう。

22行目
'label_submit' => __( 'コメントを送信' ),」は送信ボタンのコードです。
赤字の部分を変更するとボタンの文字を変えることができます。

style.cssを編集

最後にスタイルシートで見た目を整えましょう。
以下のコードを子テーマの「style.css」に追記してください。
STINGER7以外のテーマの場合はIDやclass名など違うかもしれないので適宜変更してください。

それぞれスタイルを指定している箇所をコメントで記載しているので、カラーや文字の大きさなどお好みで変えてみてください。
サイトに合わせて色を変えるだけでも雰囲気が変わりますよね〜(^^)

まとめ

ということでコメント欄のカスタマイズ、今回は「シンプル掲示板風」でした。
当ブログではメールアドレスはとりあえず復活させることにしました。

そのうちもう少し凝った感じのデザインにもしてみようと思います♪

返信機能も付けたい方は以下の記事を参考にしてください↓

STINGER7:コメント欄をカスタマイズする方法【その2】
以前コメント欄をシンプルな掲示板風にカスタマイズする方法をご紹介したのですが、そ ...

STINGER7のカスタマイズ記事をまとめました↓

STINGER7:カスタマイズまとめ
このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

スポンサーリンク

この記事をシェアする!

 - WordPress