ニケッチャニッキ

はてなブログ・WordPressカスタマイズ・Androidプログラミング

WordPressのコメントリストを吹き出しデザインにする

WordPressのコメントリストをLINEのような吹き出しデザインで表示する方法の紹介です。

修正するのはfunction.phpとcss、comments.phpです。

下記の画像のように表示されます。投稿の作成者からのコメントの場合、アバターを右に配置して吹き出しの色も変えるようにしました。

function.phpの修正

下記のコードをfunction.phpに貼り付けます。

//カスタムコメントリスト
function mytheme_comment($comment, $args, $depth) {
    if ( 'div' === $args['style'] ) {
        $tag       = 'div';
        $add_below = 'comment';
    } else {
        $tag       = 'li';
        $add_below = 'div-comment';
    }
    ?>
    <<?php echo $tag ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ) ?> id="comment-<?php comment_ID() ?>">
    <?php if ( 'div' != $args['style'] ) : ?>
        <div id="div-comment-<?php comment_ID() ?>" class="comment-body">
    <?php endif; ?>
    <div>
        <?php echo get_avatar( $comment, $args['avatar_size'] ); ?>
    </div>
    <div class="comment-balloon">
        <?php if ( $comment->comment_approved == '0' ) : ?>
         <p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></p>
        <?php endif; ?>
        <div class="comment-meta"><?php echo get_comment_author(); ?>
        <?php
        /* translators: 1: date, 2: time */
        printf( __('%1$s at %2$s'), get_comment_date(),  get_comment_time() ); ?><?php edit_comment_link( __( '(Edit)' ), '  ', '' );
        ?>
        </div>

        <?php comment_text(); ?>

        <div class="reply"><?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?></div>
    </div>
        <?php if ( 'div' != $args['style'] ) : ?>
        </div>
        <?php endif; ?>    
<?php }

カスタマイズした形式でコメントリストを出力するための関数です。まだどこからも呼び出されていないので、貼り付けただけでは動作しません。のちにcoments.phpでこちらの関数を呼び出すように設定します。

少し複雑ですが、簡略化すると下記のような構造になっています。

<li>
    <div id="div-comment-コメントID" class="comment-body">
        <div>アバター</div>
        <div class="comment-balloon">吹き出しの中身</div>
    </div>

</li>がありませんが、これはWordPressが自動で補完する仕様になっているようなのでこのままで大丈夫です。

cssの設定でcomment-bodyにdisplay:flex;を指定してやると、子要素であるアバターと吹き出しが横並びになります。

cssの設定

cssに下記のコードを貼り付けます。

/*--------------------------------
コメント
---------------------------------*/

#comments ul,
#comments ol {
    padding: 0px;
    list-style-type: none;
}
.comment-body {
    padding: 10px;
    margin-bottom: 20px;
    display: -webkit-flex; 
    display: flex;
    flex-wrap:wrap;
    width:100%;
}
.bypostauthor div{
    -webkit-flex-direction: row-reverse; 
    flex-direction:row-reverse;
}
.comment-balloon{
    position: relative;
    background-color:#ffe8d1;
    border-radius:10px;
    padding:10px;
    max-width:70%;
    margin-left:15px;
}
.bypostauthor .comment-balloon{
    background-color:#d1ffe8;
    margin-right:15px;
    margin-left:0;
}
.comment-balloon:after{
    content: "";
    display: inline-block;
    position: absolute;
    top: 10px; 
    left: -19px;
    border: 8px solid transparent;
    border-right: 18px solid #ffe8d1;
    -ms-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
}

.bypostauthor .comment-balloon:after{
    left: auto;
    right: -19px;
    border: 8px solid transparent;
    border-left: 18px solid #d1ffe8;
    -ms-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
}
.comment-balloon .comment-meta{
    font-size:13px;
    margin-bottom:5px;
}
.comment-balloon .reply{
    font-size:13px;
}

吹き出しのデザインはこちらのサイトを参考にさせていただきました。

bypostauthorクラスは投稿の作成者からのコメントの場合に自動で出力されるクラスです。

アバターを右に配置するためにflex-direction:row-reverse;を指定しています。今回floatではなくflexboxを使ったのは、このプロパティを使いたかったからです。row-reverseを指定すると要素を右から並べることができます。

comments.phpの修正

お使いのテーマによってcomments.phpの内容が違うかと思いますが、wp_list_comments関数を呼んでる箇所を探してください。そして下記のように修正してください。

<ol class="commets-list">
    <?php wp_list_comments('type=comment&callback=mytheme_comment&max_depth=2'); ?>
</ol>

もしもcomments.phpが用意されていない場合、下記がこのサイトのcomments.phpのソースですので参考にしてみてください。STINGER8のcomments.phpを元にしていますので、そのままだと表示崩れがあるかもしれません。

<div id="comments">
     <?php
     if ( have_comments() ):
          ?>
<div class="comment-title">『<?php the_title(); ?>』へのコメント</div>
          <ol class="commets-list">
               <?php wp_list_comments( 'type=comment&callback=mytheme_comment&max_depth=2' ); ?>
          </ol>
          <?php
     endif;

    $args = array(
        'fields' => array(
                    'author' =>'<p class="comment-form-author"><label for="author">お名前</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
    '" size="15"' . $aria_req . ' /></p>',
        'email'  => '',
        'url'    => '',
        ),
        'title_reply' => 'コメントを残す',
        'comment_notes_before' =>'',
        'comment_field'=>'<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="4" aria-required="true" placeholder="コメントを入力してください。"></textarea></p>',
        'label_submit' => __( 'コメントを送る' , 'default' ),
        'title_reply_before' => '<div class="comment-title">',
        'title_reply_after' => '</div>',
    );
    comment_form( $args );
     ?>
</div>
<?php
if( $wp_query -> max_num_comment_pages > 1 ):
?>
<div class="st-pagelink">
<?php
$args = array(
'prev_text' => '&laquo; Prev',
'next_text' => 'Next &raquo;',
);
paginate_comments_links($args);
?>
</div>
<?php
endif;
?>

wp_list_comments関数はコメントを出力するための関数ですが、色々と引数を渡してカスタム形式にすることができます。

引数の説明

type=commentを指定するとコメントのみ表示できます。comment以外のものにはトラックバックやピンバックがあります。

callback=のところで最初に定義したmytheme_commentを呼び出すように設定しています。

max_depthはコメントの階層の深さを指定します。管理画面のディスカッション設定でも指定できますが、ここでの設定で上書きされます。

今回のcssでは2階層までしか対応していない(bypostauthorに対する返信にまでbypostauthorのスタイルが適用されてしまう)ので、max_depthを2に設定しています。ディスカッション設定を優先させたい場合はこちらの引数を削除してください。