30：固定ページ表示用テンプレート作成

WordPressは用途に応じたテンプレート名があらかじめ決めれています。主なテンプレート名は以下です。

「page.php」は「固定ページ」を表示する時に使用するテンプレートです。

このテンプレートが呼び出される時、メインループデータには固定ページデータが入ります。

固定ページ表示用テンプレート

page.php

今までは固定ページ表示に「index.php」を使用していましたが、優先度の高い固定ページ専用テンプレート「page.php」を新しく作成します。

<?php get_header(); ?>

  <div class="content">
    <div class="main">

      <div class="main-loop">
        <div class="inner">
<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>
<?php $id = get_the_ID(); ?>
<?php // テンプレートパーツ読み込み：一覧 ?>
<?php get_template_part('content','page'); ?>
<?php endwhile; ?>
<?php else: ?>
<?php // テンプレートパーツ読み込み：記事なし ?>
<?php get_template_part('content','none'); ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>
        </div><!-- /.inner -->
      </div><!-- /.main-loop -->

    </div><!-- /.main -->
  </div><!-- /.content -->

<?php
get_footer();

content-page.php

固定ページ専用表示部分モジュール（テンプレートパーツ）を作成します。

<?php // アイキャッチ画像 ?>
<div class="thumbnail">
<?php echo getThumbnail('large'); ?>
</div>

<?php // タイトル ?>
<h2 class="title"><?php the_title(); ?></h2>

<?php // 本文 ?>
<div class="article"><?php the_content(); ?></div>

functions.php

詳細ページでは大きなアイキャッチ画像を表示したい。

そのため getThumbnail関数が画像サイズ文字列を受け取れるように変更する。

変更前

// アイキャッチ画像
function getThumbnail() {
  $code = '';
  if (has_post_thumbnail()) {
    $code .= get_the_post_thumbnail(get_the_ID(), 'thumbnail');
  }else{
    $code .= '<img src="'.get_template_directory_uri().'/img/no-image.png" alt="'.get_the_title().'">'.PHP_EOL;
  }
  return $code;
}

変更後

// アイキャッチ画像
function getThumbnail($type = 'thumbnail') {
  $code = '';
  if (has_post_thumbnail()) {
    $code .= get_the_post_thumbnail(get_the_ID(), $type);
  }else{
    $code .= '<img src="'.get_template_directory_uri().'/img/no-image.png" alt="'.get_the_title().'">'.PHP_EOL;
  }
  return $code;
}

2行目

function getThumbnail($type = ‘thumbnail’) {

5行目

$code .= get_the_post_thumbnail(get_the_ID(), $type);

このページで出てくる関数

WordPress関数は「公式サイトのドキュメント」で確認しましょう。

WordPressプロパティ

$wp_query->found_posts

WordPress関数

get_header()

have_posts()

the_post()

get_the_ID()

get_template_part()

get_footer()

the_title()

the_content()

オリジナル関数

getThumbnail()

欠席者対応：wireframe12