Bootstrap5でWordPressのテーマを作るー固定ページ、投稿ページ

Bootstrap5でWordPressのテーマを作るー固定ページ、投稿ページ
, , ,

前回までに、大体のテーマを作ってサーバーにアップロードしました。今回は、固定ページ、投稿ページの仕上げをしていきます。

固定ページ

まず、固定ページから進めます。「main」タグの間に簡単なループを書きます。内容の表示は、固定ページに共通の、content-page.phpを作って表示させます。細かな修正など、メンテナンスが非常に楽になります。

front-page.php

<?php get_header(); ?>
<?php get_template_part('nav'); ?>

<!-- content -->
<div class="content">
    <div class="row">
        <div class="col-md-8">
            <!-- main -->
            <main class="main" role="main">
                <?php 
                while ( have_posts() ) : the_post();
                get_template_part ( 'content', 'page' );
                endwhile; 
                ?>
            </main>
            <!-- /main -->
        </div>
        <!-- /col-md-8 -->

        <?php get_sidebar(); ?>
        <?php get_footer(); ?>

content-page.php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry_header">
        <?php the_title ( '<h2 class="page_title">', '</h2>' ); ?>
    </header><!-- /entry_header -->
    <div class="entry_content">
        <figure class="post-thumbnail">
            <?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid' )); ?>
        </figure>
        <?php the_content(); ?>
    </div><!-- /entry_content -->
</article>

アイキャッチを何もせずに入れるとレイアウトが崩れるケースがあったので、「img-fluid」というBootstrap5のクラスを追加しています。

「front-page.php」をそのままコピーして、「page.php」を作っておきます。固定ページを流用して「404.php」も作っておきましょう。

投稿ページ

続いて投稿ページを仕上げます。「archive.php」、「single.php」も「main」タグの間にループを書きます。固定ページと同様に内容の表示部分は、他の投稿ページと共通の「content.php」を作り表示します。

archive.php

<?php get_header(); ?>
<?php get_template_part('nav'); ?>

<!-- content -->
<div class="content">
    <div class="row">
        <div class="col-md-8">
            <!-- main -->
            <main class="main" role="main">
                <header class="page_header">
                    <?php the_archive_title( '<h2 class="page_title">', '</h2>' ); ?>
                </header><!-- /page_header -->
                <?php 
                if ( have_posts() ) :
                while ( have_posts() ) : the_post();
                get_template_part ( 'content' );
                endwhile; 
                the_posts_pagination ( array(
                    'prev_text' => '←',
                    'next_text' => '→',
                ));
                else :
                    echo '記事はありません';
                endif;
                ?>
            </main>
            <!-- /main -->
        </div>
        <!-- /col-md-8 -->

        <?php get_sidebar(); ?>
        <?php get_footer(); ?>

content.php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <!-- the_title -->
    <header class="entry_header">
        <time class="entry_date published"><?php the_date(); ?></time>
        <?php 
    if ( is_single() ) {
        the_title ( '<h2 class="page_title">', '</h2>' );
    } else {
        the_title ( '<h3 class="entry_title"><a href="' . 
        esc_url ( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
    } 
    ?>
    </header><!-- /entry_header -->
    <!-- thumbnail -->
    <?php if ( has_post_thumbnail() ) : ?>
    <div class="post_thumbnail">
        <?php the_post_thumbnail ( 'large', array( 'class' => 'img-fluid' )); ?>
    </div><!-- /post_thumbnail -->
    <?php endif; ?>
    <!-- content -->
    <div class="entry_content">
        <?php the_content(); ?>
    </div><!-- /entry_content -->
    <!-- tag -->
    <footer class="entry_footer">
        <span class="cat_tags_links">
            <?php the_tags ( '<span class="tags_links">タグ:',', ','</span>'); ?>
        </span>
    </footer><!-- /entry_footer -->
</article>

single.php

<?php get_header(); ?>
<?php get_template_part('nav'); ?>

<!-- content -->
<div class="content">
    <div class="row">
        <div class="col-md-8">
            <!-- main -->
            <main class="main" role="main">
                <?php 
                while ( have_posts() ) : the_post();
                get_template_part ( 'content' );
                the_post_navigation( array(
                    'prev_text' => '<< %title',
                    'next_text' => '%title >>',
                ));
                endwhile; 
                ?>
            </main>
            <!-- /main -->
        </div>
        <!-- /col-md-8 -->

        <?php get_sidebar(); ?>
        <?php get_footer(); ?>

「archive.php」をそのままコピーして、「home.php」と「index.php」を作成しておきます。

まとめ

これで、固定ページと投稿ページの表示ができるようになりました。今回作ったテンプレートの他にも、必要と思うものがありましたら作成して加えてください。
次回は、ヘッダー、サイドバーにウィジェットを仕込むあたりを行おうと思います。どうぞ、お楽しみに。

今回の記事では、こちらの本を参考にしました。初版からお世話になっている、とても良い本です。WordPressの最新の公式テーマをもとに解説されています。第3版のテンプレートファイルの構成が私にはしっくりこなくてやりにくかったので、もっぱら第2版の構成を参考に使わせていただいています。おすすめです。

はじめから、ていねいに。[第3版] 水野史土 (著) エムディエヌコーポレーション