ホームページを作ろう!WordPress編(15)コメント欄を作る

0

    JUGEMテーマ:ホームページ作成
    JUGEMテーマ:wordpress

    w064

    それでは、引き続いてコメント欄を作っていきましょう。

    今回はこちらの「WordPressテーマの作り方」様を参考に作りました。

    コメント欄はブログ、ギャラリー、ダウンロードに共通のものなので、テンプレートファイルとして作っておき、各singleページから呼び出して使うようにします。ファイル名をcomments.phpとして、以下のコードを書いていきます。

    <?php
    if (post_password_required()) {
    	return;
    }
    ?>
    <div id="comments">
    <?php if (have_comments()) :?>
    <h3 id="comments-count"><?php echo get_comments_number().' 件のコメント'; ?></h3>
    <ul id="comments-list">
    <?php wp_list_comments(array(
    	'style'=>'ul',
    )); ?>
    </ul>
    <?php if (get_comment_pages_count() > 1) : ?>
    <ul id="comments-pagination">
    	<li id="prev-comments"><?php previous_comments_link('<< 前のコメント'); ?></li>
    	<li id="next-comments"><?php next_comments_link('次のコメント >>'); ?></li>
    </ul>
    <?php endif; endif; ?>
    <?php comment_form(); ?>
    </div>

    1〜5行目:パスワードロックされた投稿の場合、コメント欄も表示しないように弾いています。

    7〜19行目:コメントがある場合に、これを表示するループです。

    8行目:コメントの件数を表示します。

    9〜13行目:wp_list_commtns()は該当するコメント一式を全文表示するテンプレートタグです。設定項目が3つしかないようにみえますが、実はこれ以外の項目は管理画面から設定できるようになっています。詳細はあとでご説明します。

    14〜19行目:コメントが複数ページに渡った場合のページネーションを表示します。previous_comments_link()とnext_comments_link()で前と次のコメントのリンクが出力されるようになっています。

    20行目:コメント入力フォームを表示します。

    ここまで入力したら、single.php、single-gallery.php、single-download.phpそれぞれに次の1行を追加します。

    <?php comments_template(); ?>

    本当はcomments.phpは無くてもこの1行だけ書けば、デフォルトの設定で何やらコメント欄を作ってはくれるのですが、自分の好みに体裁を整えようと思ったらやはり自分で作るのが一番でしょう。出来上がりはこうなります。

    w065

    体裁は少しCSSでいじっています。

    #comments li.comment{
    	border: 1px solid #77543a;
    	margin: 5px 5px 5px 0;
    	padding: 5px 5px 5px 10px;
    	list-style-type: none;
    } 

    一つ一つのコメントに枠を付けて、マージンとパディングで隙間を調節しています。

    それからコメント入力欄の上に見える画像認証は、SiteGuard WP Pluginが勝手に入れてくれたものです。消したい場合はそちらのプラグインで設定することになります。

    こうしてみると、複雑な処理はみんなテンプレートタグがやってくれて、こちらはテンプレートタグを配置すればいいだけになってるんですね。とーーーっても便利です。

    さて最後に、管理画面での設定を確認しておきましょう。コメントに関連する設定は2か所にあります。1つは設定→ディスカッション。もう一つはそれぞれの投稿ページです。まず「設定→ディスカッション」から。

    w066aw066bw066c

    コメントやトラックバックの許可に関する「デフォルト設定」、コメント表示数等を設定する「他のコメント設定」、メール通知要否、表示条件、それからスパム対策のモデレーションとブラックリスト、アバター要否等を設定することができます。ここで、他のコメント設定にあるコメント表示順ですが、新しいコメントを上にしたい場合は、「新しいコメントを各ページのトップ・・・」と「最初のページをデフォルトで・・」とすればOKです。

    えー、最初造った時はもう少し手こずった気がしていたのですが、出来上がってみると単純明快、素直なものですね。

    次回は以前つくったサイドバーを修正し、各ページごとに違うサイドバーが表示されるようにしてみます。


    コメント
    コメントする








       

    calendar

    S M T W T F S
    1234567
    891011121314
    15161718192021
    22232425262728
    2930     
    << September 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天