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版の構成を参考に使わせていただいています。おすすめです。
