WordPressテーマを自作6

LINEで送る
Pocket

がじです。
WordPressのテーマを自作シリーズの6回目です。
まだまだ完成には程遠いですが、とりあえず最低限の体裁が整ってきたのでこのあたりで一旦打ち止めとさせていただきます。

前回の時点ではまだコメント欄が存在していませんでした。
過疎っているブログなのでコメント欄なくてもいいかなーとか思っていましたが、一応作っておくことにします。

まずはsingle.phpに一行追加するだけです。

               </div><!-- /post -->
                <div class="navigation">
                    <div class="prev"><?php previous_post_link(); ?></div>
                    <div class="next"><?php next_post_link(); ?></div>
                </div>

                <?php comments_template(); ?>  ←コメント欄表示関数を追加

                <?php
                  endwhile;
                else:
                ?>

関数を追加したので、関数の中身をcomment.phpに作成します。

<div id="comment-area">
<?php
  if (have_comments()):
?>
    <h3 id="comments">コメント</h3>
    <ol class="comments-list">
        <?php wp_list_comments( 'avatar_size=55'); ?>
    </ol>
<?php
  endif;

  $args = array( 'title_reply' => 'コメントを残す',
                 'label_submit' => ( 'コメントを送信' )
  );
  comment_form($args);
?>

</div>

実はこの関数がなくてもWordPressは呼び出し側が記述されていれば、デフォルトの設定でコメント欄を作ってくれるのですが、カスタマイズするなら用意したほうがいいです。

で、最後に固定ページ用のファイル、page.phpを作ります。といってもsingle.phpからナビゲーションとか不要なものを削っただけです。

<?php get_header(); ?>
        <div id="main" class="container">
            <div id="posts">
                <?php
                  if (have_posts()) :
                    while (have_posts()) :
                      the_post();
                ?>

                <div class="post">
                    <div class="post-header">
                        <div class="post-content">
                            <?php the_content(); ?>
                        </div>
                    </div>
                </div><!-- /post -->
                <?php comments_template(); ?>
                <?php
                  endwhile;
                else:
                ?>
                <p>記事はありません!</p>
                <?php
                  endif;
                ?>

            </div><!-- posts -->
            <?php get_sidebar(); ?>
        </div><!-- /main -->
        <?php get_footer(); ?>

コメント部分のCSSを設定してなかったのでstyle.cssに追加します。

input {
  border-radius: 2px;
  padding: 2px 2px 2px 2px;
}
#comment-area {
  margin-bottom: 2px;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
  padding: 10px 10px 10px 10px;
}

あと最後にホホ冢次男さんのブログを参考にfontのCSSを丸ゴに設定します。

body{
  font-size: 14px;
  "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
  background-color: #ffffee;
}

画像で見るとこんな感じです。
140520_01

開発はまだ続けますが、連載としてはここまで。
ファイルはこちらからダウンロードしてください。

LINEで送る
Pocket