tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

【wordpress】コメント欄のカスタマイズ方法

おはようございます!

今日はコメント欄のカスタマイズ方法についてご紹介していこうと思います。

コメント欄のカスタマイズに関してもう少し踏み込んでみました。
okinawanpizza.hatenablog.com

comments.php でできること

・ページネーション「前のコメント」「次のコメント」実装
・コメント一覧を表示
・コメントを入力するためのフォーム作成

他にもいろいろありますが、メインはこの3つです。

手順

①コメントのループ処理

wordpressの記事のループを表示するようにコメントもhave_comments() で表示します。

<?php if ( have_comments() ) : ?>
//処理
<?php endif; ?>

②全コメントの掲載

任意に応じて以下の関数を使い分けます。

//全てのコメントを掲載するタグ
<?php wp_list_comments(); ?>

//コメントナビゲーション
<?php the_comments_navigation(); ?>

//コメントフォーム
<?php comment_form(); ?>

コメントタグの配列でいろいろ設定可能

<?php $args = array(
    'walker'            => 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 1ページに表示するコメントの数
avatar_size 表示するアバターの大きさをピクセルで指定
gravatarの場合は1〜512までサポート
reverse_top_level trueにすると最新のコメントを先頭に設定できる
reverse_chidren trueにすると一番新しい子コメントが付いたコメントを先頭に設定できる
format html5またはxhtmlを指定できる
current_theme_support( 'html5' )で設定している値がデフォルトになる
short_ping short pingを使うかどうか設定
echo コメントのリストを表示するか、値として返すか設定

③管理画面からコメント設定を変更する

コメントが表示できたらワードプレスの管理画面から
表示を変更していきます。

f:id:okinawanpizza:20210506063333p:plain

場所は
「設定」>「ディスカッション設定」から変更できます。
コメントの表示順序の設定などもこちらから変更していきます。

こちらを呼びだした際にデフォルトの表示で、
決まったHTMLが呼び出されます。
こちらの変更に関しては次回説明しようと思います。

おしまい!!

参考 コメントテンプレートタグwp_list_comments()
//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

コメントフォームが表示されない
https://webcreator.webmeo.org/blog/949/