--- title: "WordPressのコメント部分でよく使うカスタマイズ事例" canonical_url: "https://olein-design.com/blog/customize-wordpress-comment" language: "ja" date_published: "2019-01-08T11:13:57+09:00" date_modified: "2019-01-08T11:13:57+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "WordPress" post_tag: - "WordPress" --- # WordPressのコメント部分でよく使うカスタマイズ事例 今、着々と100%GPLで有償のWordPressテーマの制作を進めています。その中で、今まで普通に使っているカスタマイズ方法から使う頻度が高いものをピックアップして紹介してみようと思います。 そんなに難しいカスタマイズは掲載していないので、すぐに参考にして活用していただけるものも多いと思いますのでよかったら見てみてください。 ## comments.phpの主な役割 `coments.php`は主に以下の処理をまとめることが多いです。 - コメントヘッダー（コメント部分タイトルとか） - コメントナビゲーション（「次のコメント」「前のコメント」とか） - 全コメントの掲載 - コメントを受け付けていない時のメッセージ - コメント入力フォーム このような処理を記述（集約）することが多いです。これらの処理を行う中で、よく利用するカスタマイズ方法を紹介していこうと思います。 ## コメントがあるかどうかの条件分岐 そもそもコメントが存在しないのにコメントタイトルやコメントを表示させるマークアップを表示させる必要はありませんよね。ですので、まずはコメントが存在するかどうかの条件分岐で判断します。 ``` //処理 ``` これでコメントが存在するときだけ、`if文`の中の処理をさせることができますね。 ## コメントナビゲーションを設置する WordPressのデフォルトではチェックが外れていると思いますが、投稿記事一覧の表示数を任意で変更できるように、コメント欄に表示するコメント数も任意で変更することができます。 ![](https://olein-design.com/wp-content/uploads/2019/01/8ec330b3e997b549e1ba270c7c8eda6c.png) こちらをチェックして、条件にマッチした場合、コメントは複数ページに分割されて表示されるようになります。一般的なブログなどではそれほどコメント欄が活用されることは最近では（日本だけ？）少なくなってきていますが、海外などでは今でもコメント欄はしっかりと活用されている文化があります。 グローバルなテーマを作る際には、コメントナビゲーションに対応していく方がベターでしょう。 ``` ``` といっても、この記述を加えておくだけです。表示の確認などは、上記設定画面でナビゲーションが表示される値に試しにセットしてみて、ナビゲーションを確認しましょう。 ## 全コメントの掲載 コメントを掲載する際にはこちらの関数を使います。 ``` ``` こちらには色々と配列で設定することができます。 [埋め込みコンテンツ](https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_list_comments) ``` null, 'max_depth' => '', 'style' => 'ul', 'callback' => null, 'end-callback' => null, 'type' => 'all', 'reply_text' => 'Reply', 'page' => '', 'per_page' => '', 'avatar_size' => 32, 'reverse_top_level' => null, 'reverse_children' => '', 'format' => 'html5', // テーマが 'HTML5' をサポートしないなら 'xhtml' 'short_ping' => false, // バージョン3.6以降 'echo' => true // 真偽値、デフォルトが true ); ?> ``` | walker | カスタムWalkerクラスを設定 | | --- | --- | | max_depth | コメントの階層の深さ | | style | `div`、`ol`、`ul`。外部のタグは明示的に記載する | | callback | 各コメントの開始タグや内容を表示するカスタム関数を設定 | | end-callback | 各コメントの終了タグを出力するカスタム関数を設定 | | type | 表示するコメントの種類を設定 | | reply_text | 各コメントの返信用リンクの文字列 | | page | ページ分けした場合に表示対象とするページ | | per_page | １ページに表示するコメントの数 | | avatar_size | 表示するアバターの大きさをピクセルで指定
gravatarの場合は1〜512までサポート | | reverse_top_level | `true`にすると最新のコメントを先頭に設定できる | | reverse_chidren | `true`にすると一番新しい子コメントが付いたコメントを先頭に設定できる | | format | `html5`または`xhtml`を指定できる
`current_theme_support( 'html5' )`で設定している値がデフォルトになる | | short_ping | short pingを使うかどうか設定 | | echo | コメントのリストを表示するか、値として返すか設定 | 先ほど画像で紹介した、１ページに表示するコメント数なども、こちらで設定しておくことが可能です。 併せて、コメント表示部分をカスタマイズするためにコールバック関数を用いて設定する方法を記載します。 ### コールバック関数を使ってコメント表示部分をカスタマイズする 上記したように、配列を使ってコールバック関数名を設定します。ここでは`demo_comment_format`という関数名として説明します。 ``` 'demo_comment_format', ) ); ?> ``` そして、`functions.php`もしくはその他のインクルードしているファイルにコールバック関数を記述します。 ``` ``` #### コメント投稿者名 ``` ``` #### コメント投稿者が設定したURL ``` ``` URLの入力を必須にしない場合には、このように条件分岐しておいて、入力されなかった時には表示しない形の方がスマートですね。 #### コメント投稿日時 ``` ``` #### コメント編集ボタン ``` ``` #### コメント本文 ``` ``` #### コメントへの返信ボタン ``` ``` コメントへの返信用ボタンにデフォルトで付いているCSSクラス名を変更したいときは以下のようにフィルターフックをかけて置き換えます。 ``` add_filter('comment_reply_link', 'demo_replace_reply_link_class'); function demo_replace_reply_link_class( $class ){ $class = str_replace("class='comment-reply-link", "class='c-comment-item__reply", $class); /** * ここでは comment-reply-link を c-comment-item__reply に置き換えています。 */ return $class; } ``` また、返信ボタンの構造を変更したい場合には以下のようにフィルターフックをかけます。 ``` add_filter( 'edit_comment_link', 'demo_edit_comment_link' ); function demo_edit_comment_link( $link ) { $link = '' . __( 'Edit comment', 'demo' ) . ''; return $link; } ``` ## コメントを受け付けていない時のメッセージ コメントを終了した場合に表示するメッセージを設定できます。 ```

Comments are closed.

``` ## コメント入力フォーム コメントの入力フォームのカスタマイズはこちらの記事も参考になります。 [埋め込みコンテンツ](https://www.nxworld.net/wordpress/wp-default-comment-form-customize.html) コメント入力フォームをカスタマイズするにはフックをかけてデフォルトのフォームを上書きするような処理をさせます。 ### 名前やメールアドレスなどメッセージ以外の部分 名前やメールアドレス、URLなど本文（メッセージ）以外の部分は`comment_form_default_fields`にフィルターフックをかけてカスタマイズします。 デフォルトの記載はWordPress 5.0.2 の場合、`comment-template.php`の2207行目あたりに`$fields`という変数に配列形式で格納されています。 ``` $fields = array( 'author' => '

' . ' ' . '

', 'email' => '

' . '

', 'url' => '

' . '

', ); ``` 一つの例ですが、このようにフックをかけることができます。 ``` add_filter( 'comment_form_default_fields', 'demo_comment_form_fields' ); function demo_comment_form_fields( $fields ) { $commenter = wp_get_current_commenter(); $req = get_option( 'require_name_email' ); $aria_req = ( $req ? " aria-required='true'" : '' ); $fields = array( 'author' => '
' . ' ' . '' . '
', 'email' => '
' . ' ' . '' . '
', 'url' => '
' . '' . '' . '
', ); return $fields; } ``` このようにして、本文メッセージ以外の入力フォームのマークアップをカスタマイズすることができます。 ### 本文メッセージとその他の部分 タイトルなど細かい部分は`comment_form_defaults`にフックをかける形でカスタマイズします。どんなカスタマイズが可能かは、`comment-template.php`の2286行目あたりから読んでみるとわかりやすいです。 例えばこのような形でカスタマイズすることができます。 ``` add_filter( 'comment_form_defaults', 'demo_comment_form' ); function demo_comment_form( $args ) { $args[ 'title_reply' ] = __( 'Leave a reply', 'demo' ); $args[ 'title_reply_before' ] = '

'; $args[ 'title_reply_to' ] = __( 'Leave a reply to %s', 'demo' ); $args[ 'comment_notes_before' ] = '

' . __( 'Your email address will not be published.' ) . ''. ( $req ? $required_text : '' ) . '

'; $args[ 'comment_notes_after' ] = __( '', 'demo' ); $args[ 'label_submit' ] = __( 'send', 'demo' ); $args[ 'comment_field' ] = '
' . '' . '' . '
'; $args[ 'submit_field' ] = '
%1$s %2$s
'; $args[ 'submit_button' ] = ''; $args[ 'class_submit' ] = 'c-form-control_submit'; return $args; } ``` 例えば、`$args[ 'label_submit' ]`というところは、送信ボタンのラベルのテキストになります。`$args[ 'comment_field' ]`はコメント入力部分のカスタマイズを行なっていて、といった感じで上には全て掲載されていませんが、他にもカスタマイズできる部分はあります。詳しくは`wp-include/template-comment.php`を読んでみることをオススメします。 ## まとめ ざっと走り書きになりましたが、WordPressのコメント入力フォーム周りのカスタマイズをまとめてみました。検索したらいつでも探せるような情報ばかりではありますが、お役に立てば幸いです。