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

こばゆた

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

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

こばゆた

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

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

今回の内容

1.トップページの作成をする
2.記事を新規追加する
3.記事単体ページ(single.php)を作る
4.まとめ

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>

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

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

トップページの作り方

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

STEP1

不要なところを削除する

ループさせるので同じコードの行を削っておきます。
今回の場合ですと４つもリストはいらないので３つ削ります。

<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
テンプレートタグを埋め込む
テンプレートタグを埋め込んで投稿の情報を読み込みます。
テンプレートタグについてはこちら↓
【初心者向け】ループ処理の基本とループ内で使うテンプレートタグ【WordPress化】
WordPressにおいてはループ処理を使うことによって情報を取得したり、表示したりということをします。今回はWordPressで使用する基本のループ(メインクエリでのループ)についての解説と、その中で使われるテンプレートタグについて例を出しながら解説しています。
kbyt-programming.com
2021年10月03日
- タイトルのところへ
```
<?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.記事単体ページ(single.php)を作る

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

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

single.phpの作成する手順

single.phpファイルを作成する
index.phpをsingle.phpにコピーする(今回の場合)
コードを修正する

STEP1
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ページに表示する最大投稿数の数を変えることでトップページに表示される投稿の数を変えることができます。

4.まとめ

個別記事ページまとめ

STEP1
トップページを作成する
1. 不要なところを削除または補う
2. ループさせたいところを囲う
3. テンプレートタグを埋め込む
STEP2
投稿を追加する
「ダッシュボード」→「投稿」→「新規追加」で記事を投稿する
STEP3
single.phpを作成する
1. single.phpを作成する
2. single.phpの中身を作成する(index.phpをコピーした場合は不必要なところは削除して作成する)
3. コードを修正する