WordPressオリジナルテーマの作り方⑧（個別記事ページ編）

今回は、WordPressオリジナルテーマの作り方【第8回】個別記事ページ編となります。

WordPressオリジナルテーマの作り方は、当記事を含め以下の記事があります。

今回は、個別記事ページについて書いていきたいと思います。

これは、WordPressオリジナルテーマの作り方⑥で作成した、記事一覧ページから記事をクリックした先のページの事です。

それではまず、ファイルを作成していきます。

また、記事の最後にはWordPressのおすすめ教材をご紹介させて頂きます。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

WordPressオリジナルテーマ：個別記事ページの作り方

個別記事ページは、WordPressオリジナルテーマの作り方①（ファイルの準備編）で解説していますが、『single.php』というテンプレートを使います。

あとはこれまでやってきた事と似ているので、第7回まで見てきた方ならスムーズに進められるかと思います。

single.phpを作成

それでは、テンプレートを作成していきます。

まずは、お決まりのheader.phpやfooter.phpを読み込むテンプレートタグを書きます。

<?php get_header(); ?>
<main>
  <!-- アイキャッチ -->
  <div class="">
    <img src="画像パス" class="sample-img" alt="チワワ" />
  </div>
  <!-- 投稿日 -->
  <p class="">
    <time datetime="2022-01-01">2022年1月1日</time>
  </p>
  <!-- カテゴリー名 -->
  <div class="">
    チワワ
  </div>
  <!-- タイトル -->
  <h2 class="">
    愛犬撮影会(チワワ)
  </h2>
  <!-- 本文 -->
  <div class="">
    舌がチョロッと出ているチワワちゃん。飼い主さんも思わず触ってしまいます。
  </div>
</main>
<?php get_footer(); ?>

そして、中身の種類と書き方はブログカードとほぼ同じです（詳しくはWordPressオリジナルテーマの作り方⑤をご参照ください）

もちろんデザインによって書く順番が違ったり、必要のない項目もあると思うので、その辺はご自身の環境に合わせて下さい。

それでは、ブログカードと違うのはどこかというと、本文を表示させる部分です。

ブログカードでは、本文を抜粋するテンプレートタグである<?php the_excerpt(); ?>を使いました。

ただし、個別記事ページでは全文表示させたいので、投稿の本文を出力する<?php the_content(); ?>というテンプレートタグを使います（<?php the_excerpt(); ?>は本文の抜粋になります）

先ほどの例で言えば、こうなります。

<?php get_header(); ?>
<main>
  <?php if(have_posts()): while(have_posts()): the_post(); ?>
  <!-- アイキャッチ -->
  <div class="">
    <img src="<?php the_post_thumbnail('post-thumbnail', array('alt' => the_title_attribute('echo=0'))); ?>" />
  </div>
  <!-- 投稿日 -->
  <p class="">
    <time datetime="<?php the_time('Y-m-d'); ?>">
      <?php the_time('Y年m月d日'); ?>
    </time>
  </p>
  <!-- カテゴリー名 -->
  <div class="">
    <?php
      $category = get_the_category();
      echo '<span class="'.$category->slug.'">'.$category[0]->name.'</span>';
    ?>
  </div>
  <!-- タイトル -->
  <h2 class="">
    <?php the_title(); ?>
  </h2>
  <!-- 本文(全文) -->
  <div class="">
    <?php the_content(); ?>
  </div>
  <?php endwhile; endif; ?>
</main>
<?php get_footer(); ?>

ブログカードと中身の書き方で違うのは、本文の所だけです。

あとは、記事へのリンクもありません（このページがその記事なので）

3行目と29行目のループ処理ですが、なくても大丈夫な場合もありますがWordPressの公式で推奨しているので書いておきましょう（これがないと問題が起きる問題もあります）

ページネーションの作り方

ページネーションは、WordPressオリジナルテーマの作り方⑥の記事一覧ページでも作りましたが、『次の記事へ』や『前の記事へ』というやつです。

ただし前回の記事一覧のページネーションは1ページ、2ページというページ数が表示されるタイプですが、個別記事ページは『前の記事へ』『次の記事へ』と前後のボタンを表示します。

<?php the_post_navigation( array(
  'prev_text' => '前のページへ',
  'next_text' => '次のページへ'
  ) );
?>

記事一覧ページのページネーションと似ていますが、間違えないようにしましょう。

違いは以下の通りです。

となります。

『pagination』と『navigation』の違い以外に『posts』と『post』の違いもあるのでご注意ください。

記事一覧の方は複数ページがあるので『posts』と複数形になる感じですね。

このコードは</main>の上あたりに書いておけばOKです。

WordPressオリジナルテーマ制作のおすすめ教材

勉強方法は書籍、動画、プログラミングスクールなど色々あり、個人によって向き不向きがあると思います。

そこでタイプごとにご紹介させて頂きたいと思いますが、その前におすすめの勉強方法は以下になります。

これからご紹介する教材と一緒にこのブログを読み進めて頂けると、より理解が深まるかと思います。

書籍

WordPressに関する本も沢山ありますが、ここでおすすめするのは2冊です。

いちばんやさしいWordPressの教本

こちらは以前私が持っていた本で、タイトル通りやさしいというかWordPressを1から勉強したい人向けの内容となっています。

Lightningという無料のWordPressテーマを使った制作方法など載っています。

ちなみにLightningを使ったサイト制作についてはこちらのブログでもご紹介しています。

Lightningを使ってサイト作成（前編）

Lightningを使ってサイト作成（後編）

初心者からちゃんとしたプロになる WordPress基礎入門

こちらは私も個人的にお世話になっているちづみさんが書かれた本になります。

WordPressの本はこれまで何冊か購入しましたが、ダントツで読みやすいです。

ちなみに私が初めてにして唯一購入したコーディング教材がちづみさんのnoteでした。

また、初心者から実務経験者まで活用出来る非常におすすめの本となっています（電子書籍で購入しました）

動画教材

WordPressを動画で学びたい人はこちらの教材がおすすめです。

WordPress テーマ開発講座

本と違って動画だと手を動かしながら確認出来るのでいいですね。

こちらはUdemyの有料教材ですが、かなりの頻度でセールを行っていて90%オフとか良くあるので出来ればそのタイミングを狙いましょう（私はセール時に購入しました）

『WordPressの動画教材と言えばコレ』というくらい有名な教材で、私を含め周りでも購入している人がたくさんいます。

もちろんUdemyはWordPress以外の教材もたくさんあるので、気になる教材がセールをやっていたら購入を検討しても良いかも知れませんね。

プログラミングスクール

プログラミングスクールも色々ありますが『Web制作に特化したスクール』であればデイトラ一択かと思います。

開校1年で受講生が7,000人を突破したオンラインスクールで、スクールと言ってもオンラインなので自宅で受講することが出来ます。

WordPressのカリキュラムは『Web制作コース上級編』にあります。

デイトラはTwitterをやっていれば分かりますが、悪い評判は見たことがなく、叩かれやすいWeb制作業界において非常にクリーンなイメージです。

カリキュラムの質が高いのはもちろん、他のスクールと比べて圧倒的なコスパかつ買い切りとなっています。

そしてカリキュラムはどんどん更新されるので『情報が古い』ということもなく、メンターに質問が出来る点も独学だと挫折しやすいWeb制作の勉強においてはおすすめです。

私の周りも『Web制作を始めるならまずデイトラを勧める』という人も多いです。

デイトラについては以下の記事を参照下さい。

また、

10万円台でも厳しい・・・

という人は、完全無料で30日間Web制作を学べるZeroPlus Gateがおすすめです。

他にもDMM WEBCAMPやテックアカデミーにもWordPressコースがあるので、まずは無料相談を受けてみるといいと思います。

DMM WEBCAMPのWordPressコースはこちら

TechAcademyのWordPressコースはこちら

初心者向け実践型WordPress教材

これはBrainという知識共有プラットフォームで販売されている教材になります（👇画像クリック出来ます）

こちらは学習面以外にも制作会社とのやり取りの流れや、特典では『作業前・納品前のチェックシート』『営業文のサンプル』『見積もり計算シート』など『実務に対する不安を払拭できる内容』となってます。

LP1本のコーディング費が安くても3万円くらいだと考えれれば、軽く1日で回収出来るので早めに『安心』を購入しましょう。

詳細はこちらからどうぞ👇

実務で使った2年分のコーディング&WordPressメモまとめ集

これは私が販売しているものですが『教材』ではなく『コード集(コードスニペット集)』という感じです。

こちらは、1,100部以上売れています。

詳細については以下の記事を参照ください（Brain販売ページと重なる内容もあります）

まとめ

今回の内容ですが、以下のような設定も可能です。

これらの設定方法は、先ほどご紹介した『コーディング&WordPressメモまとめ集』に、コピペ出来るように掲載しています。

関連記事WordPressオリジナルテーマ関連記事
関連記事目次を作るプラグイン Table of Contents Plusの使い方

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！