【WordPress化】個別記事ページを作成する【single.php】

記事ページ-アイキャッチ
こばゆた
こばゆた

普通のサイトやブログだと記事についているリンクをクリックすることで詳細ページに飛べたりしますが、自作テーマの場合は初期状態では記事をクリックしても詳細を見ることはできません。

今回はWordPressの投稿ページから記事を投稿し、見ることができるように設定します

single.php作成目標
こばゆた
こばゆた

こちらを「ダッシュボード」の「投稿」から編集できるようにすることで楽にメンテナンスや更新ができる様になります

また今回はループを使いますのでまだの方はぜひこちらを↓

スポンサーリンク

1.トップページの作成をする

ちょっと長いですがこちらが編集する元のコードです。

<div id="content">
  <section>
    <h2 class="title"><span>当社のビジネスを紹介します</span></h2>
    <ul class="post">
      <li>
        <img src="<?php echo get_template_directory_uri(); ?>/images/banners/eyecatch1.jpg"><h3><a href="subpage.html">オフィス移転</a></h3><p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を革新的な技術で世の中を世の中を動かす企業を目指しま …</p>
      </li>
      <li>
        <img src="<?php echo get_template_directory_uri(); ?>/images/banners/eyecatch2.jpg"><h3><a href="subpage.html">会員数10万人突破記念</a></h3><p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を革新的な技術で世の中を世の中を動かす企業を目指しま …</p>
      </li>
      <li>
        <img src="<?php echo get_template_directory_uri(); ?>/images/banners/eyecatch3.jpg"><h3><a href="subpage.html">ecoキャンペーン</a></h3><p>最新技術と自然との調和を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を革新的な技術で世の中を世の中を動かす企業を目指しま …</p>
      </li>
      <li>
        <img src="<?php echo get_template_directory_uri(); ?>/images/banners/eyecatch4.jpg"><h3><a href="subpage.html">新講座を開講しました</a></h3><p>新講座を開講しましたホームページサンプル株式会社では最新を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を革新的な技術で世の中を世の中を動かす企業を目指しま …</p>
      </li>
    </ul>
  </section>
</div>

これを適宜編集しながら、ループを使って表示させるというのがポイントです。

手順としては以下のようになります。

トップページの作り方
  1. 不要なところを削除または補う
  2. ループさせたいところを囲う
  3. テンプレートタグを埋め込む
  • STEP1
    不要なところを削除する
    ループさせるので同じコードの行を削っておきます。
    今回の場合ですと4つもリストはいらないので3つ削ります。

    <div id="content">
      <section>
        <h2 class="title"><span>当社のビジネスを紹介します</span></h2>
        <ul class="post">
          <li>
            <img src="<?php echo get_template_directory_uri(); ?>/images/banners/eyecatch1.jpg"><h3><a href="subpage.html">オフィス移転</a></h3><p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を革新的な技術で世の中を世の中を動かす企業を目指しま …</p>
          </li>
        </ul>
      </section>
    </div>

    ちょっとすっきりしました。

  • STEP2
    ループさせたいところを囲う
    今回は記事をループするので以下のようにリストのところを囲います。
    囲う範囲を間違えるとレイアウトが崩れるので気をつけましょう。

    <div id="content">
      <section>
        <h2 class="title"><span>当社のビジネスを紹介します</span></h2>
        <ul class="post">
        <?php if(have_posts()): while(have_posts()) : the_post(); ?>
          <li>
            <img src="<?php echo get_template_directory_uri(); ?>/images/banners/eyecatch1.jpg"><h3><a href="subpage.html">オフィス移転</a></h3><p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を革新的な技術で世の中を世の中を動かす企業を目指しま …</p>
          </li>
        <?php endwhile; ?>
        <?php else : ?>
          <p>記事がありません</p>
        <?php endif; ?>
        </ul>
      </section>
    </div>

  • STEP3
    テンプレートタグを埋め込む
    テンプレートタグを埋め込んで投稿の情報を読み込みます。
    テンプレートタグについてはこちら↓

    • タイトルのところへ
      <?php the_title()?>
    • リンクのところへ
      <?php the_permalink(); ?>
    • 抜粋のところへ
      <?php the_excerpt(); ?>

    それぞれ埋め込みます。
    これを反映してみるとデフォルトで最初から入っているサンプルのタイトルと内容の抜粋が取得されます。テンプレートタグ適用後
    また他にも日付を表示したり、タグやカテゴリーを表示するテンプレートタグも必要に応じて埋め込みます。

    <?php the_date(); ?> <!-- 投稿日時の表示 -->
    <?php the_category(); ?> <!-- カテゴリーの表示-->
    <?php the_tags(); ?> <!-- タグの表示-->

    ここまでのコードはこのようになっています。また、見にくかったので改行を入れました。

    <div id="content">
      <section>
        <h2 class="title"><span>当社のビジネスを紹介します</span></h2>
        <ul class="post">
        <?php if(have_posts()): while(have_posts()) : the_post(); ?>
          <li>
            <img src="<?php echo get_template_directory_uri(); ?>/images/banners/eyecatch1.jpg">
            <h3>
              <a href="<?php the_permalink(); ?>">
                <?php the_title()?>
              </a>
            </h3>
            <p><?php the_excerpt(); ?></p>
          </li>
        <?php endwhile; ?>
        <?php else : ?>
          <p>記事がありません</p>
        <?php endif; ?>
        </ul>
      </section>
    </div>

トップページはこれで完成です。

スポンサーリンク

2.記事を新規追加する

これだけだと変化がわからないので「ダッシュボード」→「投稿」→「新規追加」で記事をいくつか投稿してみます。

こばゆた
こばゆた

適当に「テスト」というタイトルとサンプルテキストを入れて、3つサンプル記事を作りました。
サイトを表示してみると…

記事投稿後

サムネイルが変わっていないので違和感がありますが、それぞれの記事がループして反映されるようになりました!

3.記事単体ページ(single.php)を作る

見た目はできましたがまだタイトルをクリックしてもページは移らないので、次はリンク先である記事単体のページを作ります。

single.phpというものを作ることで記事へのリンクを作ることができます。

single.phpの作成する手順
  1. single.phpファイルを作成する
  2. index.phpをsingle.phpにコピーする(今回の場合)
  3. コードを修正する
  • STEP1
    single.phpを作成する
    single.phpというファイル名で新規作成します。
    single.phpの作成
  • STEP2
    index.phpをsingle.phpにコピーする
    今回は構成が似ているのでindex.phpの内容をそのまま全選択してsingle.phpへコピーします。
    もしレイアウトを別にご用意している場合はこの過程は飛ばしてください。

    サムネイルが変わってないのでアレですが、これで記事のタイトルをクリックするとその記事ページに飛ぶことができるようになりました。

  • STEP3
    single.phpのコードに修正を加える。

    今回の例で変更したのは以下の通りです。

    1. the_excerpt();からthe_content();にする
      <?php the_content(); ?>

      こちらに変える事で記事の内容を表示させることができます。

    2. 使わないタグなどを取り除く
      ここは好みにもよりますが今回は

      • アイキャッチ画像を外す
      • タイトルのリンクを消す
    3. タイトルの場所を変更する

    これで簡単ではありますがブログのようになりました。
    またブログっぽくするために記事の文量を増やしました。

こばゆた
こばゆた

とてもシンプルですが完成しました!

ここにページャーという「次の記事へ」のようなリンクを付けたり、コメント用の欄を付けたりなどカスタマイズしていきます

ちなみにダッシュボードの「設定」→「表示設定」で1ページに表示する最大投稿数の数を変えることでトップページに表示される投稿の数を変えることができます。

表示数の変更2
表示数の変更

4.まとめ

個別記事ページまとめ
  • STEP1
    トップページを作成する

    1. 不要なところを削除または補う
    2. ループさせたいところを囲う
    3. テンプレートタグを埋め込む

  • STEP2
    投稿を追加する
    「ダッシュボード」→「投稿」→「新規追加」で記事を投稿する
  • STEP3
    single.phpを作成する

    1. single.phpを作成する
    2. single.phpの中身を作成する(index.phpをコピーした場合は不必要なところは削除して作成する)
    3. コードを修正する

コメント