【Chapter5】投稿一覧を完成させよう

概要と目標投稿一覧の表示を通して、
設定の表示やメインループを知ろう。

まずは、「index.php」を作成し、WordPressの管理画面の設定を反映したり、
メインループの記述方法を学習しましょう。

今回のゴール

RERUN

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

言語の設定「サイトの言語」に合わせて、
lang属性が指定されるようにする。

HTML5では、html要素にlang属性を指定することが推奨されている。
このlang属性は、管理画面の「設定」 › 「一般」の「サイトの言語」に合わせて変更されるようしておくと便利。

言語の設定をしてみよう。

管理画面の「サイトの言語」を反映させるには、
そこで、language_attributes()関数を使うことで実現できる。

language_attributes (ランゲージアトリビュート)関数・・・ WordPressの設定に合わせてlang属性を自動的に出力してくれる関数

language_attributes(HTMLドキュメントの種類)
                            省略可

HTMLドキュメントの種類
・ 'xhtml'（lang="ja" xml:lang="ja"）
・ 'html'（lang="ja"）【初期値】

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

「dummy」 › 「index.php」をテキストエディタで開く
lang属性をlanguage_attributes()に置き換える

dummy/index.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<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">
  <?php wp_head(); ?>
</head>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
ソースコードを表示し、ちゃんとlang属性がついているかを確認

ブラウザでの表示例

RERUN

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

文字エンコーディングの設定 charset属性も、
WordPressに合わせる。

meta要素のcharset属性もWordPressに合わせると便利。

文字エンコーディングの設定をしてみよう。

bloginfo()という関数を使えば、ブログの様々な情報が表示できる。
引数に「charset」と指定すると、文字エンコーディングが表示できる。
なお、WordPress 3.5.0 からはからは常に「UTF-8」を返す。

bloginfo (ブログインフォ)関数・・・サイトのさまざまな情報を表示させる関数

bloginfo(表示する情報)
            省略可

表示する情報 ・・・ 省略時は、サイトのタイトルが表示される

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

表示できる主な項目
引数	説明
`'name'`	「設定」 › 「一般」で指定されたタイトルを表示
`'description'`	「設定」 › 「一般」で指定されたキャッチフレーズを表示
`'charset'`	Version 3.5.0 以降は「UTF-8」と表示その前のバージョンでは、「設定」 › 「表示設定」で指定されたページとフィードのエンコーディングを表示
`'atom_url'`	Atom feed URL (/feed/atom) を表示
`'rss2_url'`	RSS 2.0 feed URL (/feed) を表示

「dummy」 › 「index.php」をテキストエディタで開く
charset属性の属性値bloginfo()に置き換える

dummy/index.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>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
ソースコードを表示し、ちゃんとcharset属性がついているかを確認

ブラウザでの表示例

RERUN

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

body要素のclass設定表示してるページに合わせて、
WordPressがclassを付けてくれる。

WordPressでは、表示しているページや、状態に合わせてCSSで装飾しやすいように、
classを自動で付けてくれる便利な関数がある。

body要素のclass設定をやってみよう。

body_class()という関数を使えば、classを自動で付けてくれる。

body_class (ボディクラス)関数・・・ body 要素に異なる class 属性を付与し、さらに任意のclassを追加もできる関数

body_class(追加したいclass名)
                省略可

追加したいclass名 ・・・ 初期値のほかに追加したいclass名。複数指定するときは（半角）スペースで区切る。（配列でも可）

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

「dummy」 › 「index.php」をテキストエディタで開く
body要素にbody_class()関数を追加する

dummy/index.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(); ?>>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
ソースコードを表示しbody要素に様々なclassがついてることを確認する

ブラウザでの表示例

RERUN

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

body_class()で付加されるclass

body_class()はページや状況によって様々なクラスを付加してくれる。
例えば、サンプルページ（固定ページ）をログインしている状態で表示すれば以下のような出力になる。

<body class="page-template-default page page-id-79 logged-in admin-bar no-customize-support">

タイトルとキャッチフレーズの設定タイトルとキャッチフレーズは、
`bloginfo()`関数で表示できる。

タイトルやキャッチフレーズも直接記述するより、
管理画面で設定されているものをbloginfo()関数で出力するとよい。
また、トップページへのリンクはhome_url()という関数で取得できる。

タイトルとキャッチフレーズの
設定をしてみよう。

タイトルとキャッチフレーズは、bloginfo()関数で表示できる。

「dummy」 › 「index.php」をテキストエディタで開く
下記を参考に、タイトルとキャッチフレーズをbloginfo()関数で表示する。

dummy/index.php

<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"><?php bloginfo('name'); ?></a></h1>
      <p class="p-header__text"><?php bloginfo('description'); ?></p>
    </div>
    <!-- /.p-header__info -->

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
タイトルやキャッチフレーズが表示されているかを確認

ブラウザでの表示例

RERUN

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

トップページへのリンクを設定してみよう。

トップページのURLは、 home_url()という関数を使えば取得できる。
なお、画面に表示する際は、XSS対策を行って出力する。
WordPressでは、esc_html()、esc_attr()、esc_url()などがあり、出力する箇所によって使い分ける。

home_url (ホームユーアールエル)関数・・・ブログのホーム URL を返す関数

home_url(ホームURLからの相対パス, URLに使うスキーム)
                           省略可

・ホームURLからの相対パス ・・・ ホームURLにに引数のパスを追加したURLを返す
・URLに使うスキーム ・・・"http" と "https" と "relative"（相対パス）

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

エスケープ用の関数
関数名	利用用途
`esc_html()`	画面に表示する用
`esc_attr()`	HTMLの属性の値を出力する用
`esc_url()`	URLを出力する用

「dummy」 › 「index.php」をテキストエディタで開く
サイトのトップに戻るリンクを設定する

dummy/index.php

<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 -->

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
ソースコードを表示しサイトのタイトルに、トップページのURLが指定されているかを確認

ブラウザでの表示例

RERUN

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

メインループWordPressでのループを理解することが重要。

WordPressでは、投稿内容を表示するための仕組みがある。
具体的には、WordPressではページにアクセスしたときに、
必要なレコードがデータベースから取得されている。
それを、while文でループをすることで、必要な情報を表示できる。
これをWordPressでは、「メインループ」と呼んでいる。

メインループを使ってみる。

メインループを使うには、 have_posts()という関数を使って、表示する記事があるかをチェックする。
そして、the_post()という関数を使って、グローバル変数の$postに投稿をfetch する。

have_posts (ハブポスト)関数・・・ループできる結果があるかどうかをチェックする関数

have_posts()

戻り値 ・・・ true（成功時）/ false（失敗時）

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

the_post (ザポスト)関数・・・ループ内で参照する投稿データを順番にグローバル変数$postにセットする関数

the_post()

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

「dummy」 › 「index.php」をテキストエディタで開く
have_posts()を使って、表示する記事があるかをチェック

dummy/index.php

<div class="l-contents">
    <div class="l-container">
      <main class="l-main">
        <section class="p-articles">
          <h2 class="c-heading -primary">Blog & News</h2>

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

          <article class="c-media p-article">

          <nav class="navigation pagination" role="navigation">
            <h2 class="screen-reader-text">投稿ナビゲーション</h2>
            <div class="nav-links">
              <a class="prev page-numbers" href="#"><span class="screen-reader-text">前へ</span></a>
              <span aria-current="page" class="page-numbers current">1</span>
              <a class="page-numbers" href="#">2</a>
              <a class="next page-numbers" href="#"><span class="screen-reader-text">次へ</span></a>
            </div>
          </nav>
        <?php else : ?>

          <p>投稿がありません。</p>

        <?php endif; ?>
        </section>
      </main>

have_posts()が trueの間ループし、
必要のない article要素を削除

dummy/index.php

<section class="p-articles">
  <h2 class="c-heading -primary">Blog & News</h2>

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

    <?php while( have_posts() ) : the_post(); ?>
    <article class="c-media p-article">
      <div class="c-media__body">
        <h3 class="p-article__title"><a href="shingle.html">ここに記事のタイトルを2行程度で表示します。ここに記事のタイトルを2行程度で表示します。</a></h3>
        <ul class="post-categories">
          <li><a href="#">カテゴリ名</a></li>
          <li><a href="#">カテゴリ名</a></li>
        </ul>
        <p class="p-article__text"><time datetime="2019-06-01" class="p-article__time">2019.06.01</time></p>
      </div>
      <figure class="c-media__thumbnail">
        <img src="/assets/images/no-picture.png" srcset="/assets/images/no-picture.png, /assets/images/no-picture@2x.png 2x" alt="タイトル">
      </figure>
      <!-- /.c-media__thumbnail -->
    </article>
    <?php endwhile; ?>


    <nav class="navigation pagination" role="navigation">
      <h2 class="screen-reader-text">投稿ナビゲーション</h2>
      <div class="nav-links">
        <a class="prev page-numbers" href="#"><span class="screen-reader-text">前へ</span></a>
        <span aria-current="page" class="page-numbers current">1</span>
        <a class="page-numbers" href="#">2</a>
        <a class="next page-numbers" href="#"><span class="screen-reader-text">次へ</span></a>
      </div>
    </nav>
  <?php else : ?>

    <p>投稿がありません。</p>

  <?php endif; ?>
</section>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
記事の数だけ、article要素が表示されてることを確認

ブラウザでの表示例

RERUN

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

メインループのテンプレート

WordPressでは、ページにアクセスした時に、そのページに必要なレコードをデータベースから取得してくる。
後は、メインループを使ってその内容を出力する。以下がそのメインループの雛形になる。

<?php if ( have_posts() ) : /* 投稿があるかチェック */ ?>

  <?php while( have_posts() ) : /* 投稿がある限り繰り返す */ ?>

  <?php the_post(); /* 投稿を$postにセット */ ?>

    <!--  投稿がある限り繰り返す処理 -->

  <?php endwhile; ?>

<?php else : ?>

  <!-- 投稿がない時の処理 -->

<?php endif; ?>

投稿内容の出力ループ内で使える関数で、
必要な情報を出力。

WordPressでは、テーマ制作に使う関数のことを「テンプレータグ」と呼んでいる。
テンプレータグには、ループ内でしか使えないものも多数数用意されており、
その多くが投稿内容に関する情報である。
これらのテンプレータグをループ内で用いることで、容易にタイトルや公開日時などを出力することができる。
またテンプレートタグを利用しなくても、「$post」オブジェクトに直接アクセスして投稿内容を取得することも出来る。
ループ内で、print_r($post) と記述することで、 $postにどんな項目があるかを確認できる。

投稿内容の出力を行う
テンプレートタグを確認しよう！

ループ内で使用するテンプレートタグの多くは、画面出力用と、取得用の関数がある。
特に手を加えずそのまま出力したい場合は、画面出力用の関数を使い、投稿内容に手を加えたい場合は、取得用の関数を使う。
ただし、取得用の関数を使って取得したデータは無害化されていないため、画面に表示する際はテーマ制作者が無害化する必要がある。

主なループ内で使用するテンプレートタグ
投稿内容	出力用の関数	取得用の関数
投稿のタイトル	`the_title()`	`get_the_title()`
投稿の本文	`the_content()`	`get_the_content()`
投稿の抜粋	`the_excerpt()`	`get_the_excerpt()`
投稿の公開日	`the_date()`	`get_the_date()`
投稿の公開時間	`the_time()`	`get_the_time()`
投稿の更新日	`the_modified_date()`	`get_the_modified_date()`
投稿の更新時間	`the_modified_time()`	`get_the_modified_time()`
投稿のURL	`the_permalink()`	`get_the_permalink()`
投稿者名	`the_author()`	`get_the_author()`
属するカテゴリー	`the_category()`	`get_the_category()`
属するタグ	`the_tags()`	`get_the_tags()`
アイキャッチ画像	`the_post_thumbnail()`	`get_the_post_thumbnail()`

その他の項目はWordPress Codex 日本語版を参照

the_date()の注意点: the_date()は投稿の公開日を出力する関数だが、記事一覧ページなどで利用する際、同じ日に複数の記事がある場合は、最初の記事の1度しか表示されない。
従って、記事一覧ページで利用する場合は、the_time()など違う関数を使うほうがよい。

投稿タイトルの出力ループ内で`the_title()`を使えば、
現在の投稿のタイトルが表示される。

投稿のタイトルは、ループ内で、the_title()関数を使えば表示される。

投稿タイトルを出力してみよう。

the_title関数・・・現在の投稿のタイトルを表示する関数

the_title(タイトルの前に追加する文字, タイトルの後ろに追加する文字, 表示か取得か)
                               省略可

表示か取得か ・・・ true（表示）/false（取得）

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

「dummy」 › 「index.php」をテキストエディタで開く
投稿タイトルをテンプレートタグに置き換える

dummy/index.php

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

<article class="c-media p-article">
  <div class="c-media__body">
    <h3 class="p-article__title"><a href="shingle.html"><?php the_title(); ?></a></h3>
    <ul class="post-categories">
      <li><a href="#">カテゴリ名</a></li>
      <li><a href="#">カテゴリ名</a></li>
    </ul>
    <p class="p-article__text"><time datetime="2019-06-01" class="p-article__time">2019.06.01</time></p>
  </div>
  <figure class="c-media__thumbnail">
    <img src="assets/images/no-picture.png" srcset="assets/images/no-picture.png, assets/images/no-picture@2x.png 2x" alt="タイトル">
  </figure>
  <!-- /.c-media__thumbnail -->
</article>

<?php endwhile; ?>

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

ブラウザでの表示例

RERUN

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

パーマリンクの出力投稿ページへのURLは、
`the_permalink()`で出力できる。

投稿のページのURLは、the_permalink()関数で出力できる。

パーマリンクを出力してみよう。

the_permalink関数・・・現在の投稿のパーマリンクのURLを表示する関数

the_permalink(投稿または固定ページのID、または投稿オブジェクト)
                               省略可

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

「dummy」 › 「index.php」をテキストエディタで開く
href属性をテンプレートタグに置き換える

dummy/index.php

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

<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>
    <ul class="post-categories">
      <li><a href="#">カテゴリ名</a></li>
      <li><a href="#">カテゴリ名</a></li>
    </ul>
    <p class="p-article__text"><time datetime="2019-06-01" class="p-article__time">2019.06.01</time></p>
  </div>
  <figure class="c-media__thumbnail">
    <img src="assets/images/no-picture.png" srcset="assets/images/no-picture.png, assets/images/no-picture@2x.png 2x" alt="タイトル">
  </figure>
  <!-- /.c-media__thumbnail -->
</article>

<?php endwhile; ?>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
投稿のページにリンクされるかを確認

ブラウザでの表示例

RERUN

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

カテゴリーの出力投稿に属するカテゴリーは、
`the_category()`で出力できる。

投稿に属するカテゴリーは、the_category()関数で出力できる。
カテゴリーは、カテゴリーページのリンク付きで表示される。

投稿に属するカテゴリーを出力してみよう。

the_category()関数・・・現在の記事が属するカテゴリーへのリンクを表示する関数

the_category(区切り文字, 親子の表示, 投稿ID)
                        省略可

区切り文字 ・・・ カテゴリーへのリンクを区切る文字列や記号。空の文字列を指定すると 順不同型リストになる【初期値】
親子の表示 ・・・ 'multiple'（親と子のリンクを別々に表示）、'single'（子カテゴリーのリンクのみを表示）。空の文字列を指定すると 親子関係は表示しない【初期値】

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

「dummy」 › 「index.php」をテキストエディタで開く
カテゴリーをテンプレートタグに置き換える

dummy/index.php

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

<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="2019-06-01" class="p-article__time">2019.06.01</time></p>
  </div>
  <figure class="c-media__thumbnail">
    <img src="assets/images/no-picture.png" srcset="assets/images/no-picture.png, assets/images/no-picture@2x.png 2x" alt="タイトル">
  </figure>
  <!-- /.c-media__thumbnail -->
</article>

<?php endwhile; ?>

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

ブラウザでの表示例

RERUN

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

カテゴリーの表示形式: the_category()関数は、デフォルトでは順不同型リストで表示される。
そのul要素には「post-categories」というclassが指定されるので、スタイルを設定する場合は、「post-categories」クラスにスタイルを当てるとよい。

公開日の出力投稿の公開日は、
`the_time()`がおすすめ。

投稿の公開日は、the_date()や、the_time()関数で出力できる。
ただし、the_date()関数は、同じ日の投稿が複数ある場合、最初の1回しか公開日が表示されない。
そのため、the_time()関数を用いるか、get_the_date()関数をechoするほうがよい。
なお、the_time()を用いて、管理画面に設定されている日付フォーマットで表示する場合は、get_option( 'date_format' )で、設定を取得し、引数に設定することで表示できる。

投稿に属するカテゴリーを出力してみよう。

the_time()関数・・・現在の投稿の公開時刻を表示する関数

the_time(フォーマット)
            省略可

フォーマット ・・・ PHPのdate()関数と同じフォーマットが使える。 省略時は公開時刻になる【初期値】

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

get_option()関数・・・ options テーブルからオプションの値を安全に取得する関数

get_option(オプション名)

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

主なオプション名
オプション名	説明
`date_format`	日付のフォーマット
`template`	現在のテーマ名
`posts_per_page`	1ページに表示する最大投稿数

「dummy」 › 「index.php」をテキストエディタで開く
公開日をテンプレートタグに置き換える

dummy/index.php

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

<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">
    <img src="assets/images/no-picture.png" srcset="assets/images/no-picture.png, assets/images/no-picture@2x.png 2x" alt="タイトル">
  </figure>
  <!-- /.c-media__thumbnail -->
</article>

<?php endwhile; ?>

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

ブラウザでの表示例

RERUN

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

カテゴリーの表示形式: the_category()関数は、デフォルトでは順不同型リストで表示される。
そのul要素には「post-categories」というclassが指定されるので、スタイルを設定する場合は、「post-categories」クラスにスタイルを当てるとよい。

アイキャッチ画像の出力アイキャッチ画像がある投稿は、
`the_post_thumbnail()`で表示する。

アイキャッチ画像は、the_post_thumbnail()で表示できる。
ただし、アイキャッチ画像を設定していない投稿にも対応するため、
has_post_thumbnail()でアイキャッチ画像があるかを確認し、
設定されている場合のみ表示する。

アイキャッチ画像を出力してみよう。

the_post_thumbnail()関数・・・現在の投稿のアイキャッチ画像を表示する関数

the_post_thumbnail(サイズ, 属性)
                       省略可

サイズ ・・・ キーワード（'thumbnail', 'medium', 'large', 'full'）または、 add_image_size() で定義したカスタムサイズのキーワード、もしくは幅と高さをピクセルで指定する要素2つの配列
属性 ・・・  imgタグに含める属性/値を配列で記述

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

has_post_thumbnail()関数・・・投稿にアイキャッチ画像が設定されているかチェックする関数

has_post_thumbnail(投稿ID)
                    省略可

戻り値 ・・・ true（ある）/false（ない）

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

「dummy」 › 「index.php」をテキストエディタで開く
アイキャッチ画像が設定するかを確認する

dummy/index.php

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

<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 else : ?>
    <img src="assets/images/no-picture.png" srcset="assets/images/no-picture.png, assets/images/no-picture@2x.png 2x" alt="タイトル">
  <?php endif; ?>
  </figure>
  <!-- /.c-media__thumbnail -->
</article>

<?php endwhile; ?>

アイキャッチ画像があるときだけ、アイキャッチ画像を表示

dummy/index.php

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

<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([248, 175]) ?>
  <?php else : ?>
    <img src="assets/images/no-picture.png" srcset="assets/images/no-picture.png, assets/images/no-picture@2x.png 2x" alt="タイトル">
  <?php endif; ?>
  </figure>
  <!-- /.c-media__thumbnail -->
</article>

<?php endwhile; ?>

アイキャッチ画像が設定されていない時用の画像を表示する

dummy/index.php

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

<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([248, 175]) ?>
  <?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>

<?php endwhile; ?>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
アイキャッチ画像が表示されているかを確認

ブラウザでの表示例

RERUN

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

imgタグにclassを付けるには

the_post_thumbnail()の第2引数は、imgタグに付ける属性を指定できる。
属性の指定は、配列形式（属性名 => 属性値）で指定するので、classを指定しする場合は、以下のようになる。

dummy/index.php

<?php the_post_thumbnail( 'thumbnail', array( 'class' => 'c-media__image' ) ); ?>

まとめテーマ制作に便利な
テンプレートタグがたくさんある。
WordPressにはテーマ制作に使える便利なテンプレートタグがたくさんある。
これからを使うことで、容易に管理画面の設定内容や投稿の情報を出力できる。

管理画面の設定を出力する、テンプレートタグがある
投稿内容はメインループで表示する
ループ内でしか使えないテンプレートタグもある

Chapter05 投稿一覧を完成させよう

言語の設定をしてみよう。

文字エンコーディングの設定をしてみよう。

body要素のclass設定をやってみよう。

タイトルとキャッチフレーズの設定をしてみよう。

トップページへのリンクを設定してみよう。

メインループを使ってみる。

投稿内容の出力を行うテンプレートタグを確認しよう！

投稿タイトルを出力してみよう。

パーマリンクを出力してみよう。

投稿に属するカテゴリーを出力してみよう。

投稿に属するカテゴリーを出力してみよう。

アイキャッチ画像を出力してみよう。

タイトルとキャッチフレーズの
設定をしてみよう。

投稿内容の出力を行う
テンプレートタグを確認しよう！