目次

  1. コメントフォームをカスタマイズする
  2. ページ送りをカスタマイズする
    1. 余計なタグを出力しないようにする
    2. comments.phpを編集する
  3. 投稿済みコメント一覧をカスタマイズする
    1. コメント一覧表示を整形する〜コールバック関数を定義〜
    2. comments.phpを編集する
    3. functions.phpを編集する

 

1. コメントフォームをカスタマイズする

前回記事（→コチラ）では、コメントフォームを追加する方法について紹介しました。前回記事で作成したコメントフォームを基本として、下記２つのカスタマイズをします。

modification

ページ送りのリンクを色付きにする

リンクの背景色を変更します。色を変えるだけならばCSSファイルを書き換えればOKなのですが、今回はちょっとした問題が発生してしまいます。ここでは、その解決法の１つを紹介します。

 

投稿コメントのレイアウト＆文言を変更する

コメント表示のレイアウトや、文言（”返信する”とか）を変更します。そのために、コメント表示用のコールバック関数を定義して、使えるようにする方法を紹介します。

 

 

2. ページ送りをカスタマイズする

2-1. 余計なタグを出力しないようにする

前回作成したテーマからCSSを編集して、ページ送りのリンクの背景色を変更してみると、下記のように表示されてしまいました。

comment-link

 

このように、単純に色を変えるだけでは、余計な「点」のようなものが出力されてしまいました。ページ送りのコードを確認してみます。

comments.php（抜粋、編集前）

これを出力すると、

<ul id="comments-pagination">
    <li id="prev-comments"></li>
    <li id="next-comments"><a href="..省略.." >次のコメント &gt;&gt;</a></li>
</ul>

というように、無駄なリストタグ<li>が出力されてしまうため、画面上に余計な「点」が表示されてしまいます。

 

2-2. comments.phpを編集する

余計なリストタグが出力されないように、コードを書き換えます。ここで紹介する方法よりも、スマートな方法があるかもしれません。

comments.php（抜粋、編集後）

 

何をやっているのか？

ページ送りのリンクを取得して、そのリンクが有るor無いを判断してから、ページ送りのリストタグを出力するようにしています。

ページ送りのリンクを取得する

$previous_comments_link = get_previous_comments_link('<< 前のコメント');

WP関数 get_previous_comments_link()で、前ページへのリンクを取得できます。もしも、前ページが存在しない場合は、値は取得できずに、左辺の変数は空のままになります。

※変数$previous_comments_linkは、このテーマで勝手に作成した変数です。好きな名前でOKです。

リンクの有無を判断して、ページ送りを出力する

if ( isset($previous_comments_link) ) {
     echo '<li id="prev-comments">' . $previous_comments_link . '</li>';
}

issetはPHP関数で、括弧内で指定した変数に値がセットされているかどうかを判定します。 値が存在する＝リンク先が存在する場合のみ、echo文を実行します。

 

以上の変更で、余計なリストタグが出力されないようにすることが出来ました。

 

3. 投稿済みコメント一覧をカスタマイズする

3-1. コメント一覧表示を整形する〜コールバック関数を定義〜

次は、コメント一覧表示をカスタマイズするために、コールバック関数を使う方法を紹介します。一般的なコールバック関数の意味はコチラを参照して頂くとして、ここではWordPressのコメント表示に特化して紹介します。

 

コールバック関数が呼び出されるまでの流れ

コメント表示用のコールバック関数に注目して、（なんちゃって）シーケンス図を書いてみました。

comment-list-callback

 

図は、上から下に時系列になっています。wp_list_comments()はコメント一覧を表示するWP関数です。この関数の引数として、自分で定義したコールバック関数名を渡します。wp_list_comments()関数を実行途中で、引数で指定したコールバック関数が実行されます。

 

コールバック関数はどこに書くのか？

上図にある通り、functions.phpに書きます！

コールバック関数名は何にすれば良いか？

関数名は、他と重複しなければ何でもOKです。

コールバック関数には何を書くのか？

下図は、コールバック関数無しでwp_list_comments()を出力したときの構造を表したものです（前回記事参照）。コールバック関数を指定すると、赤枠内を好きなコードに置き換えることが出来ます。コールバック関数には、赤枠内に出力したいコードを自分で記述します。

modification_wp_comments_list_tags

 

今回は、赤枠内を下図のような構造に変更します。

comment-list-structure

 

 

3-2. comments.phpを編集する

comments.phpの変更は簡単で、wp_list_comments()関数の引数に、コールバック関数名を書くだけです。

comments.php（抜粋）
 <?php wp_list_comments( array(
            'avatar_size'=>48,
            'style'=>'ul',
            'type'=>'comment',
            'callback'=>'mytheme_comments'
        )); ?>

 

3-3. functions.phpを編集する

functions.phpに、コールバック関数を追加します。

ここでは、WordPress公式リファレンスで紹介されているコード例を元に改変しています。

functions.php（追記）

コード量が多いので、かいつまんで説明を書きます。

おまじない
$GLOBALS['comment'] = $comment;

$GLOBALS、$commentsは、ともにWordPress内部で使われている変数です。コールバック関数の冒頭で$commentsをコピーしておきます。

 

アバターを出力する
<?php echo get_avatar( $comment, $args['avatar_size'] ) ?>

get_avatar()は、アバター画像を取得するWP関数です。$argsには、wp_comments_list()関数で指定した引数などが格納されています。ここでは、commets.phpで下記のように指定していました。

'avatar_size'=>48

よって、$args[‘avatar_size’]は48となります。

 

投稿者名＆リンクを出力する
<?php printf('<cite>%s</cite>', get_comment_author_link()) ?>

get_comment_author_link()は、リンク付きコメント投稿者名を取得するWordPress関数です。コメント投稿者が、URLを指定しなかった場合は、名前のみ出力されます。

 

コメントタイトル（的なもの）を表示する
<?php
$commentID_parent = $comment->comment_parent;
    if( $commentID_parent != 0 ):
 ?>
        <a href="<?php echo htmlspecialchars( get_comment_link( $commentID_parent ) ) ?>"><?php echo get_comment_author($commentID_parent); ?>さんへの返信</a>
<?php else: ?>
        <a href="#top">「<?php the_title(); ?>」へのコメント</a>
<?php endif; ?>

ここでは、各コメントのタイトル的なものを出力しています。

WordPressのコメント投稿機能には、「タイトル」が用意されていません（記事執筆時点）。そこで、

  • 親コメント（最上階層）　　： “記事名”へのコメント
  • 子コメント（第二階層以下）：「コメント投稿者名」さんへの返信

というタイトル的なものを出力できるようにカスタマイズしてみました。

親コメント or 子コメントの判断

グローバル変数$commentのプロパティcomment_parentを利用します。処理中のコメントが親コメントの場合は、

$comment->comment_parent = 0

子コメントの場合は、

$comment->comment_parent = 親コメントのID

が入っていることを使っています。

※プロパティって何？というトピックスは、説明するとひじょーーーに長くなってしまうので割愛します。

 

投稿日時を表示する
<?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?>

printfは、第一引数のフォーマットに従って文字出力するPHP関数です。さらにここでは、WordPressの翻訳機能を使って投稿日時を表示しています。分かりづらいですが、次は翻訳した結果を出力するWP関数です。

__()

翻訳できる英語/日本語の対応は、/wp-content/languages/themes/ja.poを見ると確認できます。翻訳といっても、このファイルに掲載されている文を、単に置換するだけです。

なお、ここでのコードを日本語で実行した場合は次のようになります。（atが無くなります）

<?php printf(__('%1$s %2$s'), get_comment_date(), get_comment_time()) ?>

 

翻訳機能の補足
  • ja.poを編集しただけでは、翻訳される日本語を変更することが出来ません。翻訳ファイルを変更するには、ja.moを編集する必要があります。ja.moを編集する方法は、公式リファレンスで紹介されています。
  • __()以外にも、_e()や_n()などの翻訳に関する関数があります。これらをきちんと説明すると長くなるので、別の記事で取りあげたいと思います。

 

printf関数の補足

文字列のFMT指定子は%sです。それに対して、%1$s、%2$s…という形式は、その文字列を繰り返し使用する場合に使います。具体例をあげます。

<p><?php printf('%1$s %1$s %2$s %1$s', 'str1','str2') ?></p>

実行結果は、次のようになります。

<p>str1 str1 str2 str1</p>
最後のリスト終了タグは書かない

コールバック関数には、リスト終了タグ</li>は書きません。WordPress内部の処理で、適宜追加してくれます。

 

「index.phpをカスタマイズする」の記事