オリジナルテーマ WordPress

WordPressオリジナルテーマの作り方⑨(カテゴリーページ編)

今回はWordPressオリジナルテーマの作り方【第9回】カテゴリーページ編となります。

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

今回はカテゴリーページについて書いていきたいと思います。

まずこちらを見て下さい。

パンくずリストの例(ホーム>ブログ>チワワ>愛犬撮影会(チワワ))

パンくずリストの例

これは個別記事ページのパンくずリストです。

記事のタイトルの前にカテゴリーである『チワワ』と書いてあり、これはカテゴリー名となります。

つまりこのようになります。

  • ホーム:トップページ
  • ブログ:ページ名
  • チワワ:カテゴリー名
  • 愛犬撮影会(チワワ):記事タイトル

今回はこのカテゴリー名をクリックすると表示されるカテゴリー一覧ページ』を作っていきます。

他の投稿系ページとの違いは、

  • 記事一覧ページ → 全てのカテゴリーを一覧表示
  • 個別記事ページ → 1つの記事を表示
  • カテゴリーページ → 特定のカテゴリーのみ一覧表示

となります。

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


WordPressオリジナルテーマ:カテゴリーページの作り方

今回は『category.php』というテンプレートを使います。

ここで書く内容は今までの記事を読んで頂いていれば何となく分かると思いますが、

  • header.phpを読み込む
  • パンくずリストを表示(必要に応じて)
  • メインコンテンツ(今回はブログカード)
  • ページネーション
  • footer.phpを読み込む

となります。

なので記事一覧ページの『home.php』と見た目は基本的に同じデザインが多いですが、ループ処理の書き方など微妙に違いはあります(メインコンテンツは同じ)

 

category.phpを作成

基本的には『home.php』と中身の同じですが、まずはページタイトルをカテゴリー名にしてみましょう。

例えば記事一覧ページ(home.php)のページタイトルが『ブログ』だったとします。

<h1>ブログ</h1>

これをカテゴリーページ(category.php)の時にはこのようにします。

<h1>
  <?php $cat_info = get_category( $cat );?>
  <?php echo wp_specialchars( $cat_info->name ); ?>
</h1>

こうする事によって、ページタイトルはカテゴリー名になります。

例えばカテゴリー名が『スタッフ日記』であれば以下のようになります。

<h1>スタッフ日記</h1>

全体のコードはこちらになります。

<?php get_header(); ?>
<main class="main">
  <article class="">
    <!-- カテゴリー名出力 -->
    <h1>
      <?php $cat_info = get_category( $cat );?>
      <?php echo wp_specialchars( $cat_info->name ); ?>
    </h1>
    <ul class="">
      <!-- 記事のループ処理開始 -->
      <?php
        $cat_info = get_category( get_query_var( 'cat' ) );
        $paged = get_query_var('paged') ? get_query_var('paged') : 1;
      ?>
      <?php
      if( wp_is_mobile() ){
          $num = 4; // スマホの表示数(全件は-1)
        } else {
          $num = 8; // PCの表示数(全件は-1)
        }
        $args = array(
          'post_type' => array('post'), // 投稿タイプのスラッグ(通常投稿なので'post')
          'paged' => $paged, // ページネーションがある場合に必要
          'posts_per_page' => $num, // 表示件数(変更不要)
          'category_name' => $cat_info->slug,
        );
        $wp_query = new WP_Query($args);
        if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) :
          $wp_query->the_post();
      ?>
      <li class="">
        <!-- 記事へのリンク -->
        <a href="<?php the_permalink(); ?>" class="">
          <!-- アイキャッチ -->
          <div class="">
            <?php the_post_thumbnail('post-thumbnail', array('alt' => the_title_attribute('echo=0'))); ?>
          </div>
          <p class="">
            <!-- 投稿日 -->
            <time datetime="<?php the_time('Y.n.j'); ?>">
              <?php the_time('Y.m.d'); ?>
            </time>
          </p>
          <div class="">
            <!-- カテゴリー1件表示(カテゴリー順の上にある方が表示される) -->
            <?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_excerpt(); ?>
          </div>
        </a>
      </li>
      <?php
        endwhile;
        endif;
        wp_reset_postdata();
      ?>
      <!-- 記事のループ処理終了 -->
    </ul>
    <!-- ページネーション -->
    <div class="">
      <?php
        the_posts_pagination( array( 
          'mid_size' => 1,
          'prev_text' => '前へ', 
          'next_text' => '次へ' 
        ) );
      ?>
    </div>
  </article>
</main>
<?php get_footer(); ?>

いろいろと書いてあって難しく見えるかも知れませんが、空欄のclass名やレイアウト以外で書き換えられる箇所は以下になります。

  • スマホ・PCの表示件数
  • ページネーションの『前へ・次へ』のテキスト

もしページネーションが上手く表示されない場合はこちらで試してみて下さい。

<?php
  global $wp_query;
  $big = 9999999999;
  $arg = array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'current' => max( 1, get_query_var('paged') ),
    'total'   => $wp_query->max_num_pages,
    'mid_size' => 1,
    'prev_text' => '前へ',
    'next_text' => '次へ',
  );
  echo paginate_links($arg);
?>

以上になります。

関連記事WordPressオリジナルテーマ関連記事


まとめとおまけ

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

  • カテゴリーを全部表示(先ほどは1件のみ表示)
  • ページネーション番号あり(前後を画像)
  • ページネーション前後のみ(テキストか画像)

また、カテゴリーを以下のようにタブメニューで作成することも出来ます。

カテゴリー一覧タブメニュー

カテゴリー一覧タブメニュー

『すべて』は記事一覧ページなのでクリックすると『home.php』へ遷移、『すべて』以外はカテゴリーページなのでクリックすると『category.php』に遷移となります。

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

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる

 

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

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

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

  1. 分かるところまでどんどん進める
  2. 勉強に詰まる
  3. 無視して次に進む or 他の教材などを使う
  4. もう一度詰まった場所を見てみる
  5. 理解できるようになっている

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

 

書籍

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

 

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

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

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

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

Lightningを使ってサイト作成(前編)

Lightningを使ってサイト作成(後編)

 

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

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

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

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

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

 

動画

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

WordPress テーマ開発講座

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

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

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

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

 

プログラミングスクール

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

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

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

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

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

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

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

デイトラの無料レッスン動画はこちら

 

"誰でも月収50万円以上"を達成可能にする】初心者向け実践型WordPress教材

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

【"誰でも月収50万円以上"を達成可能にする】初心者向け実践型WordPress教材

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

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

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

今だけ!購入者限定の10大特典付き🎁

WordPress案件の不安を払拭!


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-オリジナルテーマ, WordPress