WordPressテーマ「マテリアル」のコメント表示をスレッド化階層表示（ツリー表示）にチャレンジ【トライ編】

calendar 2016年05月05日

reload 2016年05月08日

folder WordPressテーマ

このブログはWordPressテーマ「simplicity」を使わせてもらっていますが、別のブログではWordPressテーマ「マテリアル」を使わせてもらっています。

WordPressテーマ「マテリアル」のいいところ

おしゃれ
多機能
カスタマイズ性がいい
AdSenseクリック率も高い
そして無料

と、マテリアルはいいところだらけです。

ブログ用WordPressテーママテリアル

http://wp-material.net/

無料の割に高機能なブログ用WordPressテーママテリアルについての解説サイトです

しかしそのおしゃれなデザインが障害となり、一部のプラグインと干渉してしまうことがあります。

マテリアルに限らず、テーマが多機能になればなるほど何れかのプラグインとは干渉しやすくなりますよね。

特に「Jetpack by WordPress.com」や「All In One SEO Pack」、「Celtispack」のようにプラグイン側も多機能になればなおさら。

今回はこのWordPressテーマ「マテリアル」のコメント表示部分をスレッド化することにチャレンジしてみました。

階層表示（ツリー表示）とは？

このブログで使わせてもらっているWordPressテーマ「simplicity」のコメント欄では、1つのコメントに対して返信するとそのコメントは1段下がって表示されていきます。

CapD20160503_16

こんな感じに。

これは「simplicity」の機能でカスタマイザーで色々な表示に切り替えることができるのですが、「マテリアル」にはこのような機能はありません。

CapD20160503

そもそも返信ボタンがないのです。

返信する方法はただ一つ、管理画面から管理人が返信する方法だけです。

しかしそれも内部で返信したことになってはいるものの、ブログ表示上は単発コメントなのか返信なのか見分けがつきません。

さあどうしよう。

ワードプレスの設定

まず必要なのがワードプレス本体の設定。

「設定＞ディスカッション設定＞その他の設定」の中のこの部分ですね。

CapD20160505_1

ここにチェックを入れる
階層を2以上に設定する

この2点が必須条件となります。

このブログで使っているテーマ「simplicity」だとこの設定をするだけで自動的に階層表示になります。

とりあえず今回は「3階層まで」に設定しておきます。

まずはプラグイン探し

「何かそれっぽいプラグインがあるかも？」という期待が持てるのもワードプレスのいいところですよね。

ってことで探してみると一応はありました。

候補に上がったのは次の2つ。

WordPress Thread Comment
Greg’s Threaded Comment Numbering

どちらもコメントをスレッド表示化するためのプラグインのようです。

結論から言うとマテリアルテーマ上ではどちらもうまく機能しませんでした。

まずは「Greg’s Threaded Comment Numbering」からためしてみると、「返信」のボタンは表示されましたが押しても何も反応がない。

次は「WordPress Thread Comment」ですが、こちらは更新日時がなんと7年前。

な、ななねんまえ…！？

怖いけど入れてみました。

しかしやはりうまく機能せず。

プラグインで解決するのは断念しました。

コードをイジる

こうなったらコード編集です。

コメントを階層表示にしようと思ったら、まず必要なのが「返信」のボタンです。

これがなければスレッドになりませんからね。

てことでこれをどこでどうイジればいいのかを探します。

あ、その前にバックアップ！　皆さんも忘れずに！

コメント表示を司るモノ

まずはとりあえず「外観＞テーマの編集＞comments.php」を開いてみます。

うんうんなるほどよくわからん。

<ul>
		<?php wp_list_comments('callback=mydesign'); ?>
</ul>

<ul>

<?php wp_list_comments('callback=mydesign'); ?>

</ul>

とりあえず上記の部分で送信されたコメントの一覧を表示されていることだけはわかった。

しかしコメントした人の名前や日付なんかはどこ行った？

これはどうやら「’callback=mydesign’」の部分があやしいぞってことで検索すると、どうやらfunctions.phpにナカミを書いてそれを呼び出すための引数らしい。

うーん…そこは触りたくないのにやっぱり触んなきゃだめかぁ…。

てことでそのマイデザインさんがどこにいらっしゃるかってーと、やっぱりfunctions.phpの中にありました。

/**** コメント表示 ****/
function mydesign($comment, $args, $depth){
$GLOBALS['comment'] = $comment; 
?>
<li class="compost" id="comment-<?php comment_ID() ?>">
	<div class="combody">
		<?php comment_text(); ?>
	</div><!-- .combody -->
	<p class="cominfo">
		by <?php comment_author_link(); ?>  <?php comment_date(); ?>  <?php comment_time(); ?>
	</p>

</li>
<?php
}

/**** コメント表示 ****/

function mydesign($comment, $args, $depth){

$GLOBALS['comment'] = $comment;

<?php comment_text(); ?>

</div>

by <?php comment_author_link(); ?> <?php comment_date(); ?> <?php comment_time(); ?>

</p>

</li>

<?php

}

どどーんとしっかり「/**** コメント表示 ****/」って説明付きで鎮座してらっしゃいます。

マテリアルの開発者Nobuoさんは親切です。

返信ボタンをねじ込む

さてこれで送信されたコメントが表示されるための指令を出している場所がわかりました。

で、どうやって返信ボタン出すの？ってことでにがんばって調べました。煙が出ました。

chromeのタブが全部1cmくらになるほどに、自分のブログや色んなサイトを見てまわりやっと見つけました。

最終的に辿り着いたのはこちら。

giraffy.jp

WordPressのテーマ(テンプレート)をゼロから作成する方法(3) » 株式会社ジラフィー(Giraffy)

http://giraffy.jp/blog/2009/10/07/wordpress/248/

結局ゼロから作るほどの覚悟が必要らしいです。

とは言っても私は楽ちんしますけどね！

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

1	<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'reply_text' => '返信', 'before' => ' \| ', 'after' => ' \| ') ) ); ?>

この1文を付け足せば返信ボタンが実装されます。

この1文に辿り着くまでに私の「経験値.php」が異常に上がりましたよ！

元のレベルが低かったですからね。どばっと入りました。

とりあえず返信ボタンをコメント送信日時の後ろにくっつけることにして、functions.php「/**** コメント表示 ****/」の部分、2つ上のソースの10行目の「by <?php comment_author_link…」の後ろに半角スペース2個入れてくっつけました。

/**** コメント表示 ****/
function mydesign($comment, $args, $depth){
$GLOBALS['comment'] = $comment; 
?>
<li class="compost" id="comment-<?php comment_ID() ?>">
	<div class="combody">
		<?php comment_text(); ?>
	</div><!-- .combody -->
	<p class="cominfo">
		by <?php comment_author_link(); ?>  <?php comment_date(); ?>  <?php comment_time(); ?>  <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'reply_text' => '返信', 'before' => ' | ', 'after' => ' | ') ) ); ?>

	</p>

</li>
<?php
}

/**** コメント表示 ****/

function mydesign($comment, $args, $depth){

$GLOBALS['comment'] = $comment;

<?php comment_text(); ?>

</div>

by <?php comment_author_link(); ?> <?php comment_date(); ?> <?php comment_time(); ?> <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'reply_text' => '返信', 'before' => ' | ', 'after' => ' | ') ) ); ?>

</p>

</li>

<?php

}

変更前と変わってないように見えますが、スライドバーを右へずらして行くと10行目の後ろにコードが付け足されています。

めんどくさければこれまるごとコピペすればOKです。

とりあえず返信はできた

上記のようにコードを付け足すと、実際のブログでの表示はこんな感じ。

CapD20160505

ちゃんと「返信」が表示されています！

そしてそこからしっかり返信もできました。

ディスカッション設定で「3階層まで」に設定してあるのでテスト5には返信ボタンがありませんね。ちゃんと機能しているようです。

もっと装飾したいって方は

<span class="comment-reply-button">付け足したコード部分</span>

1	<span class="comment-reply-button">付け足したコード部分</span>

とかにして、style.cssで装飾してくださいね。

しかし階層表示は？

さてこれで返信ボタンは表示することができました。

しかし、上の画像でテスト3はテスト1に対する返信なんですが画面からはそんなことさっぱり読み取れませんよね。

てことで次は返信したコメントを1段ずらすのにチャレンジです。

これはなんとなくCSSでどうにかなりそうな予感。

そんなときはとりあえず気になる部分にカーソルを被せてそこを右クリック、デベロッパーツールを開いてみます。

コメントリストの表示はこうなっている

デベロッパーツールでソースを見てみるとこんな感じで表示してるみたいです。

(見やすいように必要な要素だけ残してあとは削ってます。）

<div id="comments">
	<h2 class="comments-header">コメント</h2>
	<ul>
		<li class="compost" id="comment-303">
			<p>テスト1</p>
		</li>

		<ul class="children">
			<li class="compost" id="comment-306">
				<p>テスト1に返信するテスト3</p>
			</li>

			<ul class="children">
				<li class="compost" id="comment-308">
					<p>テスト1に返信するテスト3に返信するテスト5</p>
				</li>


	</ul>

</div><!-- #comments -->

<ul>

</li>

<p>テスト1に返信するテスト3</p>

</li>

<p>テスト1に返信するテスト3に返信するテスト5</p>

</li>

</ul>

</div>

イメージはこんな感じ。

kaisou

子<ul>（class=”children”が指定されている<ul>）は一つ親の<ul>の中に入っている感じですね。

「1段ずらす」＝「インデントを取る」

てことは子<ul>にインデントを取るように指示してあげればいいんじゃない？

と思いついてもう一度考えをまとめてみます。

class=”children”が指定されている<ul>の中の<li>にインデントを取るように指示するとこうなるんじゃない？っていう予想

テスト3はテスト1が書いてある親<ul>に対して1段ずれる
テスト1から見て孫に当たるテスト５は、その親のテスト３が書いてある<ul>から１段ずれる
テスト5はテスト1が書いてある<ul>に対して2段ずれる

よしやってみよう！

「外観＞テーマの編集」の「style.css」を開いてに次のコードを最後に足します。

/*--- コメント階層表示で1段ずらす　---*/
#comments .children li{
    margin-left: 1.0em!important;
}

/*--- コメント階層表示で1段ずらす　---*/

#comments .children li{

margin-left: 1.0em!important;

}

id=”comments”と指定してある要素の中でclass=”children”と指定してある<li>は左に1文字分すき間を作れよ！絶対だぞ！

と言ってます。

さあどうだ！

CapD20160505_2

よっしゃずれたーーーーーーっ！

…あれ？

おいおい孫はどうしたんだよ孫は。

うーん意味がわかりません。なんだろうなんだろう。

もう一度ソース見直し

困ったときのデベロッパーツール！助けてデベロッピィ！

しかし何度見てもデベロッピィは助けてくれません。

やっぱり助けてくれたのは諸先輩方でした。

dogmap.jp

WordPress コメントをスレッド対応にするdogmap.jp

https://dogmap.jp/2009/02/17/wordpress_comment_thread/

WordPress 2.7 から、プラグイン等を導入せずともコメントをスレッド(入れ子)表示できるようになりました。対応するテーマを使っていれば、管理画面の - でにチェックを入れてやれば良いのですが、使用しているテーマが対応していないと修正する必要がありま...

こちらも参考にさせてもらいつつやってたんですが、

ここでは WordPress 2.6 に付属されていた default テーマを対象に説明します。

とある通りマテリアルとけっこう記述内容が違ってうまく真似出来ない箇所が多かったのですが、記事の最後の方にこんな注意書きが。

ここで注意点を3つ

3行目
初期処理として、グローバル変数に引数として受け取った $comment を代入しておきましょう。

15行目
<?php comment_reply_link(); ?> は返信用のリンクを追加するための新しいテンプレートタグです。
オプションは、配列で渡します。

li の閉じ要素（</li>）は記述しない。
wp_list_comments() 関数が </li> を末尾に自動挿入するため、</li> を挿入する必要がありません。
っていうか挿入してはいけません、余計に閉じてしまいます。
div でリスティングしている時は wp_list_comments() 関数を呼び出す時に style=div オプションを付与する必要があります。
もし、div, li 以外(dl とか)でリスティングしている時は、wp_list_comments() 関数を呼び出す時に end-callback オプションを付加して、end-callback 用の関数を書かねばいけません。

(　ﾟдﾟ) ・・・

(つд⊂)ｺﾞｼｺﾞｼ

(；ﾟдﾟ) ・・・

(つд⊂)ｺﾞｼｺﾞｼｺﾞｼ
_, ._
（；ﾟ Дﾟ） …！？

li の閉じ要素（</li>）は記述しない。
wp_list_comments() 関数が </li> を末尾に自動挿入するため、</li> を挿入する必要がありません。
っていうか挿入してはいけません、余計に閉じてしまいます。

へ！？

ってことでデベロッピィはやめて普通にソースを見てみます。ページのどこでもいいので右クリックして「ページのソースを表示」。

<ul class="children">
	<li class="compost" id="comment-308">
		<p>テスト1に返信するテスト3に返信するテスト5</p>
	</li>

</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->

<p>テスト1に返信するテスト3に返信するテスト5</p>

</li>

</li>

</ul>

</li>

</ul>

</li>

うおおなんじゃこりゃあ

本当に余計に閉じまくってるよ！

dogmap.jpのをかもとさん凄い。

てことで「をかもと神」の天啓に従い問題の</li>を削除。

「外観＞テーマの編集」functions.phpのこの部分です。

CapD20160505_3

完成形

さあ天の言葉に従い</li>を消した結果ソースはこうなりました。

<ul class="children">
	<li class="compost" id="comment-308">
		<p>テスト1に返信するテスト3に返信するテスト5</p>

</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->

<p>テスト1に返信するテスト3に返信するテスト5</p>

</li>

</ul>

</li>

</ul>

</li>

あ、そういうこと？

下でまとめて閉じてるとこはそのままで、個別に閉じてた</li>が消えるのね。

てことで画面表示はこうなりました。

CapD20160505_4

おお…できたよ…。

様々な先輩方の知識を拾い集めればできるもんですね。

インターネットって凄い。

そしてそれを残してくれてる先輩方に感謝。

まとめ

今回はWordPressテーマ「マテリアル」で返信のコメントをずらして表示することにチャレンジしました。

2250の経験値を手に入れた！コウスケはレベルが上った！

色々勉強になりました。

今回特に参考にさせて頂いたのはこちら。

dogmap.jp

WordPress コメントをスレッド対応にするdogmap.jp

https://dogmap.jp/2009/02/17/wordpress_comment_thread/

愚者の紋章 -The Fool-

WordPressのコメントを入れ子に改造

http://the-fool.me/wordpress/customize/comment-thread.html

現在 XAMPP 内の WordPress テーマ、及び記事の中身を修正中。　久々にテーマをイジると忘れてることや解らないことが次から次へと出てきます。4、5年前より WordPress に関する情報が増えてるので、解らないことは検索すれば正解、もしくはヒントが得られるのですが...

giraffy.jp

WordPressのテーマ(テンプレート)をゼロから作成する方法(3) » 株式会社ジラフィー(Giraffy)

http://giraffy.jp/blog/2009/10/07/wordpress/248/

ありがとうございます。

しかしプラグインの更新停止や生き残っているプラグインの少なさから考えても、この問題はほとんど世間で需要がないのでしょう。

素直にスレッド表示に対応しているテーマを使う人がほとんどなんでしょうね。

それでもマテリアルの素晴らしいデザインやSEOとUIに関してのメリットは捨てがたいですからどうしてもコメントをスレッド表示したい場合は役に立つと思います。

少しでも誰かの参考になれば、まぐれヒット。

folder WordPressテーマ

arrowleft

Jetpackのコメント機能をWordPressテーマ「マテリアル」で使う方法【リザルト編】

arrowright

WordPressテーマ「マテリアル」のコメントリストをスレッド化【リザルト編】

この記事をシェアする

さっそく、このページを参考に私もコメントをツリー化しました！情報ありがとうございます！
「返信」リンクの装飾のヒントまで、またまた痒いところに手が届いてますね(*´∀｀*)

―報告―――――――――――――――――――――――――
そのHTMLコードのの部分が全角の＜＞になってます！
コード表記なので、本来は半角で書かれてるのが正確かな～と。
――――――――――――――――――――――――――――

それと、「返信」をクリックした後のコメントフォームに「コメントをキャンセル」というテキストリンクが表示されます。
「コメントを残す」という見出しの中にあるため、文字サイズがデカイです。

とりあえず、CSSで文字サイズを小さくしときました。

/*— コメントキャンセルの装飾　—*/
#cancel-comment-reply-link {
font-size: .7em;
}

時間のあるとき、「返信」リンクと「コメントをキャンセル」リンクをボタン装飾したいと思います。

by レシル　2016年5月5日 10:53 PM

おうふ(>д<;) コメントでのHTML部分が消去されてしまいました。
▼訂正

―報告―――――――――――――――――――――――――
「返信」リンクの装飾のHTMLコードの＜/span＞の＜＞部分が
全角の＜＞になってます！
コード表記なので、本来は半角で書かれてるのが正確かな～と。
――――――――――――――――――――――――――――

by レシル　2016年5月5日 10:57 PM

あ、ほんとだ！ご指摘ありがとうございます。
＜/span＞の箇所修正しました。

「コメントをキャンセル」の部分は
.comment-reply-title #cancel-comment-reply-link {
font-size: 50%;
}
としておきましたー。

by 管理人コウスケ　2016年5月8日 9:36 AM

それと「コメントをキャンセル」のセリフを変えたくて以下のようにしたけどうまくいきません。

comments.php
ーーーーーーーーーーーーーーーーーーーーーーーーーー

// $args設定
$args = array(
‘fields’ => apply_filters( ‘comment_form_default_fields’, $fields ),
‘title_reply’ => ‘

down

コメントする’,
‘cancel_reply_link’ => __( ‘やめる’ ),
‘comment_notes_before’ => $comment_notes_before,
‘comment_notes_after’ => $comment_notes_after
);
?>

< ?php comment_form($args); ?>

ーーーーーーーーーーーーーーーーーーーーーーーーーー

なんででしょうね？誰かおしえてくださいm(_ _)m

by 管理人コウスケ　2016年5月8日 9:45 AM

これは、WordPressの管理ページにある「設定」の内容を参照するように組まれてるからだと思います。

「コメントをキャンセル」の文章を変えるには「設定 > ディスカッション設定 > コメント > グリーティングメッセージ」の部分で変更可能ですよ～(*´∀｀*)

by レシル　2016年5月8日 12:43 PM
あ、またやってしまった（汗）
半角の＞ダメなの忘れてました。
コメント汚しすみませんｍ(_ _;)ｍ

by レシル　2016年5月8日 12:45 PM

半角＞などの特殊文字対策はどうしたらいいんだろう…思いつきません(-_-;)
ーーーーーーーーーーーーーーーーーーーーーー
コメント
コメントフォームのメッセージと配色設定ができます。
ーーーーーーーーーーーーーーーーーーーーーー
からの部分はどうやらJetpackのコメント機能を有効にすると出るみたいですね。こっちにはないし。
で、グリーティングメッセージの設定は’title_reply’を書き換える設定みたいで’cancel_reply_link’ではないみたいです。
ってここまで書いて(・∀・)!!ってなってJetpackのコメント機能を無効化したら「やめる」になりました。
これはまたJetpackのプラグイン側を編集しないと無理そうですねー。

by 管理人コウスケ　2016年5月9日 2:37 AM