【Chapter8】コメントと固定ページの作成

概要と目標コメント部分のテンプレートや、
固定ページのテンプレートを作ろう。

投稿に対するコメント部分のテンプレートや
個別ページのテンプレートファイルの作成方法を学習しましょう。

今回のゴール

RERUN

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

コメントテンプレートコメント用の
テンプレートを作成する

コメント用のテンプレートファイルは、「comments.php」というファイルに作り、
comments_template() 関数で読み込むことことができる。

コメントフォームの
テンプレートファイルを作成してみよう。

comments_template (コメントテンプレート)関数・・・コメントテンプレートを読み込む関数

comments_template(読み込むファイル名, コメントを区切るかどうか)
                             省略可

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

「dummy」内に「comments.php」を作成する
「dummy」 › 「comments.php」をテキストエディタで開く
single.php」内のコメント部分（「.p-comments」）を、「comments.php」に移動する

dummy/comments.php

<section class="p-comments">
  <div class="p-comments__innter">
    <h2 class="p-comments__title">コメントとトラックバック</h2>

    <ul class="p-comments__list">
      <li id="comment-2" class="comment byuser comment-author-ore bypostauthor even thread-even depth-1">
        <article id="div-comment-2" class="comment-body">
          <footer class="comment-meta">
            <div class="comment-author vcard">
              <img class="avatar" src="http://placehold.it/130x130">
              <b class="fn">著者名</b> <span class="says">より:</span>
            </div><!-- .comment-author -->

            <div class="comment-metadata">
              <a href="#">
                <time datetime="2019-09-30T09:42:46+09:00">
                  2019年9月30日 9:42 AM </time>
              </a>
              <span class="edit-link"><a class="comment-edit-link" href="#">編集</a></span> </div><!-- .comment-metadata -->

          </footer><!-- .comment-meta -->

          <div class="comment-content">
            <p>コメント。コメント。コメント。コメント。コメント。コメント。</p>
          </div><!-- .comment-content -->

          <div class="reply">
            <a rel="nofollow" class="comment-reply-link" href="#comment-2" data-commentid="2" data-postid="104" data-belowelement="div-comment-2" data-respondelement="respond" aria-label="返信">返信</a>
          </div>
        </article><!-- .comment-body -->
      </li><!-- #comment-## -->
      <li id="comment-3" class="comment byuser comment-author-ore bypostauthor odd alt thread-odd thread-alt depth-1 parent">
        <article id="div-comment-3" class="comment-body">
          <footer class="comment-meta">
            <div class="comment-author vcard">
              <img class="avatar" src="http://placehold.it/130x130">
              <b class="fn">著者名</b> <span class="says">より:</span>
            </div><!-- .comment-author -->

            <div class="comment-metadata">
              <a href="#">
                <time datetime="2019-09-30T09:42:56+09:00">
                  2019年9月30日 9:42 AM </time>
              </a>
              <span class="edit-link"><a class="comment-edit-link" href="#">編集</a></span> </div><!-- .comment-metadata -->

          </footer><!-- .comment-meta -->

          <div class="comment-content">
            <p>
              コメント。コメント。コメント。コメント。<br />
              コメント。コメント。コメント。
            </p>
          </div><!-- .comment-content -->

          <div class="reply">
            <a rel="nofollow" class="comment-reply-link" href="#comment-3" data-commentid="3" data-postid="104" data-belowelement="div-comment-3" data-respondelement="respond" aria-label="返信">返信</a>
          </div>
        </article><!-- .comment-body -->
        <ul class="children">
          <li id="comment-5" class="comment byuser comment-author-ore bypostauthor even depth-2">
            <article id="div-comment-5" class="comment-body">
              <footer class="comment-meta">
                <div class="comment-author vcard">
                  <img class="avatar" src="http://placehold.it/130x130">
                  <b class="fn">著者名</b> <span class="says">より:</span>
                </div><!-- .comment-author -->

                <div class="comment-metadata">
                  <a href="#">
                    <time datetime="2019-09-30T19:24:15+09:00">
                      2019年9月30日 7:24 PM </time>
                  </a>
                  <span class="edit-link"><a class="comment-edit-link" href="#">編集</a></span> </div><!-- .comment-metadata -->

              </footer><!-- .comment-meta -->

              <div class="comment-content">
                <p>これが返信だ</p>
              </div><!-- .comment-content -->

              <div class="reply">
                <a rel="nofollow" class="comment-reply-link" href="#comment-5" data-commentid="5" data-postid="104" data-belowelement="div-comment-5" data-respondelement="respond" aria-label="返信">返信</a>
              </div>
            </article><!-- .comment-body -->
          </li><!-- #comment-## -->
        </ul><!-- .children -->
      </li><!-- #comment-## -->
      <li id="comment-4" class="comment byuser comment-author-ore bypostauthor odd alt thread-even depth-1">
        <article id="div-comment-4" class="comment-body">
          <footer class="comment-meta">
            <div class="comment-author vcard">
              <img class="avatar" src="http://placehold.it/130x130">
              <b class="fn">著者名</b> <span class="says">より:</span>
            </div><!-- .comment-author -->

            <div class="comment-metadata">
              <a href="#">
                <time datetime="2019-09-30T09:43:06+09:00">
                  2019年9月30日 9:43 AM </time>
              </a>
              <span class="edit-link"><a class="comment-edit-link" href="#">編集</a></span> </div><!-- .comment-metadata -->

          </footer><!-- .comment-meta -->

          <div class="comment-content">
            <p>コメント。コメント。コメント。</p>
          </div><!-- .comment-content -->

          <div class="reply">
            <a rel="nofollow" class="comment-reply-link" href="#comment-4" data-commentid="4" data-postid="104" data-belowelement="div-comment-4" data-respondelement="respond" aria-label="返信">返信</a>
          </div>
        </article><!-- .comment-body -->
      </li><!-- #comment-## -->
    </ul>

    <section class="p-comments__form">
      <div id="respond" class="comment-respond">
        <h3 id="reply-title" class="comment-reply-title">コメントを残す</h3>
        <p class="comment-notes">メールアドレスが公開されることはありません。 * が付いている欄は必須項目です</p>
        <form action="#" class="comment-form">
          <p class="logged-in-as">
            <a href="#" aria-label="著者名 としてログイン中。プロフィールを編集。">著者名 としてログイン中</a>。
            <a href="#">ログアウトしますか ?</a>
          </p>
          <p class="comment-form-comment">
            <label for="comment">コメント</label>
            <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea>
          </p>
          <p class="form-submit">
            <input name="submit" type="submit" id="submit" class="submit" value="コメントを送信" />
          </p>
        </form>
      </div><!-- #respond -->
    </section>
  </div>
</section>

上書き保存

コメントのテンプレートを読み込もう

コメントは、は、管理画面でコメントが許可されている、もしくは、1つ以上のコメントがある時だけ、必要なので、comments_open() と、get_comments_number() を使って、どっちもの条件が満たされている時だけ、コメントのテンプレートを読み込む。

comments_open (コメントオープン)関数・・・投稿に対するコメントが許可されているかどうかを確認する関数

comments_open(投稿ID)
               省略可

投稿ID：確認したい投稿IDを指定（省略時は、現在の投稿）

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

get_comments_number (ゲットコメントナンバー)関数・・・投稿に対するコメント、トラックバック、ピンバックの合計数を取得する関数

get_comments_number(投稿ID)
                     省略可

投稿ID：確認したい投稿IDを指定（省略時は、現在の投稿）

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

「dummy」 › single.php」をテキストエディタで開く
コメントテンプレートを読み込む

dummy/single.php

  </div>

  <?php if ( comments_open() || get_comments_number() ) :
    comments_template();
  endif; ?>

</main>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
コメントテンプレートが読み込まれているかを確認

ブラウザでの表示例

RERUN

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

コメントの表示コメント用の
テンプレートを作成する

コメント用のテンプレートファイルは、「comments.php」というファイルに作り、
wp_list_comments() 関数で読み込むことことができる。

コメントフォームの
テンプレートファイルを作成してみよう。

wp_list_comments (ゲットサイドバー)関数・・・投稿や固定ページのコメントを表示する関数

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

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

主なオプション
キー	値	初期値
`'style'`	梱包するタグを、'div'、'ol' または 'ul'で指定	`'ul'`
`'callback'`	コールバック関数	`null`
`'end-callback'`	終了時のコールバック関数	`null`
`'type'`	コメントの種類（'all'、'comment'、'trackback'、'pingback'、'pings' から指定）	`'all'`
`'avatar_size'`	アバターサイズ	32

「dummy」 › 「comments.php」をテキストエディタで開く
「.p-comments__list」内を、wp_list_comments()に置き換える。
（アバターのサイズは「160」にする）

dummy/comments.php

<ul class="p-comments__list">
  <?php
    $args = [
      'avatar_size' => 160,
    ];
    wp_list_comments($args);
  ?>
</ul>

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

ブラウザでの表示例

RERUN

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

コメントがある時だけ、
表示するようにしよう。

上記で問題なく表示されたが、コメントがない記事の場合、不要なタグを排出してしまうので、 have_comments() 関数でコメントがある時だけ表示するように変更する

have_comments (ハブコメント)関数・・・コメントがあるかどうかを確認する関数

have_comments()

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

「dummy」 › 「comments.php」をテキストエディタで開く
コメントがあるかをhave_comments()で確認してから表示する。

dummy/comments.php

<?php if ( have_comments() ) : ?>
<ul class="p-comments__list">
  <?php
    $args = [
      'avatar_size' => 160,
    ];
    wp_list_comments($args);
  ?>
</ul>
  <?php endif; ?>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
コメントがない投稿で不要なタグが排出されていないかを確認

ブラウザでの表示例

RERUN

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

コメントフォームの出力コメントフォームを表示したいところに、
`comment_form()`関数を使う。

コメントフォームを表示するには、comment_form()という関数を使う。
なお、コメントが許可されている投稿のみに表示したいので、comments_open()と組み合わせて使う。

コメントフォームを表示してみよう。

comment_form (コメントフォーム)関数・・・メントフォームを出力する関数

comment_form()

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

「dummy」 › 「comments.php」をテキストエディタで開く
「.p-comments__form」の中をcomment_form()に置き換えて、コメントフォームを表示する

dummy/comments.php

<?php if (comments_open()) : ?>
<section class="p-comments__form">
  <?php comment_form(); ?>
</section>
<?php endif; ?>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
コメントフォームが表示されているかを確認

ブラウザでの表示例

RERUN

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

パスワード保護された投稿への対応パスワード保護された投稿には
コメントを表示させない。

WordPressでは、投稿にパスワードをかけることができる。
その為、パスワード解除されるまでコメントを表示しないようにしておく方が好ましい。
パスワード保護されている投稿かや、パスワード解除されたかは、post_password_required()という関数で判別できる。

パスワード保護された投稿への
対応をしてみよう。

post_password_required (ポストパスワードリクワイアド)関数・・・投稿がパスワードを必要とするか、また正しいパスワードが入力されたかを確認する関数

post_password_required(投稿ID)
                        省略可

戻り値： パスワード保護されていないまたは、解除されている場合 ・・・ false そうじゃない場合 ・・・ true

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

「dummy」 › 「comments.php」をテキストエディタで開く
ファイルの冒頭に、以下のコードを追記する

dummy/comments.php

<?php
  if ( post_password_required() ) {
    return;
  }
?>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
パスワード保護されている投稿では、コメントが表示されていないことを確認。

ブラウザでの表示例

RERUN

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

HTML5のタグをサポートデフォルトではコメントフォームに、
HTML5のタグが使われていない。

WordPressでは、HTML5に対応していない昔のテーマとの互換性を確保するため、
「検索」、「コメントフォーム」、「コメント一覧」、「ギャラリー」、「キャプション」に、
HTML5のタグが使われないようになっている。
これらの箇所にHTML5のタグを適用させるには、add_theme_support()で有効にする必要がある。

HTML5のタグをサポートしよう。

「dummy」 › 「functions.php」をテキストエディタで開く
コメント部分のソースを表示し、HTML5のタグが使われていないことを確認する
dummy_setup() 関数内に、以下のコードを追記する

dummy/functions.php

/*
  Titleタグ
----------------------------------- */
add_theme_support( 'title-tag' );

/*
  HTML5をサポート
----------------------------------- */
$args = [
  'search-form',
  'comment-form',
  'comment-list',
  'gallery',
  'caption'
];
add_theme_support( 'html5', $args);

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
コメント部分のソースを表示し、HTML5のタグが使われていることを確認する

ブラウザでの表示例

RERUN

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

固定ページのテンプレート固定ページのテンプレートは、
page.phpを使う。

固定ページのテンプレートは、「page.php」というファイルを作ることで対応できる。
なお、投稿の詳細ページと固定ページで同じテンプレートを使いたい場合は、
「singular.php」というファイルを作れば共有することができるが、
今回の固定ページのデザインは、サイドバーやコメントを使わないため利用しない。

固定ページのテンプレートを作ってみよう。

「wordpress-lessons」 › 「dummy-html」フォルダ内にある、「page.html」を「dummy」内にコピー
「page.html」を「page.php」に名前を変更する
「dummy」 › 「page.php」をテキストエディタで開く
ヘッダーと、フッターを読み込む。

dummy/page.php

<?php get_header(); ?>

  <main class="l-main -single">
    <header class="p-hero">
      <h1 class="p-hero__title">ページのタイトル</h1>
      <figure class="p-hero__eyecatch">
        <img src="assets/images/no-picture_page.png" srcset="assets/images/no-picture_page.png, assets/images/no-picture_page@2x.png 2x" alt="">
      </figure>
    </header>

  </main>

<?php get_footer(); ?>

ループを記述

dummy/page.php

<?php get_header(); ?>

  <?php while ( have_posts() ) : the_post(); ?>
  <main class="l-main -single">
    <header class="p-hero">
      <h1 class="p-hero__title">ページのタイトル</h1>
      <figure class="p-hero__eyecatch">
        <img src="assets/images/no-picture_page.png" srcset="assets/images/no-picture_page.png, assets/images/no-picture_page@2x.png 2x" alt="">
      </figure>
    </header>

  </main>

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

投稿内容を表示

dummy/page.php

<main class="l-main -single">
  <header class="p-hero">
    <h1 class="p-hero__title"><?php the_title(); ?></h1>
    <?php if ( has_post_thumbnail()) : ?>
    <figure class="p-hero__eyecatch">
      <?php the_post_thumbnail(); ?>
    </figure>
    <?php endif; ?>
  </header>
  <div class="l-contents -themeWhite">
    <div class="p-article">
      <div class="l-container -slim">
        <section class="p-article__body">
          <?php the_content(); ?>
        </section>
      </div>
      <!-- /.l-container -->
    </div>
    <!-- /.l-article -->
  </div>
  <!-- /.l-contents -->
</main>

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

ブラウザでの表示例

RERUN

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

練習問題いままでの理解度をチェック。

完成例を参考に固定ページのアイキャッチ画像のサイズを設定して下さい。

完成イメージ

RERUN

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

下記の指示通りにアイキャッチ画像のサイズを登録して下さい。

アイキャッチ画像のサイズ

項目	設定値
サイズ名	dummy-full
幅	1200
高さ	400
切り抜き	あり

「page.php」のアイキャッチ画像を先ほど登録したサイズで表示するようにして下さい。

解答例

dummy/functions.php

/*
  アイキャッチ画像
----------------------------------- */
add_theme_support( 'post-thumbnails' );

// 画像サイズを追加
set_post_thumbnail_size(776, 549, true); // 投稿ページ用
add_image_size('dummy-thumbnail', 248, 175, true); // 投稿一覧用
add_image_size('dummy-full', 1200, 400, true); // 固定ページ用

dummy/page.php

<?php if ( has_post_thumbnail()) : ?>
<figure class="p-hero__eyecatch">
  <?php the_post_thumbnail( 'dummy-full' ); ?>
</figure>
<?php endif; ?>

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめコメントは、comments.phpに、
固定ページはpage.phpに。
コメント一覧は、comments.phpというファイルがテンプレートファイルになり、
固定ページはpage.phpというファイルテンプレートになる。

コメント一覧は、comments.phpに作成する
コメントフォームはcomment_form()で呼び出す
固定ページはpage.phpに作成する

Chapter08 コメントと固定ページの作成

コメントフォームのテンプレートファイルを作成してみよう。

コメントのテンプレートを読み込もう

コメントフォームのテンプレートファイルを作成してみよう。

コメントがある時だけ、表示するようにしよう。

コメントフォームを表示してみよう。

パスワード保護された投稿への対応をしてみよう。

HTML5のタグをサポートしよう。

固定ページのテンプレートを作ってみよう。

コメントフォームの
テンプレートファイルを作成してみよう。

コメントフォームの
テンプレートファイルを作成してみよう。

コメントがある時だけ、
表示するようにしよう。

パスワード保護された投稿への
対応をしてみよう。