Web

WordPressテーマ開発その3(普通の投稿）

前回まで、、
1設計編
2環境構築編

まずは大体どこのサイトでもあるようなお知らせを作っていきます。

既存の投稿機能を使ってサクッと作ります。
これ自体は普通のブログ投稿と同じようなやり方なので別段難しいことはないかと思います。

目標

（デザインのフォントが大きさがバラバラになってました、すみません、、）

決めたデザインの内容

  • 表示する内容（日付、タイトル）
  • 表示件数（最大5件）
  • リンクから詳細ページに飛んで、詳細ページにNewsの個別の内容を表示させる

がお知らせ部分に表示されるようにし、タイトルから個別の詳細ページに飛ぶことができるようにする。

実装

index.php

 <div class="news__box">
                <?php $args = array(
                    'posts_per_page' => 5//表示させる件数
                );
                $posts = get_posts($args);
                foreach ($posts as $post) :
                    setup_postdata($post);
                ?>
                    <dl class="news__table">

                        <dt><?php echo get_the_date(); ?></dt>//日付
                       
                        <dd><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dd>//タイトル

                    </dl>
                <?php
                endforeach; // ループの終了
                wp_reset_postdata(); // 直前のクエリを復元する
                ?>
            </div>

表示させたい件数を指定し

foreachのなかで、表示させたい内容（日付とタイトルリンク）を回す。

ダッシュボードからひとまず5件投稿を入れてみます。

トップページに戻って表示を確認すると、5件のNews一覧が表示されています。（念の為、6件目も書いてみて、ちゃんと５件までが表示されるか確認します）

トップページに表示するだけでしたらこれで終わりです。
しかし、詳細ページに飛ぶ必要がありますので、

single.phpのファイルを作ります。
これで詳細のページに飛ぶことができます。
ただし、中身を書かなければ、WordPressのダッシュボードに投稿した内容が表示されません。

日付、タイトル、内容を表示させるようにします。

single.php

<?php get_header(); ?>
詳細ページです

<?php echo get_the_date(); ?>//日付
<?php the_title(); ?>//タイトル
<?php the_content(); ?>//記事内容

<?php get_footer(); ?>

これで個別ページも表示でき、トップページも一覧が5件表示することができました。
表示のCSSはよしなにコーディングをしてみてください！
その4に続きます！

-Web