コメントの投稿フォームを追加する

さあ、テキストもいよいよSTEP5に入りました。
ここでは、やはりブログには欠かせない存在の、コメントとトラックバックの機能を追加していきます。

はじめにコメントフォームを追加していきますが、これは、
WordPress レッスンブック 3.x対応STEP5-2の実践になります。
STEP5-1はワードプレスの基本機能、コメント設定についての説明だけですので割愛します。

 
まず、新しくcomments.phpファイルを作成します。

ロリポップのユーザー専用ページ左側の「WEBツール」から「ロリポップ!FTP」をクリック、
「wp-content」→「themes」→「kihon」と進んだら、
上段のアイコン「新規ファイル作成」をクリックします。

ファイル名に「comments.php」と入力、ファイルの属性を「755」と変更したら、
入力画面は空のままで、下の「保存する」ボタンをクリックします。
これで、新たにcomments.phpファイルが作成されました。

 
次に、ワードプレスの管理画面、テーマの編集から、いま追加した
comments.phpファイル(コメントのテンプレート)を開き、下記のソースを追加します。

---------------------
<div id="comments">
<?php comment_form(); ?>
</div>

---------------------

 
続けて、index.phpファイル(メインインデックスのテンプレート)の、
コンテンツブロックの一番下に、下記のソースを追加します。

---------------------
<!– コメントフォーム –>
<?php comments_template(); ?>
<!– コメントフォーム閉じ –>

---------------------

 
最後に、コメント入力フォームの見た目を整えるため、
style.cssファイル(スタイルシート)に、以下のCSSタグを追加します。

---------------------
/* コメント入力フォーム */
#comments { border: solid 1px #0C8BCD; padding: 0px 18px; margin: 20px 0px; }
#comments h3 { font-size: 0.875em; border-bottom: solid 1px #0CiBCD; padding-bottom: 3px; margin-top: 20px; }
#comments p { font-size: 0.75em; }
#comments p a { color: #0C8BCD; }
#comments input, #comments textarea { display: block; }
#comments textarea { width: 450px; }
#comments .required { color: #FF0000; }
#comments code { display: block; margin-top: 5px; font-size: smaller; }

---------------------

 
この作業で完成した画面が↓こちらです。

 
これで、WordPress レッスンブック 3.x対応のSTEP5-2、STEP5-3が完了しました。
 

コメントは停止中です。