【wordpress】コメント欄を作りたい！

2021.5.142021.5.17Writer: tamakiComment: 0

開発ブログ

こんにちはKOです！
今回はワードプレス開発に関しての記事を書いていきたいと思います。

本日はコメント欄について
コメント欄に利用されるテンプレートタグをまとめてみました。

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
); ?>

1	{{urvanov-syntax-highlighter-internal:0}}

タグ	設定
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	コメントのリストを表示するか、値として返すか設定

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

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

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

こちらを呼びだした際にデフォルトの表示で、
決まった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/