• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

プラグインとテーマの移行/2.7/Enhanced Comment Display

提供: WordPress Codex 日本語版
移動先: 案内検索

ページ名検討中: このページ名「プラグインとテーマの移行/2.7/Enhanced Comment Display」について改名が提案されています。ご意見をお寄せください。

WordPressはVersion 2.7からコメントのスレッドとページングを組み込みでサポートしました。現在使用中のテーマをWordPress2.7で動かすためにテーマを修正しなければならないわけではありません が、テーマをアップデートしないかぎり、これらの新機能を使うことはできません。この記事がその一助になればと思います。

この記事はOttoのすばらしい記事「WordPress 2.7 Comments Enhancements」に多くを負っています。

comments.phpのコード変更

実際に動いているサンプルとして、デフォルトテーマのcomments.phpファイルを確認してみましょう。

WordPress2.7であるかの確認

自分のテーマに後方互換性を持たせたければ、簡単な方法があります。wp_list_comments()関数を確認して、その通りにしてください:

if ( function_exists('wp_list_comments') ) :
// new comments.php stuff
else :
// old comments.php stuff
endif;

WordPressのバージョン番号をチェックすることもできますが、使用する関数があるかを確認するだけなので、この方法の方がシンプルで良いでしょう。バージョン番号からの想定は使わないようにしましょう。

これを実現する面白い方法としては、古いコメント用php を外部ファイルとして設けておき、それをインクルードする方法です。これはテーマの後方互換を保つ簡単な方法です。このアプローチの簡単なサンプルコードです:

<?php
add_filter( 'comments_template', 'legacy_comments' );
function legacy_comments( $file ) {
	if ( !function_exists('wp_list_comments') )
		$file = TEMPLATEPATH . '/legacy.comments.php';
	return $file;
}
?>

テーマのfunctions.phpファイルにこのコードを加えることで、テーマは2.7よりも古いWordPressではlegacy.comments.php"を使用します。この方法を用いれば、単に古いcomments.phpをリネームして、新しい関数に対応した新しいcomments.phpを作ればいいのです。賢いやりかたですね。

パスワード保護のチェック

comments.phpファイルの先頭にこのコードを追加してください。投稿のパスワード保護機能を有効にします。これは以前の方法(Cookieを直接チェックする)とかなり似ていますが、WordPressはいまやそのための専用関数を持っています。将来的に機能変更が起こった場合に備えて、この関数を使用すべきです。そうすれば、前方互換になります:

if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
	die ('このページを直接読み込んじゃダメだよ!');
if ( post_password_required() ) {
	echo '<p class="nocomments">この投稿はパスワードによって保護されています。コメントを見るためにはパスワードを入れてください。<p>';
	return;
}

コメントループ

コメントループとは、このようなものでした(実際のものよりかなりシンプルにしてあります):

if ($comments) :
<?php $comment_count = get_comment_count($post->ID); echo $comment_count['approved']; ?> コメント
<ul class="commentlist">
<?php foreach( $comments as $comment ) :
// コメントをリストで表示するための処理
endforeach;
?></ul>
<?php else :
if ('open' == $post->comment_status) :
	// コメントは許可されているが、一件もないとき
else :
	// コメントが許可されていないとき
endif;
endif;

基本的に、これはコメントをすべてチェックし、必要な部分を出力するというものでした。簡単ですが、非常に地道なやり方です。これは不整合が起きやすく、テーマエディターでの編集が困難という問題を持っていました。とりわけ、カスタマイズをやり込んでしまった場合に、です。

新しいコメントループはもっとシンプルで、通常の記事ループに似ています:

if ( have_comments() ) : ?>
<h4 id="comments"><?php comments_number('コメントなし', '1件のコメント', '%件のコメント' );?></h4>
<ul class="commentlist">
	<?php wp_list_comments(); ?></ul>
<div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
</div>
<?php else : // コメントがなかった時に表示されます ?>
	<?php if ('open' == $post->comment_status) :
		// コメントが許可されているが、コメントがなかったとき
	else : // コメントが許可されていないとき
	endif;
endif;

この新しい関数は実際、コメントループであるといって良いでしょう。もしコメントなしコメントは許可されていません を表示したいというのでなければ、これ以上簡単にすることはできません。

三つだけ注意点があります:

  • グローバル変数$commentsをチェックする代わりに、have_comments()関数を使用する
  • wp_list_comments()関数はコメント出力、スレッド化、クラス分けなどのすべてを行う
  • コメントをページングする新しいナビゲーションセクションがある

Javascriptの力

コメントのスレッド分けをする新しいJavaScriptの機能をサポートするには、コードを少し加える必要があります:

まず、header.phpのwp_head()を呼び出す直前に以下の行を加えます:

if ( is_singular() ) wp_enqueue_script( 'comment-reply' );

このコードはコメント返信用JavaScriptをシングルポストページに追加し、コメント返信リンクが適切に動くようにします。WordPressが明示的にこれを行うことはできません。というのも、このスクリプトを動かすには、コメントフォームが命名規約を守っていて、適切なパラメータを持っていなくてはならないからです。それを追加しましょう。

追加しなくてはならないパラメータは以下の通りです:

<?php comment_id_fields(); ?>

これはフォームにhidden属性を持った二つのinputを追加します: comment_post_IDとcomment_parentです。おそらく、フォームにはすでにcomments_post_IDが入っていると思われるので、それをとりのぞく必要があります。comment_parentはJavaScriptのためのもので、これによりコメントが適切にスレッド分けされます。

また、コメント記入用のtextareaはid="comment"となっていなければなりません。JavaScriptは対象にフォーカスするためにこれを使います。他の物を使っている場合は変更してください。このため、他の要素のIDがcommentであってはいけません。

最後に、コメントフォーム全体はid="respond"となっているdivでくくられていなければなりません。以前のテーマの中には(デフォルトテーマを含めて)このようなアンカータグを持っていたと思います:

<a id="respond"></a>

これはコメントがない場合、フロントページから直接コメントエリアに行けるようにするためのものでした。JavaScriptは返信リンクがある場所にコメントフォームを移動するので、アンカーにではなく、コメントフォームを囲むdivにrespondというid属性をつける必要があります。

それでは、アンカータグを取り除き、id属性がrespondとなっているdiv要素でコメントフォーム全体をくくりましょう。この方法ならば、フロントページからのリンクはモダンブラウザにおいて以前と同じく機能し、JavaScriptは必要な場所へフォームを移動することができます。

続いて、通常のLeave a Commentテキストの呼び出しをこのように変えることができます:

<h3><?php comment_form_title(); ?></h3>

これにより、誰かが誰かに対して返信したとき、コメントフォームのタイトルをコメントを残してくださいから●●にコメントを残してくださいに変更できます。2つのパラメータを渡すことでカスタマイズできます:

<?php comment_form_title( 'コメントを残してください', '%s に返信する' ); ?>

%s は返信された人の名前に置き換えられます。上述したように、コメント返信用Javascriptを読み込んでいなければ、それぞれのコメントに返信リンクは表れません。

そして最後です。返信する をクリックしたユーザーは、コメントフォームが表れたあとにキャンセルしたくなるかもしれません。respondセクションにはキャンセルリンクがなくてはなりません。そのためのコードは以下になります。コメントフォームエリアのコメントを残してくださいヘッダーのすぐ下に、次のコードを挿入するだけです:

<div id="cancel-comment-reply">
	<small><?php cancel_comment_reply_link() ?></small>
</div>

これでAJAXを利用する準備ができました。これにより、管理パネル/ディスカッション設定で設定した新機能が有効になります。たしかにこれらの機能は必要ならばテーマに組み込むことができますが、原則は必要な機能だけを実装することです。


CSSスタイリング

これで動くようになりましたが、コメントをスタイリングする新しい方法はまだまだあります。新しいコメント・ループはすべてのコメントをLIタグの中に入れ、同じくUL・LIタグでスレッド分けを行います。コメントを囲んでいるこられのLI要素すべてに対し、たくさんのクラスが適用されます:

  • comment, trackback, pingbackクラスがコメントの種類に応じて付け加えられます。
  • byuserがbyuserがこのサイトの登録ユーザのコメントにつけられます。
  • comment-author-authorname クラスは特定の登録されたユーザのコメントに対しつけられます。
  • bypostauthor クラスはその投稿の作者によるコメントに対してつけられます。
  • oddとevenクラスはコメントが偶数番目か奇数番目かに応じてつけられます。
  • altは一つおきのコメントに対してつけられます。
  • thread-odd, thread-even, thread-alt クラスはodd・even・altクラスと同様、トップレベルのコメントにつけられます。
  • depth-1 はトップレベルのコメントにつけられます。depth-2 はその次のレベル、となっていきます。

さらに、comment_classクラスフィルターが自分のクラスを追加するために提供されています。次がその例です。例に挙げる関数はコメント投稿者が入力したURLとメールアドレスからなるMicroIDを使って、microidクラスをつけます。こうした関数は通常、プラグインやテーマのfunctions.phpファイルに記入されます。

// MicroIDをすべてのコメントに追加
function comment_add_microid($classes) {
	$c_email=get_comment_author_email();
	$c_url=get_comment_author_url();
	if (!empty($c_email) && !empty($c_url)) {
		$microid = 'microid-mailto+http:sha1:' . sha1(sha1('mailto:'.$c_email).sha1($c_url));
		$classes[] = $microid;
	}
	return $classes;
}
add_filter('comment_class','comment_add_microid');

シンプルで効果的です。渡されたクラス名の配列に対してクラスを追加するだけで、後のことはコメント表示用の関数が行ってくれます。

カスタムコメントレイアウト・フォーマット

デフォルトだと、WordPressはそれぞれのコメントを表示するのに内部関数を使用します。もし独自のHTML構造を持ったカスタムフォーマットでコメントを表示したければ、wp_list_comments()callback パラメータを渡してください。

最新英語版: WordPress Codex » Migrating Plugins and Themes to 2.7/Enhanced Comment Display最新版との差分