WordPress5速習6(テンプレート階層)

WordPress
2019.12.10

前回一覧表示するところまで作成した。確認してみよう。

トップページにアクセス

個別投稿ページ表示

「３大珍獣の中の１匹」にあるmoreボタンを押してみよう。

レイアウトは同じだが記事が１件になった。これは何が起こったのだろうか？ヒントはリクエストURLにある。

トップページ

個別投稿ページ

メインクエリ

WPはリクエストURLを見てそれはどういったリクエストなのかを判断する。
最初のリクエストはトップページヘのリクエスト。
次に行ったリクエストは個別投稿ページへのリクエスト。
そしてそのリクエストの内容に応じてSQLクエリを発行するのであった。
例えばトップページへのリクエストだったら最新の記事10件(設定から変更可能)をデータベースから取得して、それを結果オブジェクト($wp_query)に詰める。

個別投稿ページへのリクエストだったらその記事１件分を結果オブジェクトに詰めることになる。

こういったリクエストの種類によって発行されるクエリをメインクエリと呼ぶのであった。(くわしくは3回目を参照のこと)

それをWPループで回すのでトップページリクエストは複数件、個別投稿ページのリクエストは１件の表示となる。

ここまではOKだろうか？

single.php

いまはindex.phpしか作っていないので個別投稿表示の内容が文脈にあっていない。説明をする前にまず先にここを修正してしまおう。個別投稿ページを表示するには
single.php
というファイルを作成する。
index.phpと共通部分も多いのでindex.phpを複製し、リネームするとよいだろう。
ファイルの内容は以下。

<?php get_header();?>
    <div id="mainWrapper">
      <div id="mainContents">
        <?php if(have_posts()):?>
          <div id="blogBox">
          <?php while(have_posts()):the_post();?>
            <article class="blogItem">
            <div>
              <h1><?php the_title();?></h1>
              <div class="blogInfo">
              <?php the_category(' ');?>
                <time datetime="<?php the_time('Y-m-d');?>">
                  投稿日:<?php the_time('Y年m月d日(l)');?>
                </time>
              </div>
              <?php the_content();?>
              <nav>
                <span><?php previous_post_link();?></span>
                <span><?php next_post_link();?></span>
              </nav>
            </div>
          </article>
          <?php endwhile;?>
        </div><!-- #blogBox -->
        <?php endif;?>
      </div>
      <aside id="sideContents">

      </aside>
    </div><!--mainWrapper-->
<?php get_footer();?>

解説

テンプレートタグを見ていこう。

the_category(‘ ‘)
これはその記事のカテゴリーを出力する。デフォルトではulタグでマークアップされるが、引数に’ ‘と半角スペースを与えてやるとulでのマークアップをしなくなる。(複数のカテゴリーがあった場合半角スペースで列挙される)

previous_post_link()
一つ前記事のリンクを作成する。
引数を与えないと「«記事のタイトル」という表記になる。

next_post_link()
次の記事のリンクを作成する。
引数を与えないと「記事のタイトル»」という表記になる

上の２つの関数は引数によって同一カテゴリー限定にしたりなど様々にカスタマイズができる。詳しくは公式を参照すること。

main.css

少しだけスタイルをあてておこう。main.cssの末尾に以下を追記する。
(footer以下のハイライト部分を追記)

footer{
  height:50px;
  background-color:#ccc;
  font-size:20px;
  text-align: center;
  line-height: 50px;
}

/***single.php***/
.blogItem h1{
  padding:10px;
  margin-bottom:20px;
  font-size:20px;
  border-bottom:2px solid #aaa;
  border-left:5px solid #aaa;
}
.blogInfo{
  margin-bottom:20px;
}
.blogInfo a{
  display: inline-block;
  padding:8px;
  background: rgb(64, 112, 255);
  color:white;
  border-radius: 5px;
  text-decoration: none;
}
.blogItem p{
  line-height: 1.5;
  margin-bottom:20px;
}

確認

個別投稿ページを表示してみよう。以下のように投稿が表示されれば成功だ。

トップページヘのリンクを追加

テンプレート階層の説明をする前にひとつだけやっておこう。
ページ間を行ったり来たりする際、トップページへのリンクがあると便利だ。
Logoという画像があるところにトップページへのリンクを貼ろう。
header.phpを以下のように修正する。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title><?php bloginfo('name');?></title>
  <link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/css/reset.css">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/css/main.css"/>
  <?php wp_head();?>
</head>
<body>
  <div id="container">
    <header>
      Header
    </header>
    <div id="searchBox">
      <form>
      <input type="text" name="">
      <button type="submit">Search</button>
      </form>
    </div>
    <nav>
      <div id="logo">
        <a href="<?php echo home_url();?>">
          <img src="<?php echo get_template_directory_uri();?>/images/logo.png">
        </a>
      </div>
      <ul>
        <li><a href="">Menu1</a></li>
        <li><a href="">Menu2</a></li>
        <li><a href="">Menu3</a></li>
        <li><a href="">Menu4</a></li>
      </ul>
    </nav>

解説

以下のように記述することでトップページへのリンクを作成することができる。

<a href="<?php echo home_url();?>">

今回はこのリンクをLogoという画像に対して設定した。
クリックしてトップ画面に遷移することを確認してもらいたい。

テンプレート階層

さて少し脱線したが、先程single.phpというのを作成したら個別投稿記事を意図したとおりに表示することができた。特別single.phpを読み込むようにと指示をしていないのになぜだろか？

WPには文脈(リクエストの種類)によって使われるテンプレートの優先順位というのが明確に定められている。

例えば今やった個別投稿ページ表示の優先順位は

優先順位テンプレートファイル名
1single-{post_type}.php
2single.php
3singular.php
4index.php

１はカスタム投稿タイプを使用した場合にもちいるので今は関係ない。
index.phpよりsingle.phpのほうが優先順位が高いのでsingle.phpのテンプレートが適用されたということだ。こういったWPでのテンプレートの優先順位のことをテンプレート階層と呼ぶ。

トップページの場合は？

ではトップページ場合のテンプレート階層を見てみよう。

優先順位テンプレートファイル名
1front-page.php
2固定ページ表示ルール(設定から行う)
3home.php
4index.php

という順番になっている。front-page.phpをつくっておけば確実にそれがトップページのテンプレートとして採用されるということだ。

全部覚えるの！？

この他にも状況によって様々なテンプレート階層がある。
一応公式のリンクを貼っておくが一度に全部覚えようとはせずに出てきたところから少しずつ覚えていくようにすると良いだろう。
ただ、ひとつだけすぐに覚えられることがある。それはindex.phpがあらゆる状況の最後の受け皿ということだ。その状況においてindex.phpより優先度の高いテンプレートファイルがなかった場合index.phpが利用される。
ただ、実際の開発ではindex.phpで表示することはほとんどないということも知っておこう。

front-page.phpの作成

ということで今までindex.phpとして作ってきたファイルを複製してfront-page.phpとしてあげよう。

今後トップページのデザインを変更したい場合はfront-page.phpを変更していくこととなる。

まとめ

第１回から今回まででWPの基本を学んだことになる。
特に押さえてもらいたいのが以下の流れだ。
1.リクエストURLが送信されてくる
2.そのURLを解析してメインクエリを発行してデータベースからデータを持ってくる
3.そのデータを表示するテンプレートをテンプレート階層にしたがって決定する。
4.WPループを用いてコンテンツを完成させる。
この流れをしっかりと頭に焼き付けてもらいたい。

次回は、サイドバーを作っていく。

スポンサーリンク

コメント

タイトルとURLをコピーしました