【WPテーマ作り】コンテンツ並び替える仕組み：HTML+PHP編

公開日:2021 4/6 最終更新日:2021 4/8

【WPテーマ作り】コンテンツを並び替える仕組み：設計編にてコンテンツを並び替える仕組みにについて設計と解説をしました。

今回は実践編にしようとおもったのですが、初回ということも有りテーマの基礎となるphpファイル構築の部分が長くなったので切り分けました。

仕組みとしては設定を変更するとカラムを変更できるようにしたいと思います。

デザインは各自好きなようにCSSフレームワークなどを使って組んでください。

最後に紹介しますが、オススメなのはグリッドの仕組み(CSSでいうgridではなくFlexboxで組まれたカラムのこと) があるフレームワークを取り入れることをおすすめします。

有名所だとBootstrapとかBulmaとかですね。

上記は基本的にWebアプリケーションを作るときに使うので、デザインを気にせずコード構築に集中できるのがメリットです。

一方知識が無いとどれも同じような見た目になってしまって個性がなくなるのがデメリットですね。

なので私は自分で見た目を構築したい欲求もあるので、グリッドだけが実装された軽量CSSフレームワークが好きです。

そしてオレオレCSSフレームワークが出来上がりました（笑）

このオレオレCSSフレームワークは仕事では完全1から作るってなったときぐらいにしか使いません。

私しかリファレンスを知らないですからね。

あくまで個人制作用です。

カラムを変更するための土台（HTML）を作る
HTMLをwordperssテーマに落とし込む
wordpressの独自タグを埋め込んでいく
動かないときはエラーコードをググろう

カラムを変更するための土台（HTML）を作る {{id="post-head-01"}}

それでは１・２カラム(サイドバーが左右の2種)の3つのHTMLを組んでいきます。

ちゃんとした入れ子構造になって HTMLの並びを変えたりCSSを変更するだけで調整できる形であればどのような組み方でも構いません。

例として2カラムのHTMLを載せておきます。

自分がCSSでレイアウトを調整しやすいように、好きなようにアレンジしてみてください。

わかりやすいように以降は、例として以下のHTMLの構造を基準に説明していきます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="text/stylesheet" src="./style.css">
    <title>オリジナルブログ</title>
  </head>
  <body>
    <div class="all--wrap">
      <div class="header--wrap">
        <header>
          <h1>オリジナルブログタイトル</h1>
          <div class="header--desc--wrap">
            <p>当ブログの概要サンプルテキストです。オリジナルテーマを作り見やすいブログを作って発信していきましょう。</p>
          </div>
          <nav>
            <div class="header--nav--wrap">
              <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">MENU_1</a></li>
                <li><a href="#">MENU_2</a></li>
                <li><a href="#">MENU_3</a></li>
                <li><a href="#">MENU_4</a></li>
              </ul>
            </div>
          </nav>
        </header>
      </div>
      <div class="content--wrap">
        <div class="main--wrap">
          <main>
            <div class="main--article--wrap">
              <article>
                <ul>
                  <li class="article--entry--wrap">
                    <section>
                      <div class="entry--header--wrap">
                        <h1>記事タイトル003</h1>
                        <div class="entry--time--wrap">
                          <time>2021-04-02</time>
                        </div>
                        <div class="entry--cat--wrap">
                          <h2>カテゴリ名</h2>
                        </div>
                      </div>
                      <div class="entry--desc--wrap">
                        <img src="/wp-contents/themes/assets/images/entry-dummy.jpg" width="100%">
                        <p>記事タイトル003の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。記事タイトル003の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。記事タイトル003の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。</p>
                      </div>
                    </section>
                  </li>
                  <li class="article--entry--wrap">
                    <section>
                      <div class="entry--header--wrap">
                        <h1>記事タイトル002</h1>
                        <div class="entry--time--wrap">
                          <time>2021-04-01</time>
                        </div>
                        <div class="entry--cat--wrap">
                          <h2>カテゴリ名</h2>
                        </div>
                      </div>
                      <div class="entry--desc--wrap">
                        <img src="/wp-contents/themes/assets/images/entry-dummy.jpg" width="100%">
                        <p>記事タイトル002の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。記事タイトル002の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。記事タイトル002の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。</p>
                      </div>
                    </section>
                  </li>
                  <li class="article--entry--wrap">
                    <section>
                      <div class="entry--header--wrap">
                        <h1>記事タイトル001</h1>
                        <div class="entry--time--wrap">
                          <time>2021-04-01</time>
                        </div>
                        <div class="entry--cat--wrap">
                          <h2>カテゴリ名</h2>
                        </div>
                      </div>
                      <div class="entry--desc--wrap">
                        <img src="/wp-contents/themes/assets/images/entry-dummy.jpg" width="100%">
                        <p>記事タイトル001の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。記事タイトル001の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。記事タイトル001の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。</p>
                      </div>
                    </section>
                  </li>
                </ul>
              </article>
            </div>
            <div class="main--pickup--wrap">
              <section>
                <h1>これを読んでいる人はこんな記事も読んでいます</h1>
                <ul>
                  <li>
                    <a href="#">
                      <div class="pickup--entry--wrap">
                        <h2>記事タイトル001</h2>
                        <img src="/wp-contents/themes/assets/images/entry-dummy.jpg" width="100%">
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="pickup--entry--wrap">
                        <h2>記事タイトル001</h2>
                        <img src="/wp-contents/themes/assets/images/entry-dummy.jpg" width="100%">
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="pickup--entry--wrap">
                        <h2>記事タイトル001</h2>
                        <img src="/wp-contents/themes/assets/images/entry-dummy.jpg" width="100%">
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="pickup--entry--wrap">
                        <h2>記事タイトル001</h2>
                        <img src="/wp-contents/themes/assets/images/entry-dummy.jpg" width="100%">
                      </div>
                    </a>
                  </li>
                </ul>
              </section>
            </div>
          </main>
        </div>
        <div class="side--wrap">
          <aside>
            <div clsss="side--profile--wrap">
              <section>
                <h1>私のプロフィール</h1>
                <dl>
                  <dt>私の名前</dt>
                  <dd>私のプロフィール概要サンプルテキストです。私のプロフィール概要サンプルテキストです。私のプロフィール概要サンプルテキストです。</dd>
                </dl>
              </section>
            </div>
            <div clsss="side--profile--wrap">
              <section>
                <h1>カテゴリ一覧</h1>
                <ul>
                  <li><a href="#">カテゴリ001</a></li>
                  <li><a href="#">カテゴリ002</a></li>
                  <li><a href="#">カテゴリ003</a></li>
                  <li><a href="#">カテゴリ004</a></li>
                  <li><a href="#">カテゴリ005</a></li>
                  <li><a href="#">カテゴリ006</a></li>
                </ul>
              </section>
            </div>
          </aside>
        </div>
      </div>
      <div class="footer-wrap">
        <footer>
          <p>© 2021 MyBlogTeme</p>
        </footer>
      </div>
    </div>
  </body>
</html>

こんな感じでいいでしょう。

Bodyタグ以降の構造的には

  BODY
    全体を囲む枠
      ヘッダー枠
        ブログタイトル枠
        ブログ概要枠
      コンテンツ枠
        メイン枠
          記事一覧コンテンツ枠
          サブコンテンツ枠
        サイド枠
          プロフィール枠
          カテゴリ一覧
      フッター枠 
        著作表示枠

といった感じです。

大枠としては全体を囲むラッパーの中にヘッダ・コンテンツ・フッタと３つのボックスを作りました。そしてコンテンツ枠を親としてその中にメインとサイドバーで２つのボックスを入れました。

コンテンツ枠にFlexboxを適用してメインとサイドに横幅を設定すれば数値や設定に応じた2カラムとして完成します。

1カラムにする場合はサイド枠を条件分岐で描写しないようにするか、メインコンテンツの下に持ってきたい場合は CSSの値を切り替えてwidthを100％にするかflexboxを適用しなければ1カラムになります。

2カラムでサイドバーを入れ替えたい場合はHTMLを入れ替えるのではなく flexboxで左スタートか右スタートのcssを変更させるだけです。

条件に応じて適用するクラスの付与を変更すれば実現可能ですね。

どのカラムにするかの状態保存は以前テーマコンフィグを作ったときの仕組みを利用してその値を引っ張ってくれば条件分岐ができるといった感じです。

それでは上記のhtmlをWordpressのテーマに落とし込んで見ましょう。

HTMLをwordperssテーマに落とし込む {{id="post-head-02"}}

今回は1カラムのときはサイドバーを読み込まない仕様として進めていきます。一応後から可変できるように1カラム用のクラスをあてたりもしています。

先ほどのHTMLをphpに落とし込みます。

この説明も省こうかなと思ったのですが、後に説明しづらくなりそうなので形だけは説明しておきます。

はじめに断っておくと、wordpressのテーマのphp記述方法に正解はないので 1つのやり方として見てもらったほうがいいです。

いろんな書き方を知って自分なりのテーマを作ってみてください。

header.php

まずはヘッダ部分を切り分けましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="text/stylesheet" src="./style.css">
    <title>オリジナルブログ</title>
  </head>
  <body>
    <div class="all--wrap">
      <div class="header--wrap">
        <header>
          <h1>オリジナルブログタイトル</h1>
          <div class="header--desc--wrap">
            <p>当ブログの概要サンプルテキストです。オリジナルテーマを作り見やすいブログを作って発信していきましょう。</p>
          </div>
          <nav>
            <div class="header--nav--wrap">
              <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">MENU_1</a></li>
                <li><a href="#">MENU_2</a></li>
                <li><a href="#">MENU_3</a></li>
                <li><a href="#">MENU_4</a></li>
              </ul>
            </div>
          </nav>
        </header>
      </div>
      <div class="content--wrap">

header.phpは基本的にすべてのページに描写されるものなので、今回で言えばグローバルメニューのheaderタグの終わりまで抜粋します。

閉じタグがなくてもいいの？と思われますが、 index側がheader.phpやらfooter.phpやらを読み込むので最終的に1つのphpファイルとして構成されるため header.phpで閉じてないタグをfooter.phpとかで閉じていたらOKというわけです。

初心者の方は結構混乱する箇所なので、実際に表示して Firefox等でソースコード表示をすると閉じられてないタグは赤くなっているのでもし閉じられてなかったらソースコードを見直せばOKです。

content--wrapの開始タグをheader.phpに持ってきた理由は footer側で閉じタグを書こうとしてるためです。

index.phpはトップページ

index.phpはドメインにアクセスして表示される元となるファイルなので、ここでヘッダーやらサイドバー、フッター等のファイルを指定位置に呼び出します。

現状は特にphpらしいことはせずにhtmlを切り貼りしてるだけなのに注意してください。

<?php get_header(); ?>
        <div class="main--wrap">
          <main>
            <div class="main--article--wrap">
              <article>
                <ul>
                  <li class="article--entry--wrap">
                    <section>
                      <div class="entry--header--wrap">
                        <h1>記事タイトル003</h1>
                        <div class="entry--time--wrap">
                          <time>2021-04-02</time>
                        </div>
                        <div class="entry--cat--wrap">
                          <h2>カテゴリ名</h2>
                        </div>
                      </div>
                      <div class="entry--desc--wrap">
                        <img src="/wp-contents/themes/assets/images/entry-dummy.jpg" width="100%">
                        <p>記事タイトル003の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。記事タイトル003の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。記事タイトル003の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。</p>
                      </div>
                    </section>
                  </li>
                  <li class="article--entry--wrap">
                    <section>
                      <div class="entry--header--wrap">
                        <h1>記事タイトル002</h1>
                        <div class="entry--time--wrap">
                          <time>2021-04-01</time>
                        </div>
                        <div class="entry--cat--wrap">
                          <h2>カテゴリ名</h2>
                        </div>
                      </div>
                      <div class="entry--desc--wrap">
                        <img src="/wp-contents/themes/assets/images/entry-dummy.jpg" width="100%">
                        <p>記事タイトル002の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。記事タイトル002の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。記事タイトル002の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。</p>
                      </div>
                    </section>
                  </li>
                  <li class="article--entry--wrap">
                    <section>
                      <div class="entry--header--wrap">
                        <h1>記事タイトル001</h1>
                        <div class="entry--time--wrap">
                          <time>2021-04-01</time>
                        </div>
                        <div class="entry--cat--wrap">
                          <h2>カテゴリ名</h2>
                        </div>
                      </div>
                      <div class="entry--desc--wrap">
                        <img src="/wp-contents/themes/assets/images/entry-dummy.jpg" width="100%">
                        <p>記事タイトル001の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。記事タイトル001の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。記事タイトル001の抜粋テキストサンプルです。テキストを記述する場合は180文字ぐらいが妥当なんじゃないでしょうか。</p>
                      </div>
                    </section>
                  </li>
                </ul>
              </article>
            </div>
            <div class="main--pickup--wrap">
              <section>
                <h1>これを読んでいる人はこんな記事も読んでいます</h1>
                <ul>
                  <li>
                    <a href="#">
                      <div class="pickup--entry--wrap">
                        <h2>記事タイトル001</h2>
                        <img src="/wp-contents/themes/assets/images/entry-dummy.jpg" width="100%">
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="pickup--entry--wrap">
                        <h2>記事タイトル001</h2>
                        <img src="/wp-contents/themes/assets/images/entry-dummy.jpg" width="100%">
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="pickup--entry--wrap">
                        <h2>記事タイトル001</h2>
                        <img src="/wp-contents/themes/assets/images/entry-dummy.jpg" width="100%">
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="pickup--entry--wrap">
                        <h2>記事タイトル001</h2>
                        <img src="/wp-contents/themes/assets/images/entry-dummy.jpg" width="100%">
                      </div>
                    </a>
                  </li>
                </ul>
              </section>
            </div>
          </main>
        </div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

get_sidebar()やらphpを使っている部分はWordpressが用意してくれている関数です。

その名の通り今切り貼りしてる「header.php」「sidebar.php」「footer.php」をそれぞれ呼び出す仕組みになってます。

これ以外のファイルを呼び出す場合は自分でfunctions.phpとかに定義してやる必要があるのに注意してください。

例としてはナビゲーションをheader.phpファイルから切り分けてnav.phpというオリジナルファイルを作った場合 requireとかで呼び出すか、呼び出す用の関数を作る必要があります。

sidebar.php

お次はsidebarです。

ここは他と違って完全に独立してるので、サイドバーが不必要であればget_sidebarを呼び出さなければ非表示に出来ます。

        <div class="side--wrap">
          <aside>
            <div clsss="side--profile--wrap">
              <section>
                <h1>私のプロフィール</h1>
                <dl>
                  <dt>私の名前</dt>
                  <dd>私のプロフィール概要サンプルテキストです。私のプロフィール概要サンプルテキストです。私のプロフィール概要サンプルテキストです。</dd>
                </dl>
              </section>
            </div>
            <div clsss="side--profile--wrap">
              <section>
                <h1>カテゴリ一覧</h1>
                <ul>
                  <li><a href="#">カテゴリ001</a></li>
                  <li><a href="#">カテゴリ002</a></li>
                  <li><a href="#">カテゴリ003</a></li>
                  <li><a href="#">カテゴリ004</a></li>
                  <li><a href="#">カテゴリ005</a></li>
                  <li><a href="#">カテゴリ006</a></li>
                </ul>
              </section>
            </div>
          </aside>
        </div>

footer.php

最後はフッターですね。閉じタグから開始してますが、header.phpで記述したcontent--wrapの閉じタグです。

わからなくなりそうな人は閉じタグのあとになんの閉じタグなのかコメントを記述しておくといいかもしれません。

私はHTMLではコメントを書きたくない派（だってソースコード見られると恥ずかしいし……）ですね。

まぁ公開時に消せばいいんですが、結構忘れがちなのと自分ではわかってるので別にいいかなって感じです。

初心者や共同開発をする人はコメントはつけておいたほうが周りに親切です。

      </div>
      <div class="footer-wrap">
        <footer>
          <p>© 2021 MyBlogTeme</p>
        </footer>
      </div>
    </div>
  </body>
</html>

フッターの要素と各種閉じタグのみです。

この辺にWordpress特有のコードを書いたり、スクリプトタグなんかは一括にここにまとめてしまうのがいいでしょう。

wordpressの独自タグを埋め込んでいく {{id="post-head-03"}}

HTMLをphpに切り分けられましたが、次はWordpressの独自タグを埋め込んでいきます。

自動でメタタグなんかを出力したり、プラグインを導入して反映させたりするために呼び出さなければいけないコードがあります。

後は現状だと投稿した記事が表示されないので、Wordprssのデータベースから記事を引っ張ってきてリスト化するというループを組み込みます。

サイドバーに関してはカテゴリの記事数取得ぐらいなので一旦サイドバーに関しては無視して進めます。

header.php

とりあえずheader.phpを形成しましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

<? wp_head(); ?>

    <link rel="stylesheet" href="<?php bloginfo('template_url') ?>" type="text/css">
    <title><?php bloginfo('name'); ?></title>
  </head>
  <body>
    <div class="all--wrap">
      <div class="header--wrap">
        <header>
          <h1>オリジナルブログタイトル</h1>
          <div class="header--desc--wrap">
            <p>当ブログの概要サンプルテキストです。オリジナルテーマを作り見やすいブログを作って発信していきましょう。</p>
          </div>
          <nav>
            <div class="header--nav--wrap">
              <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">MENU_1</a></li>
                <li><a href="#">MENU_2</a></li>
                <li><a href="#">MENU_3</a></li>
                <li><a href="#">MENU_4</a></li>
              </ul>
            </div>
          </nav>
        </header>
      </div>
      <div class="content--wrap">

軽く説明するとmetaタグをちょっと増やしました。特に重要ではないので説明は端折ります。

いちばん重要な部分は「」この部分ですね。

これはwordpress独自の関数で、元々用意されてるヘッダ用タグが自動で生成してくれます。

プラグインでヘッダに埋め込まなければいけないCSSやスクリプトのタグなんかもプラグインをオンにすれば自動的にここで出力されるようになります。

逆に言うとこれがないと自分でコードを書かないといけないのでプラグインの手軽さという恩恵を受けられなくなるので注意しましょう。

このタグのデメリットは制御をしないと、余計なコードを出力することです。

中でも一番要らないのは、デフォルトではワードプレスのバージョンを表記するコードが出力されるやつです。

ワードプレスのバージョンなんか表記しても誰もとくしないですし、最悪古いままだと悪意のある人間に標的として狙われる可能性が高くなります。

ゆえにそのバージョンを出力させないようにfunctions.php等で制御してやる必要があります。

その件に関してはまた別記事で説明します。

今回はあまり気にせず、「」は記述しなきゃいけないんだと思ってくれたらOKです。

自動出力なんていらん！プラグインも使わないし全部自分で書く！って人は書かなくても大丈夫です。

index.php

現状記事の部分は直書きになってるので、そこをDBから引っ張ってきて指定した数分記事を表示するというWordpressの基本中の基本にコードを埋め込みます。

<?php get_header(); ?>

        <div class="main--wrap">
          <main>
            <div class="main--article--wrap">
              <article>
                <ul>
                  <?php if (have_posts()) : while (have_posts()) : the_post(); ?><li class="article--entry--wrap">
                    <section>
                      <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" itemprop="url">
                        <div class="entry--header--wrap">
                          <h1><?php the_title(); ?></h1>
                          <div class="entry--time--wrap">
                            <time><?php the_time('Y-n-j'); ?></time>
                          </div>
                          <div class="entry--cat--wrap">
                            <h2><?php $cat = get_the_category(); $cat = $cat[0]; echo '<a href="'. get_category_link($cat->cat_ID) . '">' . $cat->cat_name . '</a>' ?></h2>
                          </div>
                        </div>
                        <div class="entry--desc--wrap">
                          <?php if (has_post_thumbnail()) : ?>
                            <?php the_post_thumbnail('thumbnail'); ?>
                          <?php else : ?>
                          <img src="<?php bloginfo('template_url'); ?>/assets/images/entry-dummy.jpg" width="100%">
                        <?php endif ; ?>
                        <?php the_excerpt(); ?>
                        </div>
                      </a>
                    </section>
                  </li><?php endwhile; endif; ?>
                </ul>
              </section>
            </div>
          </main>
        </div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

だいぶスッキリしましたね。

PHPのループ構造を取り入れるのがWordpressの記事表示の基本となります。

今回はULタグの中のLIタグが記事毎にあるので、ULタグの直下に条件＆ループ構文を含めています。

「if (have_posts()) : while (have_posts()) : the_post();」

これを1つずつ説明すると

もし「投稿が１つでもあるなら」、投稿数分繰り返せ。

といった感じです。

いわゆるポストループってやつです。

最後の「the_post()」はwhileでポストループ中に1つの記事を取り出してきてくれる便利関数です。

プログラミング的に言うとhave_postsが記事の配列だったとして the_postで1つ1つ記事を順番に取り出していくといったイメージですね。

その1回のループの中で「the_title();」ってやると取り出した記事のタイトルを表示する。

って感じの説明だと恐らくわかりやすいですかね。

もっと詳しく知りたい人はWordpressの公式リファレンスを見てもらったほうが良いです。

日付の部分に関しても特に言及することはないのでリファレンスをご覧あれ。

強いて言うなら表示フォーマットぐらいでしょうか。

今回は年月日をハイフンで区切った表示にしています。

カテゴリについて

カテゴリを表示する部分がちょっと厄介で、初学者は混乱してしまう場所かなと思います。

「get_the_category」の部分ですね。

なにやら変数に取り出して処理しています。

該当してるカテゴリを表示するだけならもっとシンプルになりますが、カテゴリをクリックしたときに、カテゴリ一覧へ飛ぶためのリンクを作りたいので、一度カテゴリ情報を取り出してその該当するカテゴリIDを利用してリンクを生成してると行った感じです。

カテゴリに関しては今の所こんな書き方でいいんだなって思ってもらうだけでいいです。

もしココをイジる時が出てきたら詳しく調べるぐらいで大丈夫です。

記事概要表示部分とサムネイル

「the_excerpt」は記事の抜粋として設定している文章を表示してくれる関数です。

抜粋を設定していない場合は画像を除いた記事の最初の方を表示してくれるはずです。

そしてサムネイルですが、Wordpressでは基本的にはアイキャッチと呼ばれる場所に記事のサムネイルを設定して記事一覧にはそのサムネイル情報を引っ張ってきて表示します。

余談ですが、私は記事そのものにも画像を貼ってるしサムネイル設定いちいち面倒くさいなってなって記事の最初にある画像を引っ張って表示してくれる関数を作って、サムネイルの設定をしなくて良いように組んでいました。

サムネイルのメリットとしては記事トップの画像とサムネ画像を別々にしたいときぐらいですかね。

大抵は同じ画像をサムネにしている人多いと思うので、全く同じ画像のサイズ小さい版を作るのもファイルサイズ肥大化になりますからそういうのは元画像をスクリプトでこねこねしてやればいいのでは？ってなってしまいます。

が、恐らく万人受けしないやり方なので今回はそのやり方を見送って素直にサムネイルを利用する仕組みにしています。

サイドバーとフッターについて

フッター専用タグもありますが、今はまだいらないので一旦サイドバーとフッターは無視して進めます。

中身もそのままでOKです。

開いたら閉じるはプログラミングの基本

ループの最後となるLIタグの後ろにendwhileとendifをちゃんと設定しましょう。

これがないとphpエラーが発生して画面が真っ白になるかエラー文が表示される原因です。

動かないときはエラーコードをググろう {{id="post-head-04"}}

phpに慣れていないと恐らくエラーまみれになってモチベーションをゴリゴリ削られます。

その時はなぜエラーになっているのかちゃんと見てそれをググりましょう。

大抵はエラーコードやエラーメッセージが記述されていますので、 Wordpressの場合なんかはググると大体みつかります。

今では日本語の解説も増えましたが、基本は英語解説が多いので今のうちに英語を読む癖をつけておいたほうが後々のためになります。

英文を読むのが辛い人は惜しまずGoogle翻訳を使って、すべて鵜呑みにせす日本語がおかしいなと感じる部分は原文に戻してその原文だけをしっかりと解読すればOKです。

次回は記事部分とサイドバーを入れ替える仕組みを作っていきます。

一応ネタバレをしておくと、flexboxの「flex-direction」を調整してもらうと良いです。

次に行く前に自力で入れ替えシステムを作ってみて、次の記事で答え合わせをしてみるのが一番成長するかもしれません。

それでは。