投稿されたコメントを表示する

STEP5-2で追加したコメントフォームを利用してコメントを投稿しても、
いまのままでは、投稿されたコメントは表示されません。
送信されたコメントを表示させる作業をおこなっていきます。

 
まず、comments.phpファイル(コメントのテンプレート)に、
下記のソースを追加します。

---------------------
<?php if(have_comments()): ?>
<h3>コメント</h3>
<ul>
<?php wp_list_comments(‘callback=mydesign’); ?>
</ul>
<?php endif; ?>

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

 
次に、投稿されたコメントがすっきりと表示できるよう、出力をカスタマイズしていきます。
functions.phpファイル(テーマのための関数)に、下記のソースを追加します。

---------------------
//受信したコメント
function mydesign($comment, $args, $depth) { $GLOBALS['comment'] = $comment; ?>
<li class="compost">
<?php comment_text(); ?>
<p class="cominfo">
<?php comment_date(); ?> <?php comment_time(); ?>
 by
<?php comment_author_link(); ?>
</p>
<?php
}

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

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

---------------------
/* コメント表示 */
#comments ul { margin: 0px; padding: 0px; }
#comments li.compost { list-style-type: none; border-bottom: dotted 1px #0C8BCD; margin-bottom: 20px; }
#comments p.cominfo { text-align: right; }

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

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

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

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

さあ、テキストもいよいよ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が完了しました。
 

RSSフィードへのリンクを追加する

ブログ読者に効率よく更新情報をお知らせしたりできる機能、
RSSフィードへのリンクを追加します。

ちなみに、自分はカレンダー機能は使わないため、
WordPress レッスンブック 3.x対応STEP4-6の作業は省きました。
カレンダーを表示させるためには、やたらと長いコードが必要となって鬱陶しいので、
カレンダー機能が不要ならば、飛ばしてしまったほうがいいかも。
自分はよくカレンダーが表示されている場所に、広告を載せているので、
無料ブログサービスでもほとんど、カレンダー機能は使っていません。

 
さて、RSSフィードへのリンクを追加するにあたって、
視覚的にRSSフィードリンクだとわかりやすいように、アイコンを用意します。
アイコンは、Feed Iconsから、28×28ピクセルのRSSフィードアイコンをダウンロードします。
そのアイコンを、テーマフォルダ(ここではkihon)にアップロードしておきます。

次に、index.phpファイル(メインインデックスのテンプレート)の、
サイドバーブロック内に、下記のソースを追加します。

---------------------
<p class="feed">
<img src="<?php bloginfo(‘template_url’); ?>/feed-icon-28×28.png" alt="*" width="28" height="28" />
<a href="<?php bloginfo(‘rss2_url’); ?>">RSS FEED</a>
</p>

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

 
次に、ブラウザやRSSリーダーが、RSSフィードを自動検出できるように、
index.phpファイル(メインインデックスのテンプレート)の、
headの中に、下記のソースを追加します。

---------------------
<link rel="alternate" type="application/rss+xml" title="RSS フィード" href="<?php bloginfo(‘rss2_url’); ?>" />
---------------------

 
最後に、RSSフィードリンクの見た目を整えるため、
style.cssファイル(スタイルシート)に、以下のCSSタグを追加します。

---------------------
/* RSSフィード */
p.feed { font-size: 0.75em; font-family: verdana, Helvetica, sans-serif;
border: solid 1px #BBBBBB; padding: 3px; margin: 25px 0px; }
p.feed a { color: #444444; text-decoration: none; }
p.feed img { vertical-align: middle; margin-right: 3px; }

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

 
この作業で完成した画面が↓こちらです。
ブラウザのツールバーでも、RSSフィードボタンが使えるようになっているのがわかります。

 
これで、WordPress レッスンブック 3.x対応のSTEP4-7が完了しました。
次は、ステップ5に入ります。