Everyday Pieces ::
  • Webサービス
  • ブログパーツ
  1. ホーム
  2. WordPress

WordPressのテーマを自作する(17)

2021年8月26日 WordPress, プログラミング テーマ自作

 前回からちょっと間が空いてしまいましたが、
今回はコメントについてやって行きたいと思います。

 ところで、
管理画面の「設定>ディスカッション」にてコメント関連の設定が行えます。
ちなみに自サイトでは以下のような設定にしてあります。

WordPressのコメント設定

 例えば、名前とメールアドレスの入力を必須にチェックを入れると、
入力フォームの「名前」と「メール」の所には * のマークが付いたりしますが、
「コメント」の所には何故か付きません。
入力必須なのは自明なので、あえてやる必要はないとのことなのでしょうが、
個人的には一貫性がないような気がします(^_^;)
そんなわけで、色々といじりたくなってしまったので、カスタマイズしてみます。

 ということで、「Twenty Twenty-One」な標準テーマとかのコードなどを参考にした結果、
comments.php のコードは以下のようになりました。

<?php
if ( post_password_required() ) {
	return;
}
echo '<div id="comments" class="comments-area">';
if ( have_comments() ) {
	printf( '<h2 class="comments-title"><i class="icon-comments"></i> %d件のコメント</h2>', get_comments_number() );
	echo '<ul class="comment-list">';
	wp_list_comments();
	echo '</ul>';
}
$commenter = wp_get_current_commenter(); // コメント者の名前、メールアドレス、サイトアドレス(あれば)。
$req = get_option( 'require_name_email' ); // 名前とメールアドレスの入力が必須かどうか。
$req_attr = ' required';
$req_mark = '<span class="required"><i class="icon-asterisk"></i></span>';
$html5 = current_theme_supports( 'html5', 'comment-form' ); // コメントフォームがHTML5対応になっているかどうか。
comment_form(
	[
		'fields' => [
			'author' => sprintf( '<p class="comment-form-author"><label for="author">名前%s</label><input id="author" name="author" type="text" value="%s" size="30" maxlength="245"%s></p>',
				$req ? $req_mark : '',
				esc_attr( $commenter['comment_author'] ),
				$req ? $req_attr : ''
			),
			'email' => sprintf( '<p class="comment-form-email"><label for="email">メールアドレス%s</label><input id="email" name="email" %s value="%s" size="30" maxlength="100" aria-describedby="email-notes"%s></p>',
				$req ? $req_mark : '',
				$html5 ? 'type="email"' : 'type="text"',
				esc_attr( $commenter['comment_author_email'] ),
				$req ? $req_attr : ''
			),
			'url' => sprintf( '<p class="comment-form-url"><label for="url">サイトアドレス</label><input id="url" name="url" %s value="%s" size="30" maxlength="200"></p>',
				$html5 ? 'type="url"' : 'type="text"',
				esc_attr( $commenter['comment_author_url'] )
			)
		],
		'comment_field' => sprintf(
			'<p class="comment-form-comment"><label for="comment">コメント%s</label><textarea id="comment" name="comment" cols="45" rows="3" maxlength="65525"%s></textarea></p>',
			$req_mark,
			$req_attr
		),
		'comment_notes_before' => sprintf( '<p class="comment-notes"><span id="email-notes">メールアドレスが公開されることはありません。</span>%sが付いている欄は必須項目です。</p>',
			$req_mark
		),
		'comment_notes_after' => '',
		'title_reply_to' => '<i class="icon-reply"></i> %s へ返信',
		'title_reply' => '<i class="icon-comment"></i> コメントする',
		'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
		'title_reply_after' => '</h2>',
		'cancel_reply_link' => 'キャンセル',
	]
);
echo '</div>';

 少々長いコードになってしまっていますが、解説してみます。
まず、 post_password_required() にて投稿のパスワードが必要かどうか、必要なら正しく入力されているかを確認します。
自サイトではパスワードとか設定していないし、そもそも投稿者が管理人しかいません(^_^;)
なので、あえてやる必要は無いのですが、参考にしたコードに従って一応やっておきます。

 次に、コメント一覧を出力します。
have_comments() でコメントがあるか確認します。
get_comments_number() で何件あるかを取得できます。
そして、wp_list_comments() でコメント一覧を出力します。
必要に応じてパラメータを設定できますが、特に何もせずにデフォルトのままにしました。
なお、管理画面の設定で「アバター無し」「コメントの複数ページ分割無し」にしてあるので、それらに関連するコードは省いています。

 続いて、入力フォームを出力します。
wp_get_current_commenter() でコメント者の名前など(あれば)の情報を取得して、フォームの入力値として参照します。
get_option( ‘require_name_email’ ) で名前とメールアドレスの入力が必須かどうかを取得して、必須項目かどうかの印を付ける際などで参照します。
さらに、current_theme_supports( ‘html5’, ‘comment-form’ ) でコメントフォームがHTML5対応になっているか取得しておきます。
対応していれば、<input> 属性の type=”email” や type=”url” などを使うことができるようになります。
なお、theme_supports については後の回の投稿で書いてみる予定でいます。
そして、comment_form() で最終的な入力フォームを出力します。
パラメータを設定することで、フォームの各部品の内容を調整することができます。
多くのパラメータがあるので、かなり細かく調整することが可能ですね。
こちらにある comment_form() のコードを参照すると、より理解が深まると思います。

 次回に続きます。

関連記事
WordPressのテーマを自作する(23) WordPressのテーマを自作する(22) WordPressのテーマを自作する(21) WordPressのテーマを自作する(20) WordPressのテーマを自作する(19) WordPressのテーマを自作する(18) WordPressのテーマを自作する(16) WordPressのテーマを自作する(15) WordPressのテーマを自作する(14) WordPressのテーマを自作する(13) WordPressのテーマを自作する(12) WordPressのテーマを自作する(11) WordPressのテーマを自作する(10) WordPressのテーマを自作する(9) WordPressのテーマを自作する(8) WordPressのテーマを自作する(7) WordPressのテーマを自作する(6) WordPressのテーマを自作する(5) WordPressのテーマを自作する(4) WordPressのテーマを自作する(3) WordPressのテーマを自作する(2) WordPressのテーマを自作する コメント送信をスマートにするWordPressプラグイン WordPressのコメント送信時にメッセージを出す zip.jsを触ってみた(2) atpages.jpで大規模な障害が発生中 Counterize II をカスタマイズ

コメントする キャンセル

アドレスが公開されることはありません。が付いている欄は必須項目です。

投稿ナビゲーション

WordPressのテーマを自作する(16)
WordPressのテーマを自作する(18)

カテゴリー

WordPress つぶやき トピック プログラミング

タグ

AS3 enchant.js FamilyTreeVis Flash Geolocation gif.js kinect Linux MMD MoneyTrackNote notifier.js OpenCV PDFカレンダー RISC-V three.js セキュリティ テーマ自作 ブログパーツ 動物 動画 麻雀

アーカイブ

© katwat