Learning site for website creation

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

  • 投稿日:2018年11月06日
  • 更新日:2018年11月07日

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

front-page.php フロントページ表示用テンプレート
home.php 主に固定ページの上にあるブログ投稿一覧表示用テンプレート
single.php 投稿詳細ページ表示用テンプレート
page.php 固定ページ表示用テンプレート
archive.php アーカイブ一覧全般表示用テンプレート
category.php カテゴリー一覧表示用テンプレート
tag.php タグ一覧表示用テンプレート
search.php 検索結果一覧表示用テンプレート
date.php 日付別一覧表示用テンプレート
404.php 404エラー表示用テンプレート
searchform.php 検索フォーム用テンプレート
comments.php コメント用テンプレート

「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