今回はWordPressオリジナルテーマの作り方【第8回】個別記事ページ編となります。
WordPressオリジナルテーマの作り方は、当記事を含め以下の記事があります。
今回は個別記事ページについて書いていきたいと思います。
これはWordPressオリジナルテーマの作り方⑥で作成した記事一覧ページから記事をクリックした先のページの事です。
それではまずファイルを作成していきます。
また記事の最後にはWordPressのおすすめ教材をご紹介させて頂きます。
今だけ！5大無料特典あり🎁
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' => '次のページへ'
) );
?>記事一覧ページのページネーションと似ていますが、間違えないようにしましょう。
違いは以下の通りです。
- 記事一覧ページ → <?php the_posts_pagination(); ?>
- 個別記事ページ → <?php the_post_navigation(); ?>
となります。
『pagination』と『navigation』の違い以外に『posts』と『post』の違いもあるのでご注意ください。
記事一覧の方は複数ページがあるので『posts』と複数形になる感じですね。
このコードは</main>の上あたりに書いておけばOKです。
まとめとおまけ
今回の内容ですが、以下のような設定も可能です。
- カテゴリーにカテゴリー一覧へのリンク設定
- カテゴリーを全部表示
- 指定したカテゴリーだけ表示
- 指定したカテゴリーだけ除外
- ページネーションの前へ次へを画像にする
- 関連記事を表示させる
これらの設定方法は以下のコーディング&WordPressメモまとめ集にコピペ出来るように掲載しています。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
今だけ！5大無料特典あり🎁
関連記事WordPressオリジナルテーマ関連記事
関連記事目次を作るプラグイン Table of Contents Plusの使い方
WordPressオリジナルテーマ制作のおすすめ教材5選！
勉強方法は書籍、動画、プログラミングスクールなど色々あり、個人によって向き不向きがあると思います。
そこでタイプごとにご紹介させて頂きたいと思いますが、その前におすすめの勉強方法は以下になります。
- 分かるところまでどんどん進める
- 勉強に詰まる
- 無視して次に進む or 他の教材などを使う
- もう一度詰まった場所を見てみる
- 理解できるようになっている
これからご紹介する教材と一緒にこのブログを読み進めて頂けると、より理解が深まるかと思います。
書籍
WordPressに関する本も沢山ありますが、ここでおすすめするのは2冊です。
いちばんやさしいWordPressの教本
こちらは以前私が持っていた本で、タイトル通りやさしいというかWordPressを1から勉強したい人向けの内容となっています。
Lightningという無料のWordPressテーマを使った制作方法など載っています。
ちなみにLightningを使ったサイト制作についてはこちらのブログでもご紹介しています。
初心者からちゃんとしたプロになる WordPress基礎入門
こちらは私も個人的にお世話になっているちづみさんが書かれた本になります。
WordPressの本はこれまで何冊か購入しましたが、ダントツで読みやすいです。
ちなみに私が初めてにして唯一購入したコーディング教材がちづみさんのnoteでした。
また、初心者から実務経験者まで活用出来る非常におすすめの本となっています（電子書籍で購入しました）
動画
WordPressを動画で学びたい人はこちらの教材がおすすめです。
本と違って動画だと手を動かしながら確認出来るのでいいですね。
こちらはUdemy
の有料教材ですが、かなりの頻度でセールを行っていて90%オフとか良くあるので出来ればそのタイミングを狙いましょう（私はセール時に購入しました）
『WordPressの動画教材と言えばコレ』というくらい有名な教材で、私を含め周りでも購入している人がたくさんいます。
もちろんUdemyはWordPress以外の教材もたくさんあるので、気になる教材がセールをやっていたら購入を検討しても良いかも知れませんね。
プログラミングスクール
プログラミングスクールも色々ありますが『Web制作に特化したスクール』であればデイトラ一択かと思います。
開校1年で受講生が7000人を突破したオンラインスクールで、スクールと言ってもオンラインなので自宅で受講することが出来ます。
WordPressのカリキュラムは『Web制作コース上級編』にあります。
デイトラはTwitterをやっていれば分かりますが、悪い評判は見たことがなく、叩かれやすいWeb制作業界において非常にクリーンなイメージです。
カリキュラムの質が高いのはもちろん、他のスクールと比べて圧倒的なコスパかつ買い切りとなっています。
そしてカリキュラムはどんどん更新されるので『情報が古い』ということもなく、メンターに質問が出来る点も独学だと挫折しやすいWeb制作の勉強においてはおすすめです。
私の周りも『Web制作を始めるならまずデイトラを勧める』という人も多いです。
【"誰でも月収50万円以上"を達成可能にする】初心者向け実践型WordPress教材
これはBrainという知識共有プラットフォームで販売されている教材になります（👇画像クリック出来ます）
こちらは学習面以外にも制作会社とのやり取りの流れや、特典では『作業前・納品前のチェックシート』『営業文のサンプル』『見積もり計算シート』など『実務に対する不安を払拭できる内容』となってます。
LP1本のコーディング費が安くても3万円くらいだと考えれれば、軽く1日で回収出来るので早めに『安心』を購入しましょう。
詳細はこちらからどうぞ👇
今だけ！購入者限定の10大特典付き🎁
