その他テンプレページ作成

テキスト目次 > WordPressの応用 > その他テンプレページ作成
目次

トップページ用テンプレートfront-page.phpを作成する

トップページ用テンプレートの優先順位です。現在は、トップページを表示するのにindex.phpが使用されているので、こちらを複製してfront-page.phpを作成します。

優先順位テンプレートファイル名備考
1front-page.php ★今から作成
2（フロントページに固定ページを設定している場合）
固定ページに適用されるテンプレート階層が適用される		設定＞表示設定でフロントページにいずれかの固定ページが設定されている必要がある
2home.php設定＞表示設定でフロントページに「最新の投稿」が設定されている場合
4index.php

投稿一覧用テンプレートindex.phpを作成（編集）する

次に、投稿一覧用テンプレートを改めて作成していきます。

投稿一覧ページの優先順位を見ると、home.phpかindex.phpの2つが使えますが、今回は既存のindex.phpを使って投稿一覧ページを表示させることにします。

順位テンプレートファイル名概要
1home.php
2index.php

次に、index.phpの中身を以下のように編集します。

<?php get_header(); ?>
<section id="content">
  <div id="content-wrap" class="container row pt-3">
    <div id="main" class="col-md-9">
      <h1>投稿一覧</h1>
      <hr>
      <?php
      if (have_posts()) :
        while (have_posts()) : the_post();
      ?>
          <h2><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h2>
          <div class="mb-3" id="post-meta">
            <p>作成日時：<?php echo get_the_date(); ?></p>
            <?php the_category(); ?>
          </div>
          <hr>
      <?php
        endwhile;
      endif;
      ?>
    </div>
    <div id="sidebar" class="col-md-3">
      <?php get_sidebar(); ?>
    </div>
  </div>
</section>
<?php get_footer(); ?>
PHP

これで、投稿一覧ページに使用したいテンプレートファイルが準備できました。

管理画面でフロントページと投稿一覧ページの設定をする

この投稿一覧ページをドメイン名/blog（本例ではoriginal.info/blog）にアクセスした際に表示させたい場合は、別途固定ページを用意してあげる必要があります。

以下のように、タイトルとパーマリンク（今回は「blog」とする）のみ設定し、投稿一覧ページ用の固定ページを公開しましょう。

また、トップページ用の固定ページも用意しましょう。タイトル・パーマリンクは何でも問題ありませんが、今回はタイトルを「トップページ」、パーマリンクを「home」としておきます。（※トップページ用の固定ページを用意する理由は後ほど解説します。）

あとは「設定＞表示設定」のホームページの表示から「ホームページの表示」から、「ホームページ」に先ほど作ったトップページ用の固定ページ、「投稿ページ」に投稿一覧ページ用の固定ページを割り当てます。

これで、トップページ（http://original.local）を表示するとfront-page.phpのテンプレートファイルが表示され、「http://original.local/blog」にアクセスすると記事一覧ページ（index.php）が表示されるようになりました。

なお投稿一覧ページ(ここでは/blog/)で11記事以上かある場合は古いものから見えなくなります。ページネーションをつけて表示件数以上を表示させたい場合は、WP-PageNaviというプラグインを使う方法などあります。ご興味がある方は調べてみてください。

なお、「ホームページの表示」箇所で投稿一覧ページのみ設定している場合は、トップページにfront-page.phpが適用されなくなります。

そのため、設定＞表示設定で投稿一覧ページに固定ページを割り当てる際は、トップページ用の固定ページも準備・割り当てるようにしましょう。

トップページと投稿一覧ページは、上記の設定＞表示設定の設定内容によって、適用されるテンプレートが変わるので少し複雑です。

日付別アーカイブページ(archive.php)を作成する

つづいて、日付別の投稿一覧を表示するテンプレートを作成します。

日付別アーカイブページの表示に使用されるテンプレートファイルの優先順位は下記の通りです。

archive.phpを作成すればindex.phpよりも優先されるので、ここでは、archive.phpを作成します。

優先順位テンプレートファイル名概要
1date.phpカスタムテンプレートが選択されている場合
2archive.php ★今回作成
3index.php

これまでと同様にsingle.phpをコピーしてarchive.phpを作成します。

つぎに、archive.phpを下記のように編集します。

<?php get_header(); ?>
<section id="content">
  <div id="content-wrap" class="container row pt-3">
    <div id="main" class="col-md-9">
      <h1>日付別アーカイブ</h1>
      <hr>
      <?php
      if (have_posts()) :
        while (have_posts()) : the_post();
      ?>
          <h2><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h2>
          <div class="mb-3" id="post-meta">
            <p>作成日時：<?php echo get_the_date(); ?></p>
            <?php the_category(); ?>
          </div>
          <hr>
      <?php
        endwhile;
      endif;
      ?>
    </div>
    <div id="sidebar" class="col-md-3">
      <?php get_sidebar(); ?>
    </div>
  </div>
</section>
<?php get_footer(); ?>
PHP

■各関数の意味

関数名意味
get_permalink();記事のパーマリンク(URL)を出力する関数。whileループ内で使用します。
the_title();記事タイトルを出力する関数。whileループ内で使用します。
get_the_date();日付を出力する関数。whileループ内で使用します。

これで「ドメイン/yyyy(西暦を入れる)」のようにアクセスすると、その年月日の一覧が表示されます。

■http://original/2024/にアクセスした際の表示画面

固定ページや投稿ページの作成の際にも以下のループ処理の構文を使いましたが、日付別アーカイブやカテゴリーアーカイブページ、投稿一覧ページなどで使用すると、該当する記事の数だけループが繰り返されるようになります。

2024年に投稿した記事が上の例では3つだったため、http://original.local/2024/で表示される画面には3つの記事情報が取得されていますが、5つあれば5つ、7つあれば7つの投稿情報が表示されます。

なお、繰り返される回数は「設定＞表示設定」の「1ページに表示する最大投稿数」より設定することができます。

カテゴリー別アーカイブページ(category.php)を作成する

つづいて、投稿のカテゴリー一覧を出力する方法を紹介します。

 
カテゴリーアーカイブページの表示に使用されるテンプレートファイルの優先順位は下記の通りです。

順位テンプレートファイル名概要
1category-{slug}.phpカテゴリーのスラッグが news ならば WordPress は category-news.php を探す。
2category-{id}.phpカテゴリー ID が 6 ならば WordPress は category-6.php を探す。
3category.php–
4archive.php–
5index.php–

archive.phpとレイアウトが同じで良い場合は、新たにcategory.phpを作らなくても、archive.phpが適用されるので新規作成する必要はありません。

デザインを変更したい場合だけarchive.phpを複製して作成しましょう。

・・・
<div id="main" class="col-md-9">
  <h1>カテゴリー別アーカイブ</h1> <!-- h1のタイトルだけ変更 -->
  <hr>
  <?php
・・・
PHP

検索結果ページ(seach.php)を作成する

WordPressでは、search.phpファイルを準備してあげることで簡単にページ内の検索結果ページを作成できます。

投稿一覧ページ用に作成したindex.phpファイルを複製して、search.phpを作成しましょう。

search.phpのタイトルには検索されたキーワードが表示されるようにしたいので、the_search_query()関数を使用して以下のように書き換えます。

<div id="main" class="col-md-9">
  <h1>「<?php the_search_query(); ?>」の検索結果</h1>
  <hr>
  <?php
    if (have_posts()) :
      while (have_posts()) : the_post();
  ?>
  ・・・
</div>
PHP

次にheader.phpに記述されている検索フォームのfromタグを作成してみます。

action属性の値にはトップページのURL、method属性には「get」、name属性には「s」を指定します※その他記載のクラス名は主にbootstrap側で用意されているものです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>オリジナルテーマ</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mystyle.css" />
  <!-- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
  <?php wp_enqueue_script('jquery'); ?>
  <?php wp_enqueue_script('bootstrap-js','https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js',array('jquery')); ?>
  <?php wp_head(); ?>
  </head>
  <body>
    <header class="bg-secondary-subtle">
      <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">オリジナルテーマ</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="index.html">HOME</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">ABOUT</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">BLOG</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">CONTACT</a>
              </li>
            </ul>
            <form class="d-flex" role="search" method="get" action="<?php echo esc_url( home_url() ); ?>" name="s">
            <input class="form-control me-2" type="search" name="s" placeholder="Search" aria-label="Search" />
            <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
    </header>
    
    <div id="top-vg" class="container-fluid">
      <img src="<?php echo get_template_directory_uri(); ?>/image/top.jpg" alt="トップページ画像" />
    </div>
PHP

action属性の値を<?php echo esc_url( home_url() ); ?>としていますが、home_url()関数を使用することでトップページのURLを取得することができます。esc_urlは不正な処理を実行しないようにする関数（サニタイズ）です。

以上で、実際に検索をしてみるとそのキーワードが含まれたページのみ検索結果に表示されるようになります。

チェックテスト

チェックテストを確認する

下記の下記４つのファイルを作成し、オンラインテキスト記載の通りのコードを記載し、githubへpushしリモートリポジトリのリンクをdiscordで共有ください。

※push先は以前作成を行ったリモートリポジトリ「wordpress」としてください。

front-page.php
archive.php
category.php
search.php

お問い合わせ

相談などお気軽にお問い合わせ下さい

問い合わせフォーム
TOP