Learning site for website creation

26：投稿詳細用テンプレート追加

公開日:2019年07月14日 更新日:2019年07月15日

「実績」「ブログ」一覧のリンクをクリックしてもテンプレート「index.php」の「最後の砦」が表示され、投稿詳細が表示されない状況です。

投稿詳細表示用テンプレート「single.php」を作成します。

専用テンプレート

必要に応じて専用のテンプレートを追加できます。他にも追加できるファイルがありますが主なファイルは以下です。

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

投稿詳細

優先度（高い ←　→ 低い）

single-投稿タイプ.php

single.php

index.php

テーマ内に専用テンプレートを追加

投稿詳細用の「single.php」を追加します。 

フォルダ構成

  • lesson01
    • imgフォルダ
    • category.php
    • front-page.php
    • functions.php
    • index.php
    • screenshot.png
    • single.php（追加）
    • style.css

single.php

コーディング済みHTMLから文章構造をコピーします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>ブログ詳細 - ポートフォリオサイト</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="index.html">
          <img src="img/logo.png" alt="ロゴ">
        </a>
      </div>
      <div class="flex-item nav">
        <ul class="flex">
          <li class="flex-item">
            <a href="#">Works</a>
          </li>
          <li class="flex-item">
            <a href="archive.html">Blog</a>
          </li>
          <li class="flex-item">
            <a href="index.html#profile">Profile</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="wp-content">
  <div class="inner">
    <h2 class="title">HTML基本タグ</h2>
    <div class="date">2019年6月11日</div>
    <div class="eyecatch"><img src="img/eyecatch.jpg" alt="アイキャッチ"></div>
    <div class="article">
      <h1>見出し１</h1>
      <p>段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト</p>
      <p>段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト</p>

      <h2>見出し２</h2>
      <p>段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト</p>

      <h3>見出し３</h3>
      <p>段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト</p>

      <h4>見出し４</h4>
      <p>段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト</p>

      <h5>見出し５</h5>
      <p>段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト</p>

      <h6>見出し６</h6>
      <p>段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト</p>

      <h1>整形済みテキスト</h1>
      <pre>整形済みテキスト
      整形済みテキスト
      整形済みテキスト整形済みテキスト
      整形済みテキスト整形済みテキスト整形済みテキスト</pre>

      <h1>strong, em, リンク</h1>
      <p>段落テキスト<strong>太字太字太字太字太字</strong>段落テキスト<em>斜体斜体斜体斜体斜体斜体</em>
      段落テキスト<a href="https://www.google.co.jp/">リンクリンクリンクリンク</a>段落テキスト</p>

      <h1>リスト</h1>
      <ul>
        <li>番号なしリスト</li>
        <li>番号なしリスト</li>
        <li>番号なしリスト</li>
      </ul>

      <ol>
        <li>番号つきリスト</li>
        <li>番号つきリスト</li>
        <li>番号つきリスト</li>
      </ol>

      <dl>
        <dt>定義リストタイトル</dt>
        <dd>定義リスト説明文</dd>
        <dt>定義リストタイトル</dt>
        <dd>定義リスト説明文</dd>
        <dt>定義リストタイトル</dt>
        <dd>定義リスト説明文</dd>
      </dl>

      <h1>引用文</h1>
      <blockquote>
        <p>引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文
        引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文
        引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文</p>
        <p>引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文
        引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文
        引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文</p>
      </blockquote>

      <h1>テーブル</h1>
      <table>
        <tr>
          <th>見出しセル</th>
          <th>見出しセル</th>
        </tr>
        <tr>
          <td>通常セル</td>
          <td>通常セル</td>
        </tr>
        <tr>
          <td>通常セル</td>
          <td>通常セル</td>
        </tr>
      </table>


      <h1>画像左配置と回り込み</h1>
      <p class="img-left"><img alt="画像" src="https://jobtech.jp/smallimage.png"></p>
      <p>段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト</p>

      <h1>画像右配置と回り込み</h1>
      <p class="img-right"><img alt="画像" src="https://jobtech.jp/smallimage.png"></p>
      <p>段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト</p>

      <h1>画像中央配置</h1>
      <p>段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト
      段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト</p>
      <p class="img-center"><img alt="画像" src="https://jobtech.jp/smallimage.png"></p>

      <h1>小さい画像</h1>
      <p><img alt="画像" src="https://jobtech.jp/smallimage.png"></p>

      <h1>大きい画像</h1>
      <p><img alt="画像" src="https://jobtech.jp/bigimage.png"></p>

      <h1>リンク画像</h1>
      <p>
        <a href="#">
          <img alt="画像" src="https://jobtech.jp/smallimage.png">
        </a>
      </p>

      <h1>Fontawesome確認</h1>
      <p><i class="fab fa-500px"></i></p>

    </div>
  </div>
</div>


<div class="footer">
  <div class="inner">
    <div class="copyright">
      © 2019 ポートフォリオ.
    </div><!-- .copyright -->
  </div><!-- .inner -->
</div><!-- .footer -->
</body>
</html>

ヘッダーモジュールとフッターモジュール読み込み

single.php

変更後

<?php
get_header();
?>

<div class="wp-content">
  <div class="inner">
    <h2 class="title">HTML基本タグ</h2>
    <div class="date">2019年6月11日</div>
    <div class="eyecatch"><img src="img/eyecatch.jpg" alt="アイキャッチ"></div>
    <div class="article">
      <h1>見出し１</h1>

                  :

      <p><i class="fab fa-500px"></i></p>
    </div>
  </div>
</div>

<?php
get_footer();

メインループ設置

single.php

アイキャッチ画像が設定されている時のみdiv要素を表示するのでif文を代替構文に変更しています。

<?php if (has_post_thumbnail()) : ?>
    <div class="eyecatch">
      <?php the_post_thumbnail('img_960_200'); ?>
    </div>
<?php endif; ?>

アイキャッチ画像のサイズを引数で指定します。

今回は「’img_960_200’」を使用します。

管理画面でのサイズ指定画像

the_post_thumbnail(‘thumbnail’) サムネイル (デフォルト 150px x 150px :最大値)
the_post_thumbnail(‘medium’) 中サイズ (デフォルト 300px x 300px :最大値)
the_post_thumbnail(‘large’) 大サイズ (デフォルト 1024px x 1024px :最大値)
the_post_thumbnail(‘full’) フルサイズ (アップロードした画像の元サイズ)

 

functions.phpでのサイズ指定画像

// アイキャッチ画像サイズの設定
if ( function_exists( 'add_image_size' ) ) {
  add_image_size('img_300_200', 300, 200, true);
  add_image_size('img_960_200', 960, 200);
}

変更後

<?php
get_header();
?>

<div class="wp-content">
  <div class="inner">

<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>

    <h2 class="title"><?php the_title(); ?></h2>
    <div class="date"><?php the_time('Y年m月d日'); ?></div>

<?php if (has_post_thumbnail()) : ?>
    <div class="eyecatch">
      <?php the_post_thumbnail('img_960_200'); ?>
    </div>
<?php endif; ?>

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

<?php endwhile; ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

  </div>
</div>

<?php
get_footer();

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

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

WordPress関数

get_header()

get_footer()

the_title()

the_time()

has_post_thumbnail()

the_post_thumbnail()

the_content()

表示確認

以下URLにアクセスすると投稿詳細が表示されます。

http://localhost/WordPressフォルダ名/投稿スラッグ

投稿詳細が表示されていることを確認しましょう。

 

※欠席者対応：lesson17 – lesson18

コンテンツ一覧
同じカテゴリーのコンテンツ
MAMPにWordPressをインストール
  • PHP
  • WordPress
公開日:2024年01月10日 更新日:2024年01月12日
WordPressでメモリエラーが表示される
  • WordPress
公開日:2023年12月20日 更新日:2024年01月10日
プラグイン：カスタム投稿を表示する「Custom Post Type UI」
  • WordPress
公開日:2023年10月26日 更新日:2024年01月26日
プラグイン：カスタム投稿に新しいカテゴリーを作成「Custom Post Type UI」
  • WordPress
公開日:2023年10月26日 更新日:2023年10月27日
プラグイン：カスタム投稿を作成「Custom Post Type UI」
  • WordPress
公開日:2023年10月26日 更新日:2023年10月27日
XAMPP環境で画像ブロックの回転やズームが機能しない
  • WordPress
公開日:2023年03月11日
WordPressの各種設定のデフォルト値を確認
  • WordPress
公開日:2023年03月05日
WordPressのパスワードをphpMyAdminから変更
  • WordPress
公開日:2023年01月10日 更新日:2024年01月25日
別サイトにWordPress記事一覧を表示する
  • WordPress
公開日:2022年12月03日
WordPressで予約投稿が失敗するときの対応
  • WordPress
公開日:2022年11月06日 更新日:2023年11月06日
備忘録
Wi-Fi ルータを増やす
備忘録一覧
本の備忘録
コンテンツ一覧
ページトップへ戻る