【Chapter7】共通パーツと個別投稿ページの作成

概要と目標サイト全体の共通パーツや、
記事の個別ページを作ろう。

ヘッダー、フッター、サイドバーなどのサイト全体の共通パーツや、
記事の一覧ページや個別ページなどのテンプレートファイルを作れるようになりましょう。

今回のゴール

RERUN

テンプレート階層役割によって使用される
テンプレートのファイル名は決まってる。

WordPressでは、表示するページの役割によって、使用されるテンプレートのファイル名は決まっている。
そして、そのファイル名のファイルが存在しない時に、代わりに使用するファイルも決まっている。
どのテンプレートのファイルも存在しない時は、「index.php」を使って表示される。

主なテンプレート階層
ページの種類		テンプレート階層の優先順位 < 高い低い >
ホームページ	最新の投稿	front-page.php		home.php	index.php
ホームページ	固定ページ	front-page.php
投稿インデックスページ		home.php
アーカイブページ	作者ページ	author.php		archive.php
	カテゴリーページ	category.php
	タグページ	tag.php
	月別アーカイブ	date.php
	カスタム投稿タイプページ	archive-[カスタム投稿タイプ名].php
	カスタムタクソノミーページ	taxonomy.php
個別ページ	投稿記事ページ	single-post.php	single.php	singular.php
	カスタム投稿記事ページ	single-[カスタム投稿タイプ名].php
	添付ファイルページ	attachment.php
	固定ページ	page.php
検索結果ページ		search.php
404ページ		404.php

パーツテンプレート

テンプレートファイル以外にも、サイト全体で共通化するパーツも、
決まったファイル名で保存しておくと、簡単に読み込むことが出来る。

パーツテンプレート
共通パーツ	テンプレートのファイル名	読み込む関数
ヘッダー	header.php	`get_header();`
フッター	footer.php	`get_footer();`
サイドバー	sidebar.php	`get_sidebar();`
コメント	comments.php	`get_comments_template();`
検索フォーム	searchform.php	`get_search_form();`

ヘッダーの共通化ヘッダー部分を
header.phpに移動。

サイト全体で使うヘッダーは、header.phpに記述して、
get_header(); 関数で読み込むことで共通化できる。

ヘッダーを共通化してみよう。

get_header (ゲットヘッダー)関数・・・ header.phpを読み込む関数

get_header(ヘッダー名)
             省略可

引数の詳細はWordPress Codex 日本語版を参照

「dummy」内に「header.php」を作成する
「index.php」のヘッダーとして共通化する部分を header.phpにコピーする

dummy/header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
  <header class="l-header p-header">
    <div class="l-container">
      <div class="p-header__info">
        <h1 class="p-header__title"><a href="<?php echo esc_url( home_url() ); ?>" class="p-logo"><?php bloginfo('name'); ?></a></h1>
        <p class="p-header__text"><?php bloginfo('description'); ?></p>
      </div>
      <!-- /.p-header__info -->
      <nav class="p-header__nav">
        <h2 class="screen-reader-text">サイト内メニュー</h2>
        <button class="js-drawer c-button p-hamburger" aria-controls="globalNav" aria-expanded="false">
          <span class="p-hamburger__line">
            <span class="screen-reader-text">メニューを開閉</span>
          </span>
        </button>
        <?php
        $args = [
          'theme_location' => 'global',
          'menu_class'     => 'p-globalNav',
          'menu_id'        => 'globalNav',
          'container'     => false
        ];
          wp_nav_menu($args);
        ?>
      </nav>
    </div>
    <!-- /.p-header__inner -->
  </header>

上書き保存
「dummy」 › 「index.php」をテキストエディタで開く
header部分を、get_header()に置き換える

dummy/index.php

<?php get_header(); ?>
  <div class="l-contents">
    <div class="l-container">
      <main class="l-main">

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
問題なくheader部分が表示されているか、ブラウザで確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

フッターの共通化フッター部分を
footer.phpに移動。

サイト全体で使うフッターは、footer.phpに記述して、
get_footer(); 関数で読み込むことで共通化できる。

フッターを共通化してみよう。

get_footer (ゲットフッター)関数・・・ footer.phpを読み込む関数

get_footer(フッター名)
             省略可

引数の詳細はWordPress Codex 日本語版を参照

「dummy」内に「footer.php」を作成する
「index.php」のフッターとして共通化する部分を footer.phpにコピーする

dummy/footer.php

  <footer class="l-footer">
    <div class="l-container">
      <?php if ( is_active_sidebar( 'footer' ) ) : ?>
      <div class="c-grid -gutter">
        <?php dynamic_sidebar( 'footer' ); ?>
      </div>
      <!-- /.c-grid -->
      <?php endif; ?>
      <p class="l-footer__text"><small>© 2019 Dummy.</small></p>
    </div>
    <!-- /.l-container -->
  </footer>
  <?php wp_footer(); ?>
</body>
</html>

上書き保存
「dummy」 › 「index.php」をテキストエディタで開く
footer部分を、get_footer()に置き換える

dummy/index.php

      </main>
      <?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
      <div class="l-sub">
        <?php dynamic_sidebar( 'sidebar' ); ?>
      </div>
      <!-- /.l-sub -->
      <?php endif; ?>
    </div>
    <!-- /.l-container -->
  </div>
  <!-- /.l-contents -->
<?php get_footer(); ?>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
問題なくfooter部分が表示されているか、ブラウザで確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

サイドバーの共通化サイドバー部分を
sidebar.phpに移動。

サイト全体で使うサイドバーは、sidebar.phpに記述して、
get_sidebar(); 関数で読み込むことで共通化できる。

サイドバーを共通化してみよう。

get_sidebar (ゲットサイドバー)関数・・・ sidebar.phpを読み込む関数

get_sidebar(サイドバー名)
               省略可

引数の詳細はWordPress Codex 日本語版を参照

「dummy」内に「sidebar.php」を作成する
「index.php」のサイドバーとして共通化する部分を sidebar.phpにコピーする

dummy/sidebar.php

<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
<div class="l-sub">
  <?php dynamic_sidebar( 'sidebar' ); ?>
</div>
<!-- /.l-sub -->
<?php endif; ?>

上書き保存
「dummy」 › 「index.php」をテキストエディタで開く
サイドバー部分を、get_sidebar()に置き換える

dummy/index.php

      </main>
      <?php get_sidebar(); ?>
    </div>
    <!-- /.l-container -->
  </div>
  <!-- /.l-contents -->
<?php get_footer(); ?>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
問題なくサイドバー部分が表示されているか、ブラウザで確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

テンプレートパーツの共通化よく使うンポーネントも
テンプレート化。

サイト全体で使うコンポーネントは、外部ファイル化しておくと
get_template_part(); 関数で読み込むことで共通化できる。

テンプレートパーツの共通化してみよう。

get_template_part (ゲットテンプレートパーツ)関数・・・テンプレートパーツ（ヘッダー、サイドバー、フッターを除きます）を読み込む関数

get_template_part(テンプレート名, 特定のテンプレート名)
                                      省略可

引数の詳細はWordPress Codex 日本語版を参照

「dummy」内に「template-parts」フォルダを作成する
「template-parts」フォルダ内に「content.php」を作成する
「index.php」のメディア型コンポートネントの部分を「content.phpにコピーする

dummy/template-parts/content.php

<article class="c-media p-article">
  <div class="c-media__body">
    <h3 class="p-article__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    <?php the_category(); ?>
    <p class="p-article__text"><time datetime="<?php the_time( DATE_W3C ); ?>" class="p-article__time"><?php the_time( get_option( 'date_format' ) ); ?></time></p>
  </div>
  <figure class="c-media__thumbnail">
  <?php if ( has_post_thumbnail() ) : ?>
    <?php the_post_thumbnail( 'dummy-thumbnail' ) ?>
  <?php else : ?>
    <img src="<?php echo esc_url(get_theme_file_uri()); ?>/assets/images/no-picture.png" srcset="<?php echo esc_url(get_theme_file_uri()); ?>/assets/images/no-picture.png, <?php echo esc_url(get_theme_file_uri()); ?>/assets/images/no-picture@2x.png 2x" alt="アイキャッチ画像はありません">
  <?php endif; ?>
  </figure>
  <!-- /.c-media__thumbnail -->
</article>

上書き保存
「dummy」 › 「index.php」をテキストエディタで開く
article部分を、get_template_part()に置き換える

dummy/index.php

<?php if ( have_posts() ) :?>

  <?php while( have_posts() ) : the_post(); ?>

    <?php get_template_part('template-parts/content'); ?>

  <?php endwhile; ?>

  <?php
    // ページネーション
    $args = [
      'prev_text' => '<span class="screen-reader-text">前へ</span>',
      'next_text' => '<span class="screen-reader-text">次へ</span>'
    ];
    the_posts_pagination( $args );
  ?>

<?php else : ?>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
問題なくarticle部分が表示されているか、ブラウザで確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

個別投稿ページの作成記事の詳細ページは、
single.phpを作る。

個別の投稿を専用のページで表示させる場合は、
「single.php」というファイルを作ることで対応できる。

個別投稿ページを作成してみよう。

「wordpress-lessons」 › 「dummy-html」フォルダ内にある、「single.html」を「dummy」内にコピー
「single.html」を「single.php」に名前を変更する
「dummy」 › 「single.php」をテキストエディタで開く

下記のヘッダー部分をインクルードにする

dummy/single.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>記事のタイトル | Dummy</title>
  <link rel="stylesheet" href="assets/css/common.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Quicksand:400,700&display=swap&subset=japanese">
</head>
<body>
  <header class="l-header p-header">
    <div class="l-container">
      <div class="p-header__info">
        <h1 class="p-header__title"><a href="/" class="p-logo">Dummy</a></h1>
        <p class="p-header__text">Just Another</p>
      </div>
      <!-- /.p-header__info -->
      <nav class="p-header__nav">
        <h2 class="screen-reader-text">サイト内メニュー</h2>
        <button class="js-drawer c-button p-hamburger" aria-controls="globalNav" aria-expanded="false">
          <span class="p-hamburger__line">
            <span class="screen-reader-text">メニューを開閉</span>
          </span>
        </button>
        <ul id="globalNav" class="p-globalNav">
          <li><a href="index.html">Home</a></li>
          <li><a href="page.html">About Me</a></li>
          <li><a href="page.html">Works</a></li>
          <li><a href="page.html">Contact</a></li>
        </ul>
      </nav>
    </div>
    <!-- /.p-header__inner -->
  </header>

dummy/single.php

<?php get_header(); ?>

下記のフッター部分をインクルードにする

dummy/single.php

  <footer class="l-footer">
    <div class="l-container">
      <div class="c-grid -gutter">
        <div class="c-grid__item -tab4Of12">
          <aside id="calendar-3" class="p-widget -dark widget_calendar">

            <h2 class="p-widget__title">プロフィール</h2>
            <div class="textwidget custom-html-widget">
              ここにプロフィールの文章。ここにプロフィールの文章。ここにプロフィールの文章。ここにプロフィールの文章。ここにプロフィールの文章。ここにプロフィールの文章。ここにプロフィールの文章。ここにプロフィールの文章。ここにプロフィールの文章。
            </div>
          </aside>
        </div>
        <div class="c-grid__item -tab4Of12">
          <aside id="categories-5" class="p-widget -dark widget_categories">
            <h2 class="p-widget__title">最近の投稿</h2>
            <ul>
              <li>
                <a href="single.html">記事タイトル記事タイトル記事タイトル記事タイトル</a>
                <span class="post-date">2019年6月19日</span>
              </li>
              <li>
                <a href="single.html">記事タイトル記事タイトル記事タイトル記事タイトル</a>
                <span class="post-date">2019年6月19日</span>
              </li>
              <li>
                <a href="single.html">記事タイトル記事タイトル記事タイトル記事タイトル</a>
                <span class="post-date">2019年6月19日</span>
              </li>
              <li>
                <a href="single.html">記事タイトル記事タイトル記事タイトル記事タイトル</a>
                <span class="post-date">2019年6月19日</span>
              </li>
              <li>
                <a href="single.html">記事タイトル記事タイトル記事タイトル記事タイトル</a>
                <span class="post-date">2019年6月19日</span>
              </li>
            </ul>
          </aside>
        </div>

        <div class="c-grid__item -tab4Of12">
          <aside id="archives-3" class="p-widget -dark widget_archive">
            <h2 class="p-widget__title">カテゴリー</h2>
            <ul>
              <li><a href="#">カテゴリ名</a></li>
              <li><a href="#">カテゴリ名</a></li>
              <li><a href="#">カテゴリ名</a></li>
            </ul>
          </aside>
        </div>
      </div>
      <!-- /.c-grid -->
      <p class="l-footer__text"><small>© 2019 Dummy.</small></p>
    </div>
    <!-- /.l-container -->
  </footer>
  <script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="assets/js/app.js"></script>
</body>
</html>

dummy/single.php

<?php get_footer(); ?>

下記のサイドバー部分をインクルードにする

dummy/single.php

      <div class="l-sub">
        <aside class="p-widget -light">
          <h2 class="p-widget__title">サイト内検索</h2>
          <div class="p-widgets__body">
            <form role="search" method="get" class="search-form" action="#">
              <label>
                <span class="screen-reader-text">検索:</span>
                <input type="search" class="search-field" placeholder="検索 …" value="" name="s" />
              </label>
              <input type="submit" class="search-submit" value="検索" />
            </form>
          </div>
          <!-- /.widgets__body -->
        </aside>

        <aside class="p-widget -light">
          <h2 class="p-widget__title">最近の投稿</h2>
          <ul>
            <li>
              <a href="single.html">記事タイトル記事タイトル記事タイトル記事タイトル</a>
              <span class="post-date">2019年6月19日</span>
            </li>
            <li>
              <a href="single.html">記事タイトル記事タイトル記事タイトル記事タイトル</a>
              <span class="post-date">2019年6月19日</span>
            </li>
            <li>
              <a href="single.html">記事タイトル記事タイトル記事タイトル記事タイトル</a>
              <span class="post-date">2019年6月19日</span>
            </li>
            <li>
              <a href="single.html">記事タイトル記事タイトル記事タイトル記事タイトル</a>
              <span class="post-date">2019年6月19日</span>
            </li>
            <li>
              <a href="single.html">記事タイトル記事タイトル記事タイトル記事タイトル</a>
              <span class="post-date">2019年6月19日</span>
            </li>
          </ul>
        </aside>

        <aside class="p-widget -light">
          <h2 class="p-widget__title">カテゴリー</h2>
          <ul>
            <li><a href="#">カテゴリ名</a></li>
            <li><a href="#">カテゴリ名</a></li>
            <li><a href="#">カテゴリ名</a></li>
          </ul>
        </aside>


      </div>
      <!-- /.l-sub -->

dummy/single.php

<?php get_sidebar(); ?>

上書き保存
問題なくテンプレート部分が表示されているか、ブラウザで確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

投稿内容の表示個別ページも
ループで投稿を取得する。

WordPressでは個別ページでもループを使って投稿内容を取得する。

投稿内容を表示してみよう。

「dummy」 › 「single.php」をテキストエディタで開く
ループを記述する。

dummy/single.php

<?php get_header(); ?>

  <?php while ( have_posts() ) : the_post(); ?>
  <div class="l-contents">
    <div class="l-container">
      <main class="l-main">

 </div>
  <!-- /.l-contents -->

  <?php endwhile; ?>
<?php get_footer(); ?>

タイトルを <?php the_title(); ?>に置き換える

dummy/single.php

<h1 class="p-article__title -detail"><?php the_title(); ?></h1>

アイキャッチ画像を表示する

dummy/single.php

<?php if ( has_post_thumbnail()) : ?>
<figure class="p-article__eyecatch">
  <?php the_post_thumbnail(); ?>
</figure>
<?php endif; ?>

記事の公開日時、カテゴリーをテンプレートタグに置き換える

dummy/single.php

<p class="p-article__text">
  <time datetime="<?php the_time( DATE_W3C ); ?>" class="p-article__time">
    <?php the_time( get_option( 'date_format' ) ); ?>
  </time>
</p>
<?php the_category(); ?>

投稿本文を、<?php the_content(); ?>に置き換える

dummy/single.php

<section class="p-article__body">
  <?php the_content(); ?>
</section>

タグを、<?php the_tags(); ?>に置き換える

dummy/single.php

<footer class="p-article__footer">
  <p class="p-article__text"><?php the_tags(); ?></p>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
投稿内容が表示されているかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

著者情報の表示著者情報を表示する
テンプレートタグがある。

著者情報もテンプレートタグを使うことで表示することができる。
著者の情報を表示するテンプレートタグは様々なものがあるが、
今回は、著者の名前を、著者の投稿一覧ページへのリンク付きで表示するthe_author_posts_link() を使う。

著者情報を表示してみよう。

the_author_posts_link (ザオーサーポストリンク)関数・・・投稿者の投稿ページへのリンクを表示する関数

the_author_posts_link()

引数の詳細はWordPress Codex 日本語版を参照

「dummy」 › single.php」をテキストエディタで開く
著者名を、the_author_posts_link()関数で置き換える。

dummy/functions.php

<footer class="p-article__footer">
  <p class="p-article__text"><?php the_tags(); ?></p>
  <section class="p-author">
    <h2 class="p-author__title">この記事を書いた人</h2>
    <p class="p-author__name"><?php the_author_posts_link(); ?></p>
  </section>
</footer>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
著者名が表示されているかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

主な著者情報のその他のテンプレートタグ

表示する情報	関数名
著者名を表示	`the_author()`
著者のメタ情報を表示	`the_author_meta()`

前後の投稿へのリンク前のページへのリンクと、
次のページへのリンクを表示。

個別ページに、前のページへのリンクと、次のページへのリンクを表示する。
前後の投稿へのリンクは、 the_post_navigation()関数を使って表示できる。

前後の投稿へのリンクを表示してみよう。

the_post_navigation (ザポストナビゲーション)関数・・・前後の投稿ナビゲーションメニューを表示する関数

the_post_navigation(オプションの連想配列)
                         省略可

引数の詳細はWordPress Codex 日本語版を参照

主なオプション
キー	値	初期値
`'prev_text'`	前ページリンクの表記	`'%title'`
`'next_text'`	次ページリンクの表記	`'%title'`
`'in_same_term'`	現在の投稿と同じタクソノミーのみを対象にするか	`false`
`'taxonomy'`	タクソノミーの名前を指定（'in_same_term' が true の時のみ有効）	`'category'`
`'screen_reader_text'`	ナビゲーションの見出し	`__( 'Post navigation' )`

「dummy」 › single.php」をテキストエディタで開く
下記を参考に、ナビゲーションをthe_post_navigation()関数で置き換える

dummy/single.php

<footer class="p-article__footer">
  <p class="p-article__text"><?php the_tags(); ?></p>
  <section class="p-author">
    <h2 class="p-author__title">この記事を書いた人</h2>
    <p class="p-author__name"><?php the_author_posts_link(); ?></p>
  </section>
</footer>

<?php
  $args = [
    'prev_text' => '前の記事<br>%title',
    'next_text' => '次の記事<br>%title',
  ];
  the_post_navigation($args);
?>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
前後の投稿へのリンクが表示されているかを確認。

ブラウザでの表示例

RERUN

新しいウインドウで表示する

まとめ共通パーツをテンプレート化したり、
専用ページを作ったりできる。
ヘッダーやフッターなどの共通パーツはテンプレート化できる。
また、個別投稿ページは「single.php」というファイルで作る。

ヘッダーはheader.phpに書いて、get_header()で読み込む
フッターはfooter.phpに書いて、get_footer()で読み込む
サイドバーはsidebar.phpに書いて、get_sidebar()で読み込む
記事の固有ページは、single.phpに書く

Chapter07 共通パーツと個別投稿ページの作成

パーツテンプレート

ヘッダーを共通化してみよう。

フッターを共通化してみよう。

サイドバーを共通化してみよう。

テンプレートパーツの共通化してみよう。

個別投稿ページを作成してみよう。

投稿内容を表示してみよう。

著者情報を表示してみよう。

前後の投稿へのリンクを表示してみよう。