STINGER7：コメント欄をカスタマイズする方法【その２】

以前コメント欄をシンプルな掲示板風にカスタマイズする方法をご紹介したのですが、その時はなるべくシンプルにするために返信機能を省いていました。

返信機能を付けたいというリクエストも頂いたので、今日はコメント欄のカスタマイズpart2をやってみたいと思います！

ベースは前回の記事で紹介したものになります↓

STINGER7：コメント欄をカスタマイズする方法【シンプル掲示板風】

...

web-ashibi.net

2016.04.08

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7：テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7：親テーマの任意のファイルを子テーマで編集する方法

functions.phpを編集

まずは「functions.php」を編集して、削除していた返信機能を復活させましょう。

前回はこの内容をコピペで貼り付けましたよね↓

function costom_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
     <div id="comment-<?php comment_ID(); ?>">
       <div class="comment-listCon">
         <span class="comment-name">
           <?php printf(__('<cite class="fn">%s</cite> <span class="says">より:</span>'), get_comment_author_link()) ?>
         </span>
         <span class="comment-date-edit">
           <?php comment_date('Y/m/d(D)');?> <?php comment_time();?> <?php edit_comment_link(__('Edit'),'  ','') ?>
         </span>
      <?php if ($comment->comment_approved == '0') : ?>
         <em><?php _e('Your comment is awaiting moderation.') ?></em><br />
      <?php endif; ?>
      <?php comment_text() ?>
      ここに挿入
    </div>
  </div>
<?php
        }
 
function move_comment_field( $fields ) {
  $comment_field = $fields['comment'];
  unset( $fields['comment'] );
  $fields['comment'] = $comment_field;
  
  return $fields;
}
add_filter( 'comment_form_fields', 'move_comment_field' );

「ここに挿入」というところに以下のコードを挿入してください↓

<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'reply_text' => '返信') ) ); ?>

「 ‘返信‘ 」の赤字の部分を変更すれば好きな文字列にできますよ。

ディスカッションの設定

次に管理画面の「設定 → ディスカッション」を開きます。
「コメントを◯階層までのスレッド(入れ子)形式にする」というところにチェックを入れると、返信機能が有効になります。

「2階層」だと一度だけ返信可能です。返信したコメントにさらに返信はできません。
「3階層」だと返信コメントにも一度は返信できますが、それ以降は返信できません。

という風に、階層の設定によって返信できる深さが変わってきますのでお好みで設定してください。
途中でいつでも変更できるので様子を見ながら変えると良いと思います(^^)

CSSで見た目を調整

最後にCSSで見た目を調整します。
以下のコードを参考に「style.css」に追加してください↓

a.comment-reply-link { /* 返信ボタンのスタイル */
	font-size: 14px;
	background: #50c1a5;
	border-radius: 4px;
	color: #fff;
	padding: 5px 10px;
	text-decoration: none;
}
ul.commets-list .children { /* 返信部分（入れ子）の左側の余白 */
	padding-left: 5%;
}
ul.commets-list .depth-1 { /* 親コメント下部の余白とボーダー */
	border-bottom: 2px dotted #50c1a5;
	margin-bottom: 30px;
}

ここまでやるとこういう感じになります↓

あとはお好みでCSSをいじってサイトに合わせて調整してくださいね♪

まとめ

ブログにコメントを頂けると嬉しいですよね〜！
このブログもちょくちょくコメントを頂いているので、それが記事を書くモチベーションになっていたりします。
どしどしコメントくださいね。笑

ではまた〜♪

STINGER7のカスタマイズ記事をまとめました↓

STINGER7：カスタマイズまとめ

このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

web-ashibi.net

2016.03.24