WordPressテーマを自作4

LINEで送る
Pocket

がじです。
連休明けに体調崩して寝込む最低のパターンにはまってました。

WordPressテーマ自作も4回目です。
だんだん辛くなってきましたが、最低限のところまではやってみたいと思います。

今回は、記事投稿を、画面に反映させるところまでをやってみたいと思います。

ではindex.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">
                            <div class="post-image">
                               <img src="img/noimage.png" width="100" height="100"> ←固定画像描画を消去
                                
                <?php if (has_post_thumbnail()) : ?>
                <?php the_post_thumbnail(array(100, 100)); ?>
                <?php else: ?>
                <img src="<?php echo get_template_directory_uri(); ?>/img/noimage.png" width="100" height="100">
                <?php endif; ?>   ←サムネイル画像があれば表示
                            </div>
                        <h2>
                            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>  ←タイトルを表示
                        </h2>
                        <div class="post-meta">
                            <?php echo get_the_date(); ?>【<?php the_category(', '); ?>】 ←カテゴリを表示
                        </div>
                            <div class="post-body">
                            <?php the_excerpt(); ?>    ← 本文抜粋を表示
            </div>
                        </div>
                    </div>
                </div><!-- /post -->

        <?php
          endwhile;
        else:
        ?>

        <p>記事はありません!</p>  ← ループの終了と記事がない時の表示を記述
        <?php
          endif;
        ?>

                <div class="navigation">
                    <div class="prev"><?php previous_posts_link(); ?></div>
                    <div class="next"><?php next_posts_link(); ?></div> ← ページ送り戻しを設定
                </div>
            </div><!-- posts -->
            <?php get_sidebar(); ?>
        </div><!-- /main -->
        <?php get_footer(); ?>
    </body>
</html>

サムネイルを表示させるためにfunctions.phpに一行追加

add_theme_support('post-thumbnails');

フッターを設定

        <div id="footer" class="container">
            Copyright 2013<?php if(date("Y")!=2013) echo date("-Y"); ?> All right reserved, seigaji.info
        </div><!-- footer -->
    <?php wp_footer(); ?>
    </body>
</html>

この状態で表示させたらナビリンクのページ送り戻しのテキストの色がおかしくなったのでstyle.cssに以下の記述を追加

.navigation a:link { color: #fee;}
.navigation a:visited { color: #fee;}

この状態でテーマを適用すると
140511_01
下にスクロールすると
140511_02

ナビリンクのページ先が存在していないときの表示がいまいちおかしいですが、今回はここまで。

ソースはここから取得してください。

LINEで送る
Pocket