デイトラweb制作（Word Press化その4）

公開日 2026/9/14 最終更新日 2026/9/14

デイトラの卒業課題を1日（1〜2時間）行なっています。

Newsページを作成する

ノートに記載した仕様書を確認しながら作成して行きます。

ノーションでも良かったと思いました。（個人的には手書きが好きです）

Word Pressの固定ページに各ページを作成する

トップページ（front-page.php）、お知らせ一覧（home.php）の順序とスラッグを設定する

・トップページ

・お知らせ一覧

・カテゴリーを作成する

・投稿ページを作成する（これが一番時間がかかるのでは？）

Newsページを動的にする

home.phpに投稿記事を取得するループコードに変更します。

<div class="p-news-items">

  <?php if (have_posts()) : ?>
      <?php while(have_posts()) : ?>
           <?php the_post(); ?>
                <a href="<?php the_permalink(); ?>" class="p-news-items__card">
                    <div class="p-news-items-card__img">
                        <?php if(has_post_thumbnail()):?>
                            <?php the_post_thumbnail(); ?>
                            <?php else: ?>
                            <img src="<?php echo get_template_directory_uri() ?>/img/no-img.png" alt="">
                        <?php endif; ?>
                    </div>
                    <div class="p-news-items-card__body">
                        <div class="p-news-items-card__meta">
                            <?php
                               $category = get_the_category();
                               if($category[0]) : ?>
                               <div class="p-news-items-card__tag"><?php echo $category[0]->cat_name; ?></div>
                            <?php endif; ?>
                            <time datetime="<?php the_time('c'); ?>" class="p-news-items-card__published"><?php the_time('Y/n/j'); ?></time>
                        </div>
                        <div class="p-news-items-card__title"><?php the_title(); ?></div>
                    </div>
                </a>
     <?php endwhile; ?>
  <?php endif; ?>

</div>

ページネーションを動的にする

・静的に作成したhtml部分を下記に変更します

<?php if(paginate_links()) :?>
    <!-- pagination -->
    <div class="l-front-main__pagination">
        <?php
            echo paginate_links(
                array(
                    'end_size' => 1,
                    'mid_size' => 1,
                    'prev_next' => true,
                    'prev_text' => '<i class="fas fa-angle-left"></i>',
                    'next_text' => '<i class="fas fa-angle-right"></i>',
                )
            );
        ?>
    </div><!-- /pagination -->
<?php endif; ?>

・管理画面で表示する投稿数、ホームのページをトップ、投稿のページをお知らせ一覧と認識させる

パンくずリストを動的にする

・Breadcrumb NavXTのプラグインを使って動的にする

・プラグインに今回作成したデザインを読み込ませる

<div class="l-inner">
        <div class="c-work-breadcrumb">
            <div class="c-work__inner">
                <!-- breadcrumb -->
                <div class="c-breadcrumb">
                    <span property="itemListElement" typeof="ListItem">
                        <a property="item" typeof="WebPage" href="/" class="home">
                        <span property="name">トップ</span></a>
                        <meta property="position" content="1" />
                    </span>
                    <i class="fas c-fa-angle-right"></i>
                    <span class="c-current-item">お知らせ</span>
                </div>
                <!-- /breadcrumb -->
            </div>
        <!-- /inner -->
        </div>
    <!-- /work-breadcrumb -->
</div>

上記のコードを下記に変更する

<div class="l-inner">
        <div class="c-work-breadcrumb">
            <div class="c-work__inner">
            <?php if (function_exists('bcn_display')) : ?>
                <!-- breadcrumb -->
                <div class="c-breadcrumb">
                    <?php bcn_display(); ?>
                </div>
                <!-- /breadcrumb -->
            <?php endif; ?>
            </div>
        <!-- /inner -->
        </div>
    <!-- /work-breadcrumb -->
</div>

・管理画面でBreadcrumb NavXTの設定を変更する

結果

今回はNewsページを動的にしてみました。

初めはarchive.phpで作成していましたが、どうしても一覧のページを表示させることが出来ずに時間が過ぎて行きます。なのでhome.phpに変更して今回は完成させる形になりました。

Word Pressのテンプレート階層を見ても問題ないと思ったのですが中々…次回の課題です！

以上、デイトラweb制作（Word Press化その4）の状況でした。

ご依頼等ありましたら、下記のURLにお問い合わせ下さい。

お問い合わせはこちら

ポートフォリオサイトはこちらになります。

ポートフォリオサイトはこちら

タグ