残像ブログ

残像だった

WordPressのdefaultテーマを改造してコメント欄を作る:前編(準備と入力欄)

サイトのコメント欄を改修したので忘れないうちにメモする。長くなったので前後編。
コメント周りはなんかよくわからないので不安な感じである。

今回は上図(わかりにくい)のような返信をつけられるタイプのコメント欄を作成する。
主な目的は下記2点

  • defaultテーマ(バージョン1.6)のcomments.phpを改造して自分用コメント欄を作る
  • コメント欄に返信機能を追加する(返信は入れ子で表示)
この記事でやる事
  1. ダッシュボードでの設定
  2. テンプレートの編集(header.phpとsingle.php
  3. comments.phpを改造
後編でやること(コメント一覧のカスタマイズ)
  1. functions.phpにカスタムコメント一覧を書く

ダッシュボードでの設定

ダッシュボードで[設定]→[ディスカッション]からコメント関係の設定ができる。
「他のコメント設定」の「コメントをn 階層までのスレッド (入れ子) 形式にする」にチェックをいれる。
今回は入れ子の階層は3階層に設定した。

テンプレートの編集

返信用jsの読み込みコードを追加

返信機能を実装するには専用のjavascriptを読み込む必要があるので、下記コードをheader.phpのwp_head();より上に追加
(22/08/31追記:コードを読み込まなくても返信自体はできるみたい。読み込まなかった場合、返信する時のコメント入力欄の自動移動が行われなくなるっぽい)

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> 

is_singular()は固定ページ、個別記事ページ、添付ファイルページのいずれかを判定する条件分岐タグ(条件分岐タグ - WordPress Codex 日本語版

コメント欄の読み込みコードを追加

single.phpなどのテンプレートからコメント欄を読み込むには下記コードをループ内のコメント欄を表示したい部分に設置する。

<?php comments_template( ); ?>

コードを設置した部分にテーマ内のcomments.php(後述)を読み込める。

comments.phpを用意

ベースにdefaultテーマ(バージョン1.6)のcomments.phpを使うので、wp-content/themes/defaultのcomments.phpを自分のテーマのファイルにコピーする。

defaultテーマは翻訳を前提でつくられているので、comments.phpだけをコピーすると見出しなどの文言が英語で表示されてしまう(多分)。
defaultテーマに入っているja.moを一緒にコピーしてくれば日本語になるが、今回は自分用として作るのでcomments.phpの文言を直接日本語になおす作業を行う。

comments.phpの分岐構造

defaultテーマのcomments.phpは下図のように条件(設定やログイン状況など)により表示する内容が結構変わる。

comments.phpの改造(コメント一覧部分)


20〜46行目のif区内は投稿されたコメントの一覧表示をする部分になる。
コメントの一覧自体の改造は後編で行うので、ここでは見出しのみ変更する。

21行目:コメント一覧の見出し

<h3 id="comments">
<?php comments_number(__('No Responses', 'kubrick'), __('One Response', 'kubrick'), __('% Responses', 'kubrick'));?>
<?php printf(__('to &#8220;%s&#8221;', 'kubrick'), the_title('', '', false)); ?>
</h3>

comments_number()は投稿されたコメントの数により表示する文言を切り替える。(コメントなし、コメントが1つ、コメントが2つ以上)(テンプレートタグ/comments number - WordPress Codex 日本語版
__('hoge', 'kubrick')という書式は翻訳の為のものなので、自分用のテーマなら__()の部分を丸々''で囲った文字列に書き換えてしまってよさそう(WordPressのdefaultテーマに出てくる__(アンダーバー2つ)の表記について - 残像ブログ

comments.phpの改造(コメント入力覧部分)


49〜96のif区内はコメントの入力欄を表示する部分になる。
65行目の分岐により、非ログイン時のみ名前・mail・webサイト入力欄が表示される

53行目:コメント入力覧の見出し

<h3><?php comment_form_title( __('Leave a Reply', 'kubrick'), __('Leave a Reply for %s' , 'kubrick') ); ?></h3>

comment_form_title()はコメント返信モード(各コメントの「返信」リンクをクリックした状態)か否かによって表示を変える(第1引数が返信モード時の表示)。
この表示の切り替えはjavascriptが無効の場合にのみ行われる。
javascriptが有効になっている場合はコメント入力欄そのものが返信対象コメントの真下に移動する。無効の場合はコメント入力欄が移動しないので、返信中なのか違うのかわかるように見出しの表示を切り替える。

56行目:返信キャンセルのリンク

<small><?php cancel_comment_reply_link() ?></small>

返信モードの時にのみ表示される。
引数に文字列を指定するとその文字列がリンクテキストになる。指定しないと「返信をキャンセル」と表示する。

60行目:ログイン必須時の警告文


ディスカッション設定で「ユーザー登録してログインしたユーザーのみコメントをつけられるようにする 」にチェックを入れている場合、ログインしていないと表示される。

67行目:ログイン時の名前表示

<p><?php printf(__('Logged in as <a href="%1$s">%2$s</a>.', 'kubrick'), get_option('siteurl') . '/wp-admin/profile.php', $user_identity); ?> <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php _e('Log out of this account', 'kubrick'); ?>"><?php _e('Log out &raquo;', 'kubrick'); ?></a></p>

ログインした状態だと名前とログアウト用のリンクが表示される。
printf()内の「%1$s」がダッシュボードのプロフィールページへのリンク。「%2$s」がユーザ名となる。

72,75,78,86行目:各入力欄のラベルと送信ボタン

<label for="author"><small><?php _e('Name', 'kubrick'); ?> <?php if ($req) _e("(required)", "kubrick"); ?></small></label></p>

「if ($req)〜」の部分は、ディスカッション設定で「名前とメールアドレスの入力を必須にする」にチェックをした場合表示される。