アイキャッチ画像を有効化してみよう。

1. 「dummy」 › 「functions.php」をテキストエディタで開く
2. lang属性をadd_theme_support()を追加する

/*======================================
  初期設定
======================================*/
function dummy_setup() {

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

  /*
    アイキャッチ画像
  ----------------------------------- */
  add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'dummy_setup' );

3. 上書き保存
4. 管理画面にアクセス
   （http://localhost/wp-lesson/wp-admin/）
5. 投稿画面にアクセスして「アイキャッチ画像」が設定できるようになっているかを確認する

テーマ用画像サイズの設定をしてみよう。

テーマ専用のデフォルトのデフォルトのアイキャッチサイズを設定するには、set_post_thumbnail_size()を使い、
サイズを追加するには、add_image_size()という関数を使えば、追加できる。

set_post_thumbnail_size(画像の幅, 画像の高さ, トリミングするか？)
                                        省略可

トリミングするか？ ・・・ true（指定したサイズで画像を切り抜く。配列で指定することで切り抜く位置を指定することもできる） / false（指定した幅または、高さの大きさでリサイズ）【初期値】

add_image_size(サイズの名前, 画像の幅, 画像の高さ, トリミングするか？)
                                        省略可

トリミングするか？ ・・・ true（指定したサイズ画像を切り抜く。配列で指定することで切り抜く位置を指定することもできる） / false（指定した幅または、高さの大きさでリサイズ）【初期値】

1. 「dummy」 › 「functions.php」をテキストエディタで開く
2. アイキャッチ画像の投稿一覧用のサイズと投稿ページに表示する用の画像サイズを追加する

/*======================================
  初期設定
======================================*/
function dummy_setup() {

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

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

  // 画像サイズを追加
  set_post_thumbnail_size(776, 549, true); // 投稿ページ用
  add_image_size('dummy-thumbnail', 248, 175, true); // 投稿一覧用
}
add_action( 'after_setup_theme', 'dummy_setup' );

3. 上書き保存

サムネイル画像の再生成

新たに追加した画像サイズは、設定後にアップロードされた画像のみに適用される。
すでにアップロードされた画像に、新たに追加したサイズを適用されたい場合は、「Regenerate Thumbnails」などのプラグインを使うことで再生成できる。

投稿一覧に追加したサイズを指定してみよう。

1. 「dummy」 › 「index.php」をテキストエディタで開く
2. 投稿一覧のアイキャッチ画像を表示している箇所を変更する

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

3. 上書き保存

独自で高解像度ディスプレイに対応する

the_post_thumbnail()関数で生成される <img> タグは、srcset属性も含め、WordPressが自動に生成する。the_post_thumbnail_url()という関数を使って、アイキャッチ画像のファイルパスのみを出力し、独自で高解像度ディスプレイに対応する場合は、以下のような方法で対応することもできる。

1. レティーナ用の画像サイズを追加する

/*======================================
  初期設定
======================================*/
function dummy_setup() {
  /*
    アイキャッチ画像
  ----------------------------------- */
  add_theme_support( 'post-thumbnails' );

  // 画像サイズを追加
  set_post_thumbnail_size(776, 549, true); // 投稿ページ用
  add_image_size('dummy-thumbnail', 248, 175, true); // 投稿一覧用
  add_image_size('dummy-thumbnail@2x', 496, 350, true); // 投稿一覧のレティーナ用
}

2. 「index.php」の画面出力部分を変更する

<?php if ( has_post_thumbnail() ) : ?>
  <img src="<?php the_post_thumbnail_url('dummy-thumbnail') ?>" srcset="<?php the_post_thumbnail_url('dummy-thumbnail') ?>, <?php the_post_thumbnail_url('dummy-thumbnail@2x') ?> 2x" alt="<?php echo esc_attr(get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true )) ?>">
<?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; ?>

3. 上書き保存

ページネーションを出力してみよう。

the_posts_pagination()という関数を使えば、ページネーションを出力できる。

the_posts_pagination(オプション)
                       省略可

オプション ・・・ 以下の引数を配列で指定
・mid_size (整数) - 現在のページの左右にそれぞれ表示するページ番号の数。デフォルトは1。
・prev_text (文字列) - 投稿の前のセットへのリンクテキスト。デフォルトは「Previous」。
・next_text (文字列) - 投稿の次のセットへのリンクテキスト。デフォルトは「Next」。
・screen_reader_text (文字列) - navの見出し用テキスト。デフォルトは「Posts navigation」。

1. 「dummy」 › 「index.php」をテキストエディタで開く
2. the_posts_pagination()関数でページネーションを出力する

    </article>

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

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

  <?php endif; ?>
</section>

3. 上書き保存
4. サイトにアクセス
   （http://localhost/wp-lesson/）
5. 記事が「1ページに表示する最大投稿数」より少ないので、ページネーションが表示されない。

記事を追加してみよう。

1. 管理画面の「表示設定」の「1ページに表示する最大投稿数」を「5」にする
2. ブログを4件以上追加する

the_posts_pagination()で出力されるHTML

the_posts_pagination()はデフォルトで下記のようなHTMLを出力する。
CSSでスタイリングする時は、下記のclassを参考にしてスタイルを記述するとよい。
現在アクティブなナビには、span要素に 「current」 という名前のclass名が付いたり、
「aria-current」属性が追加される。

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