WordPressのコメント欄をカスタマイズする方法【THE THOR・それ以外のテーマにも】

おかぴーです。

 

記事のコメント欄にちょっとした文言を追加したい場合のカスタマイズ方法を今回はご紹介しようと思います。

例えば、僕のコメント欄の場合は↓2つのファイルを使って対応しています。

  1. THE THORのテーマ内のPHPファイル
  2. WordPressのテンプレートファイル

 

comment-template.php カスタマイズ

 

②のファイルは、どのWordPressテーマを使っていても共通のファイルになるので、カスタマイズの参考になると思いますよ。

 

みみこみみこ
他のテーマを使っていてもカスタマイズできるのはいいですね♪
おかぴーおかぴー
一言添えるだけで印象も変わりますよね♪
では、さっそく本題へ↓

 

カスタマイズする時は、バックアップをとってから行ってください。カスタマイズについては必ず自己責任でお願いいたします。

「wp-content > themes > the thor > comments.php」

↑にあるcomments.phpファイルを使います。

 

ただし、親テーマではなく、必ず子テーマに複製してから、

「wp-content > themes > the thor child > comments.php」

のファイルを編集しましょう。

 

<親テーマの場所(右上がTHE THOR)>

the thor comments.php カスタマイズ

 

<子テーマの場所(右上がTHE THOR CHILD)>

the thor comments.php カスタマイズ

 

FTPソフトを利用して子テーマに複製します。やり方を知りたい方はこちら↓
関連記事

おかぴー こんにちは、WEBデザイナーのおかぴーです! 絵を描く仕事をしたかった僕が、WEBデザイナーを選んだプロフィールはこちらへ。 稼げるブログを作りたい人はこちらへ。 WordPressで子テー[…]

 

 変更前コード
<?php $args = array(
'title_reply' => 'コメントを書く',
'label_submit' => __( 'コメントを送信' , 'default' ),
'title_reply_before' => '<h2 class="heading heading-secondary">',
'title_reply_after' => '</h2>',
);
comment_form( $args ); ?>
コード内の赤文字のところを、↓のようにしています。
 変更後コード
<?php $args = array(
'title_reply' => 'コメントもらえると嬉しいです(o^^o)',
'label_submit' => __( 'コメントを送信' , 'default' ),
'title_reply_before' => '<h2 class="heading heading-secondary">',
'title_reply_after' => '</h2>',
);
comment_form( $args ); ?>

 

WordPressのテンプレートファイル

今度は、WordPress共通で使われている↓のファイルを使います。
「wp-includes > comment-template.php」
子テーマとかはないので、同じ箇所に上書きをするので、こちらも必ずバックアップを取って上書きしましょう^^

 

最初は↓のようになっています(コードの一部を抜粋)。
 変更前コード
$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="' . esc_attr( $commenter['comment_author'] ) . '" size="30" maxlength="245"' . $html_req . ' /></p>',
'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" maxlength="100" aria-describedby="email-notes"' . $html_req . ' /></p>',
'url' => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label> ' .
'<input id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" maxlength="200" /></p>',
);
↑の赤文字のところを編集。

 

「ニックネームでもOKですよ〜」と<span></span>の間にテキスト入力し表示させています。
また、「<br>」を挟むことで、改行させています。
 カスタマイズ後のコード
'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*<br>ニックネームでもOKですよ〜</span>' : '' ) . '</label> ' .
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" maxlength="245"' . $html_req . ' /></p>',

 

おかぴーおかぴー
小さな「 . 」が一つでも抜けるとエラーになるので注意してください。

 

また、上記コード内のそれぞれの対応部分をまとめると、↓のようになっています。
  • 'author':「名前」欄
  • 'email':「メール」欄
  • 'url':「サイト」欄

 

例えば、↓のようなコメント欄を作る場合は、

comment-template.php カスタマイズ

 

 メール欄
'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" maxlength="100" aria-describedby="email-notes"' . $html_req . ' /></p>',
'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" maxlength="100" aria-describedby="email-notes"' . $html_req . ' /></p>',

 

 サイト欄を非表示に
'url' => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label> ' .
'<input id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" maxlength="200" /></p>',
'url' => '',

→url欄は、「 '' 」シングルクォーテーションを残して、中身を削除すると表示されなくなります。

 

 

いかがでしたでしょうか。

コメント欄の使い方次第では、あなたのファンが増えるきっかけを作ることができるので、

ぜひあなただけのコメント欄を作って、読者の方とのコミュニケーションを楽しんでみてくださいね(*^^*)

おまけ

「ある程度ブログのデザインも納得したものができてきたなぁ」

「次はこのブログを、稼げるブログにしたい!」

と思っている方へ。

 

ブログ収益化において、

デザイン効果と組み合わせることで反応率が高まる効果的な方法があるのですが、

僕が勤めている会社では、とても言えない(というか教えたくないw)内容を、

ここだけの話で公開しようと思います。

 

どんな話かと言うと、

「発信するテーマ(内容)に合わせた最適な収益化方法が分かる」というものです。

 

100人いれば、100個のブログがあり、コンセプトがあります。

それによって収益化の方法も様々です。

 

デザインは視覚的に注目を集める力がありますが、その先の収益化へ進むには間違いなく発信内容に合わせてブログを構築していく必要があります。

 

あなたは最適な収益化方法を選択できていますか?

きっと、今ブログで伸び悩んでいる人には新しい発見になるはず^^

 

興味がある方は「こちら」をご覧ください〜

ストレスフリーなブロガーライフを送ろうWPテーマ「THE THOR」でリニューアル!" width="1280" height="479" >

WPテーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG