2023-03-08
WordPress 開発の基本

WordPressの［固定ページ］を表示！初心者でもわかるpage.php

Featured image of the post
💡
目次
概要 準備 作成手順 ①ファイルの作成 ②画像の用意（必要な場合のみ） ③ファイルの中身を記述 具体例 お問い合わせフォームを作る

概要

page.phpは［固定ページ］で作った記事を表示するメインテンプレートファイル。

関連記事

📄 WordPress開発初心者必見！テンプレートファイルとは何かを解説

🔴 WordPressテーマの作り方を徹底解説！具体的な手順つき

【補足】page.phpがないとどうなる…？

page.phpがない状態で［固定ページ］を表示してもエラーにならない！

page.phpの代わりにindex.phpが表示される✅

準備

事前に以下のファイルを作っておく。

  • ヘッダー（header.php）
  • フッター（footer）

関連記事

📄 WordPressのテーマに必須！初心者でもわかるheader.php

📄 WordPressのテーマに必須！初心者でもわかるfooter.php

作成手順

以下の手順で作成する。

①ファイルの作成
  • 「page.php」という空のファイルを作成する。

💡
保存場所はテーマディレクトリの直下。
wordpressフォルダ/wp-content/themes/TestTheme

②画像の用意（必要な場合のみ）
  • 使用する画像をテーマディレクトリ内に用意しておく。
  • 分かりやすいようにテーマディレクトリの直下に「img」ディレクトリを作成し、その中に保存しておくといい。
Image in a image block

💡
投稿で使われる「wp-content/uploads」とは違うディレクトリなので注意！
「img」にはサイト全体で使う画像を入れておく✅

③ファイルの中身を記述
  • 「page.php」には［投稿］で作った記事を表示する内容を書く。

イメージ
Image in a image block

WordPress化する前のHTML 
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>------------------------------------------------------------</p>
    <p>これはヘッダーです</p>
    <p>------------------------------------------------------------</p>

👆ここまでヘッダー（header.php）

		<main>
        <h1>固定ページ01</h1>
				<p>これは固定ページのテストです。これは固定ページのテストです。これは固定ページのテストです。これは固定ページのテストです。これは固定ページのテストです。これは固定ページのテストです。これは固定ページのテストです。これは固定ページのテストです。これは固定ページのテストです。これは固定ページのテストです。これは固定ページのテストです。これは固定ページのテストです。これは固定ページのテストです。これは固定ページのテストです。</p>
    </main>

👇ここからフッター（footer.php）

    <p>------------------------------------------------------------</p>
    <p>これはフッターです</p>
    <p>------------------------------------------------------------</p>
  </body>
</html>

WordPress化した後のPHP 
👇ヘッダー（header.php）を読み込む
<?php get_header(); ?>

<main>
		👇メインループ（必ず書く決り文句）
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
				👇記事のタイトル
        <h1><?php the_title(); ?></h1>
				👇記事の本文
        <?php the_content(); ?>
    <?php endwhile; endif; ?>
</main>

👇フッター（footer.php）を読み込む
<?php get_footer(); ?>

具体例

実用的なpage.php

先ほどの例でも最低限の内容は表示できているが、より多くのデータを表示することができる✅

基本的にはsingle.phpと同じで問題ない。

イメージ
Image in a image block

page.php 
<?php get_header(); ?>

<div id="container" class="wrapper">
    <main class="col-md-12">
        <!-- 投稿があるとき -->
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <?php
            // カテゴリー名を取得
            $cat = get_the_category();
            $catname = $cat[0]->cat_name;
            ?>
            <article>
                <!-- 記事へのリンク付きのタイトルを表示 -->
                <h1 class="article-title">
                    <a href="<?php the_permalink(); ?>"><?php the_title() ?></a>
                </h1>
                <ul class="meta">
                    <!-- 投稿日、カテゴリー名を表示 -->
                    <li>投稿日：<?php the_time('Y/m/d'); ?></li>
                    <li>更新日：<?php the_modified_date('Y/m/d'); ?></li>
                    <li>カテゴリー：<?php echo $catname; ?></li>
                </ul>
                <!-- サムネイル(アイキャッチ)を表示 -->
                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                <!-- 本文を表示 -->
                <div class="text"><?php the_content(); ?></div>
            </article>
        <?php endwhile;
        endif; ?>

        <ul class="post-link">
            <li><?php previous_post_link('%link', '< 前の記事へ'); ?></li>
            <li><?php next_post_link('%link', '次の記事へ >'); ?></li>
        </ul>
    </main>
</div>

<?php get_footer(); ?>

🚫 ただいま記事作成中です💭

【補足】single.phpと異なる点
  • ［固定ページ］はカテゴリー、タグの設定ができない。
    • カテゴリーやタグの表示処理は不要！

💡
WordPress用の関数を使うと、［固定ページ］の情報を自由に表示できる！

お問い合わせフォームを作る
関連記事

🚫 ただいま記事作成中です💭