Jizo Games
WordPress

固定ページ・投稿ページ用のテンプレートを作成する

はじめに

今回は新しいテンプレートを二つ作成します。

固定ページ用・投稿ページ用のテンプレートです。これらがあれば、投稿した記事や固定ページを出力することができるようになります。

page.phpを作成する

まずは固定ページ用のテンプレート「page.php」を作成します。

使いまわせる部分は使いまわしたいので、index.phpをコピーしてpage.phpという名前にして保存します。記事を出力するループや、ページ送りなどは使わないので削除しておきましょう。

<?php
if ( ! defined( 'ABSPATH' ) ) exit; ?>
<?php get_header(); ?>
<div class="contents-wrapper container">
    <main role="main" class="main-contents">
    </main>
</div>
<?php get_footer(); ?>

これぐらいならコピーしなくてもよかったかもしれませんが、ここに必要なコードを追加していきます。

<?php
if ( ! defined( 'ABSPATH' ) ) exit; ?>
<?php get_header(); ?>
<div class="contents-wrapper container">
    <main role="main" class="main-contents">
        <?php if ( have_posts() ): the_post(); ?>
            <article class="page-contents">
                <header class="article-header">
                    <h1 class="article-title"><?php the_title(); ?></h1>
                </header>
                <div class="article-body">
                    <?php the_content(); ?>
                </div>
            </article>
        <?php else: ?>
            <p>投稿が見つかりませんでした。</p>
        <?php endif; ?>
    </main>
</div>
<?php get_footer(); ?>

タイトルと内容を表示するだけのシンプルな固定ページになります。the_content()という関数で内容を出力することができます。

現時点では、テストページに固定ページへのリンクが存在していないので確認できないのが残念なところです。

single.phpを作成する

さらに、先ほど作成したpage.phpをコピーしてsingle.phpという名前で保存します。これが、投稿ページ用のテンプレートになります。投稿ページ用のテンプレートは、固定ページ用のテンプレートをもとにサムネイルなど必要なものを追加して作成します。

<?php
if ( ! defined( 'ABSPATH' ) ) exit; ?>
<?php get_header(); ?>
<div class="contents-wrapper container">
    <main role="main" class="main-contents">
        <?php if ( have_posts() ): the_post(); ?>
            <article class="page-contents">
                <header class="article-header">
                    <h1 class="article-title"><?php the_title(); ?></h1>
                    <?php if ( has_post_thumbnail() ): ?>
                        <figure class="article-thumbnail">
                            <?php the_post_thumbnail( 'full' ); ?>
                        </figure>
                    <?php endif; ?>
                    <time class="article-date" datetime="<?php echo get_the_date( 'Y-m-d' ); ?>"><?php echo get_the_date(); ?></time>
                </header>
                <div class="article-body">
                    <?php the_content(); ?>
                </div>
            </article>
        <?php else: ?>
            <p>投稿が見つかりませんでした。</p>
        <?php endif; ?>
    </main>
</div>
<?php get_footer(); ?>

固定ページのテンプレートに、公開日やサムネイルを追加しました。以下のようなHTMLが出力されます（必要な部分を抜粋）。

<article class="page-contents">
    <header class="article-header">
        <h1 class="article-title">テストページその９</h1>
        <figure class="article-thumbnail">
            <img \src="https://xxx" class="wp-post-image" alt="" />
        </figure>
        <time class="article-date" datetime="2025-01-03">2025年1月3日</time>
    </header>
    <div class="article-body">
        <p>ここにテキストがはいりますここにテキストがはいりますここにテキストがはいりますここにテキストがはいりますここにテキストがはいりますここにテキストがはいりますここにテキストがはいりますここにテキストがはいりますここにテキストがはいりますここにテキストがはいります</p>
    </div>
</article>

これで、記事一覧ページで各記事をクリックすると記事を表示することができるようになりました。

CSSでスタイルをあてる

CSSは、必要最小限ですが以下のようなスタイルをあててみました。

.article-header {
    margin-block: 3rem;
}

.article-title {
    display: grid;
    place-content: center;
}

.article-thumbnail {
    border-radius: 16px;
    margin-block: 2rem;
    overflow: hidden;
}

CSSをテーマに適用すると、以下のような見た目になります。

今はテストページなので段落（pタグ）しか使っていませんが、本番環境では見出しタグや画像などを使っていることが多いと思います。必要なスタイルがあれば、適宜style.cssファイルに追加していきます。

おわりに

固定ページ、投稿ページ用のテンプレートを作成することができました。

だいぶテンプレートも増えて、ウェブサイトとしての骨格もできてきたように思います。

とはいえまだまだこれからなので、必要な機能をガンガン追加していきたいですね！

X Facebook LINE Pocket