【初心者必見】
WordPressのテーマを作ろう！
〜その5：ヘッダーとフッターを作成してみよう〜

2021/02/17

2021/03/14

WordPressのテーマを作成してみよう

■目次

前回のあらすじ

【初心者必見】WordPressのテーマを作ろう！〜その4：「404」と固定ページを設定してみよう〜

WordPress「自作テーマ作成」第4弾！　前回では「投稿」の内容を3つのテンプレートに出力しました。第4弾では「404」ページと固定ページの「自己紹介」ページの内容を作成・表示していきます。

着々とWordPressのテーマ作成が進み、404ページと固定ページの「自己紹介」を設定できた2人。
残るヘッダーとフッターを整えればゴールだと意気込む頃、栖天が何かに気づいた様子……？

*

唯月

あとはヘッダーとフッターを整えるだけでOKとなってきたわね。

*

栖天

はい！　……いえ、待ってください！
ページリストアップを見ると、TOPページとサイドバーが残っています。

*

唯月

あら、忘れていたわ。気づいてくれてありがとう。
TOPページは次回に説明するとして、今回はヘッダー・フッター・サイドバーの3つを作成していきましょう。

前回は「404.php」「page.php」の2つのテンプレートに、それぞれの内容を表示するようにしました。
栖天ちゃんが残りのページを見つけたようですが、今一度ページのリストアップリストを確認しましょう。

残るページ

  • TOP（home.php）
  • ヘッダー（header.php）
  • フッター（footer.php）
  • サイドバー（sidebar.php）
  • メインテンプレート（index.php）

残りのページは上記5つとなりましたが、今回作成していくのは共通パーツである「header.php」「footer.php」「sidebar.php」の3つのテンプレートとなります。
それでは内容を設定・記述していきましょう！

header.phpにヘッダー内容を記述しよう！

まず現状のheader.phpの表示を確認しておきましょう。
特に何も手を加えていないのであれば、ブラウザには「ここにヘッダーが入ります。」のテキストのみが表示されているだけになっているはずです。第2弾の記事でheader.phpに最低限の記述を加えているため、コードにはその内容が記載されているのが確認できますよ。

<!DOCTYPE html> 
<html lang="ja"> 
  <head> 
    <!-- head内容 --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width user-scalable=no"> 
    <title>サイトタイトルが入ります。</title> 
    <?php wp_head(); ?> 
  </head> 
  <body> 
    <!-- bodyコンテンツ --> 
    <header> 
      <!-- ヘッダーコンテンツ --> 
      ここにヘッダーが入ります。 
    </header>

現状のコードが確認できたところでheader.phpに内容を追記していきます。が、その前に、表示に必要な内容をピックアップしましょう。加えて、ヘッダーとは何かおさらいしたいと思います。ヘッダーとは、サイトのページ上部に常に表示されるコンテンツのことを指します。サイト閲覧者に「どのサイトを表示しているのか」「どんなコンテンツがあるのか」を知らせる役割を持っているでしょう。

まず「どのサイトを表示しているのか」について見ていきましょう。
数々のサイトに訪問したことがある方はお気づきかもしれません。訪問先のページ上部にサイトや企業のロゴが表示されているのを見たことがあると思います。これが「どのサイトを表示しているか」を示すものとなります。
またロゴに、TOPページのリンクを貼っていることも多いですね。

*

唯月

今では「何となく」「みんなやってるから」という理由でヘッダーにサイト名とか記載することが多くなってきたわね。

*

栖天

そんなものだと思ってました。

*

唯月

ロゴをクリックしたらTOPへ飛ぶ……。これも当たり前のようになってきているわね。UXを考慮するなら、この辺りも押さえておいてもいいと思うわ。

次に「どんなコンテンツがあるのか」について確認しましょう。
先ほど、ヘッダーにはロゴがあることが多いと説明しました。加えてロゴの下部や右側に、各ページへのリンクが表示されていることも多いと思い出したのではないでしょうか。この各ページへのリンクを「グローバルナビゲーション」といいます。このナビゲーションを設置することで、サイト訪問者にどんなページ・コンテンツが存在するのか簡単に伝えることができますよ。

このサイト「さとよだドキュメント」も、ロゴとグローバルナビゲーションを設置しています。

また、これらロゴ・グローバルナビゲーションは共通パーツのヘッダーに表示しているため、どのページにアクセスしても常に表示されます。色々なページに遷移して迷子になることがなくなるという役割もありますよ。
では実際に、ロゴとグローバルナビゲーションをheader.phpに追記していきましょう。

ヘッダーにロゴorサイト名を追加しよう！

ロゴはデザイン性あるものが使用されることが多いため、画像で設定されることが多いです。
画像があるなら用意しておくとよいでしょう。単なるサイト名でOKであればテキストで記述していきます。
Finderに戻って、テーマフォルダ「first-theme」にある「header.php」をエディタで開いて編集してくださいね。

編集後のheader.php
編集内容）14行目：pタグサイト名追加

<!DOCTYPE html> 
<html lang="ja"> 
  <head> 
    <!-- head内容 --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width user-scalable=no"> 
    <title>サイトタイトルが入ります。</title> 
    <?php wp_head(); ?> 
  </head> 
  <body> 
    <!-- bodyコンテンツ --> 
    <header> 
      <!-- ヘッダーコンテンツ --> 
      <p>ここにロゴ、もしくはサイト名が入ります。</p> 
    </header>

画像の場合

<!DOCTYPE html> 
<html lang="ja"> 
  <head> 
    <!-- head内容 --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width user-scalable=no"> 
    <title>サイトタイトルが入ります。</title> 
    <?php wp_head(); ?> 
  </head> 
  <body> 
    <!-- bodyコンテンツ --> 
    <header> 
      <!-- ヘッダーコンテンツ --> 
      <p><img src="画像のパス" alt="サイト名"></p> 
    </header>

保存してブラウザで表示確認すると、テキストが変わっていることが確認できます。
CSSで整えると見た目が良くなりますよ。

ヘッダーにグローバルナビゲーションを追加しよう！

サイト名を追加しただけでは、テキストが変わった程度で特に変化はありません。
次にグローバルナビゲーションを追加していきましょう。ナビゲーションがあることで、ヘッダーらしさが増しますよ。

グローバルナビゲーションの追加ですが、いつでも変更できるようWordPressの管理画面から設定できるようにしましょう。header.phpにulタグとliタグを使って直書きすることも可能です。ただその場合、ナビゲーションを変えたいと思った時にコードファイルを逐一編集しないといけなくなります。
ナビゲーションの変更頻度に合わせて、好きな方を選択してくださいね。

今回はWordPressの管理画面から設定するため、まずはナビゲーションの編集箇所を確認しておきましょう。
管理画面の左側にある黒背景メニューバー「外観」をマウスオーバーしてください。
その後表示される「メニュー」をクリックしてくださいね。

*

栖天

あれ？　あれれ？
「外観」はあったのですが「メニュー」が見つかりません……。

*

唯月

あら。では「メニュー」が表示されるように設定しましょうか。

栖天ちゃんのように、WordPress管理画面「外観」をマウスオーバーしても「メニュー」が表示されないという状況になっていませんか？　もし同じようになっていた場合は「メニュー」という項目が表示されるように設定していきます。

管理画面での項目を追加・変更したい場合は、テーマフォルダにある「functions.php」を編集します。
Finderに戻って「first-theme」フォルダ内のfunctions.phpをエディタで開いてくださいね。

functions.phpの中には、既に「投稿」アーカイブページのパーマリンクを変更する記述があるはずです。
そのコードの後ろに、グローバルナビゲーションのメニュー追加のコードを追記していきます。

現状のfunctions.php

<?php 
  //「投稿」アーカイブのパーマリンク変更コード 
  function post_has_archive( $post_args, $post_type ) { 
    if ( $post_type == 'post' ) { 
      $post_args['rewrite'] = true; 
      $post_args['has_archive'] = 'post-archive'; 
    } 
    return $post_args; 
  } 
  add_filter( 'register_post_type_args', 'post_has_archive', 10, 2 ); 
 
  //ここに「メニュー」の設定コードを追加していきます。

上記コードの12行目以降に、該当コードを追加します。

メニューを追加するにはどうすればいいのか？　と考えますが、WordPressにはメニューを追加する関数が存在します。
いつもお世話になっている「WordPress Codex 日本語版」にアクセスし、右上の検索バーに「ナビゲーションメニュー」と入力後エンターキーを押してください。
するとメニューを登録するために使用する関数たちが表示されるページが表示されます。

引用：WordPress Codex日本語版 ナビゲーションメニュー（https://wpdocs.osdn.jp/ナビゲーションメニュー）/ 2021年2月10日現在

このメニューページに載っている方法を利用して、functions.phpにメニューを追加するコードを書いていきます。
項目「関数リファレンス」にある「ナビゲーションメニューの登録」を見てください。
3つの関数が並んでいるのを確認できますよ。

ナビメニュー登録の関数

  • register_nav_menus()
  • register_nav_menu()
  • unregister_nav_menu()

これら3つの関数の違いについて説明していきます。
また関数使用時のコード記述方法についても記載するため、ぜひ参考にしてくださいね。

register_nav_menusについて・使い方

まず1つめ「register_nav_menus()」についてですが、これは関数名からわかる通り、ナビゲーションメニューを登録する関数です。末尾の「menu」に「s」がついていることから、複数のメニューを設定することができます。

register_nav_menusを使用する際は、add_filterを使ってメニュー登録のタイミングを同時に設定します。
関数を一つ設定し、それをadd_filterで実行するという形をとります。設定した関数の中に、register_nav_menuの内容を記述しますよ。

<?php 
  function register_navigation() { 
    register_nav_menus( 
      array( 
        'gloval_navigation' => 'gloval_navigation', 
        'navigation2' => 'navigation2' 
      ) 
    ); 
  } 
  add_filter( 'after_setup_theme', 'register_navigation' );

2行目で関数「register_navigation」を設定します。この「register_navigation」という名前は、この段階では自由にリネームが可能です。わかりやすい名前に変更しましょう。
今回は「ナビメニューを登録」ということで、登録を示す英語「register」とナビゲーションを示す英語「navigetion」を組み合わせています。
また関数名の後ろの丸括弧「()」の中には引数を設定しますが、今回は引数を利用する予定がないため、空にします。

3行目で本命の関数「register_nav_menus」を実行するコードを記述します。
末尾が「menus」と「s」がある場合、複数のメニューが登録できるため、丸括弧の中には配列の形でナビゲーションを記述していきます。
配列「array」と記述しているのが4行目になりますね。

5〜6行目に、登録するメニューをarrayの中に記述しています。
「=>」の左側は配列のキーとなり、テンプレートを編集する際によく使用します。キー名には、半角英数字と記号を利用する場合は「-」「_」のみ使用するようにしましょう。
矢印の右側は管理画面に表示される名前になります。分かりやすいように日本語で「グローバルナビゲーション」「ヘッダーメニュー」といった名前にしておくと良いでしょう。

'gloval_navigation' => 'グローバルナビゲーション', 
'navigation2' => 'メニュー2'

register_nav_menuについて・使い方

次に2つめの関数「register_nav_menu()」についてです。1つめの「register_nav_menus()」と同じように見えますが、こちらは末尾に「s」がついていません。ナビゲーションメニューを登録する関数ではありますが、1つめの関数と違いメニューは1つしか設定することができません。

「register_nav_menu()」と同じく、add_filterを使ってメニュー登録を設定します。

<?php 
  function register_navigation() { 
    register_nav_menu( 'gloval_navigation', 'グローバルナビゲーション' ); 
  } 
  add_filter( 'after_setup_theme', 'register_navigation' );

複数登録の関数と違い「register_nav_menu」の丸括弧内の記述が変わっています。
配列「array」の中にメニュー名を登録していましたが、ここでは1つしか登録できないため「'メニューのキー名', 'メニューのラベル名'」となり、arrayと「=>」を削除した形の記述方式に変わりますよ。

unregister_nav_menuについて・使い方

3つめ「unregister_nav_menu()」は、登録しているナビゲーションメニューを登録解除する関数になります。
わざわざ登録したメニューを、削除する記述で消すなんて必要あるのか？　と思いますが、子テーマとして新たにテーマを作成する際に、親テーマに存在するメニューを削除する時に使うことになります。親テーマに変更を加えたくない場合に使用する関数と言えるでしょう。
基本的にはそんなに使うことがないと思います。

使い方は「register_nav_menu()」と同じです。
add_filterを使ってメニュー解除と、解除するタイミングと合わせて設定します。

<?php 
  function unregister_navigation() { 
    unregister_nav_menu( 'gloval_navigation' ); 
  } 
  add_filter( 'after_setup_theme', 'unregister_navigation' );

メニュー登録の関数と違って、ラベルの名前は不要となります。
登録したキー名のみを丸括弧内に記述してくださいね。

functions.phpにメニュー登録の記述を追加しよう！

メニューを設定する関数がわかったところで、実際にfunctions.phpに記述を行っていきましょう！
今回グローバルナビゲーションを1つ登録するだけになるため、使用する関数を「register_nav_menu」とします。
Finderに戻って、テーマフォルダ「first-theme」内「functions.php」をテキストエディタで開いて編集してくださいね。

編集後のfunctions.php
追記箇所）13〜16行目：メニュー登録の関数追加。

<?php 
  //「投稿」アーカイブのパーマリンク変更コード 
  function post_has_archive( $post_args, $post_type ) { 
    if ( $post_type == 'post' ) { 
      $post_args['rewrite'] = true; 
      $post_args['has_archive'] = 'post-archive'; 
    } 
    return $post_args; 
  } 
  add_filter( 'register_post_type_args', 'post_has_archive', 10, 2 ); 
 
  //「メニュー」の登録コード 
  function register_navigation() { 
    register_nav_menu( 'gloval_navigation', 'グローバルナビゲーション' ); 
  } 
  add_filter( 'after_setup_theme', 'register_navigation' );

追記ができたら、保存してWordPressの管理画面に戻ってください。
正しくコードが追加できていれば、画面左側のメニューバーにある「外観」をマウスオーバーすると、登録前にはなかった「メニュー」の文字が表示されているのが確認できますよ。

「メニュー」が確認できたらクリックして、メニューの設定画面を開いてみましょう。
コードを追加したことで、メニューの箱ができた状態になります。
そのメニュー箱の中に、設置したい項目・ページ名を設定していきますよ。

メニュー設定画面が開けたら、メニュー名を記入し、青ボタン「メニューを作成」を押してください。
メニューの内容は一旦デフォルトの「ホーム」と「サンプルページ」のみにしておきます。
項目は後で変更することが可能ですよ。

「メニューを作成」をクリックすると、表示がちょこっと変わって画面上部に「位置を管理」タブが表示されるようになります。また「メニュー構造」エリアにある、メニューの各リンクの下に「メニュー設定」という項目が追加されているのが確認できますよ。

その「メニューの位置」に、functions.phpで追記したメニュー登録コードに記載した「グローバルナビゲーション」の文字が表示されているのがわかると思います。コードのラベル名を変更すると、管理画面に表示される文字列も変わるのが確認できます。

「メニュー名」がグローバルナビゲーションになっていることを確認して、メニュー設定の「メニューの位置」にあるグローバルナビゲーションにチェックを入れましょう。チェックを入れることができたら「メニューを保存」ボタンをクリックしてくださいね。

「メニューを保存」ボタンを押して、保存ができたらこれでグローバルナビゲーションの事前設定が完了です。
ですがこの段階ではまだサイト上にナビが表示されません。
実際にサイトの表示画面にこの設定したナビゲーションを表示するよう、設定を行っていきましょう。

グローバルナビゲーションを表示する設定を追記しよう！

グローバルナビゲーションを表示させたい場所をまず決めておきましょう。
今回はヘッダーロゴの下にナビを表示するようにします。

次に、管理画面で設定したグローバルナビゲーションを表示するコードについて確認していきます。
WordPressには「メニュー」を表示するテンプレートタグが存在するため、それを使用します。
公式マニュアルを確認しながら、該当の関数を確認しましょう。

メニューの表示関数（WordPress公式マニュアル）
WordPress Codex 日本語版「テンプレートタグ/wp nav menu」

上記リンクにアクセスし、テンプレートタグ「wp_nav_menu()」について確認してください。
「説明」や「使い方」にあるように、丸括弧の中には各種設定項目が入った配列を記述します。
各種項目の内容については、同ページの「パラメータ」項目をチェックしてくださいね。

引用：WordPress Codex日本語版 テンプレートタグ/wp nav menu（https://wpdocs.osdn.jp/テンプレートタグ/wp_nav_menu）/ 2021年2月10日現在

管理画面で登録したメニュー「gloval_navigation」(ラベルは「グローバルナビゲーション」)を使用したいため、パラメータ「'theme_location'」を指定します。メニューを表示するだけであればこのパラメータを1つ指定するだけでOKです。

さっそく記述していきましょう。
Finderに戻って「first-theme」の中にある「header.php」を開いてくださいね。
今回表示するナビゲーションを、クラス名「gloval_nav」のdivタグで囲みます。

編集後のheader.php
編集箇所）15〜22行目：メニュー「グローバルナビゲーション」を表示

<!DOCTYPE html> 
<html lang="ja"> 
  <head> 
    <!-- head内容 --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width user-scalable=no"> 
    <title>サイトタイトルが入ります。</title> 
    <?php wp_head(); ?> 
  </head> 
  <body> 
    <!-- bodyコンテンツ --> 
    <header> 
      <!-- ヘッダーコンテンツ --> 
      <p>ここにロゴ、もしくはサイト名が入ります。</p> 
      <div class="gloval_nav"> 
        <?php 
          $menu_args = array( 
            'theme_location' => 'gloval_navigation' 
          ); 
          wp_nav_menu( $menu_args ); 
        ?> 
      </div> 
    </header>

17行目、変数「$menu_args」を作成し、その中に配列内「'theme_location'」に、functions.phpと管理画面で設定した「gloval_navigation(グローバルナビゲーション)」を指定してます。

20行目、テンプレートタグ「wp_nav_menu」でメニューを出力しています。
丸括弧内には、17行目で設定した変数を記述しています。

記述後に保存し、ブラウザで表示を確認しましょう。
正しく記述ができていると、ヘッダーのロゴ下に管理画面で設定したメニューが表示されているのが確認できますよ。

リンク付きのリストが表示されているのが確認できました。
これでグローバルナビゲーションを表示することができました！

あとはCSSを整えることでナビゲーションっぽくできますよ。
また、現段階では出力されたHTMLコードが乱雑な形になっています。wp_mav_menuのパラメータを調整することで変更できるため、好きな形に変えてみてくださいね。

ヘッダーをヘッダーらしく設定できたところで、次にフッターを整えていきましょう！

footer.phpにフッター内容を記述しよう！

まず現段階でのfooter.phpの表示を確認しておきましょう。
header.phpと同じく、特に何も手を加えていない状態の場合ブラウザに「ここにフッターが入ります。」のテキストのみが表示されているはずです。第2弾の記事でfooter.phpに最低限の記述を加えているため、コードにはその内容が記載されているのが確認できます。

    <footer> 
      <!-- フッターコンテンツ --> 
      ここにフッターが入ります。 
      <?php wp_footer(); ?> 
    </footer> 
  </body> 
</html>

では次に、フッターに表示したい内容をピックアップしていきます。
多くのサイトではフッターに表示する内容として、コピーライトや複数ページがある場合はそれぞれへのリンクを設置しています。また、各SNSへのリンクや企業サイトであればロゴマークを表示しているサイトが確認できます。

他のサイトのフッターを参考にしたい場合は、Google検索等で「サイト　フッター」と検索をかけるといいでしょう。
さまざまなサイトのフッターが表示され、どんな表示にしているか確認できますよ。

この作成中のテーマ「first-theme」のフッターに表示する内容は以下とします。
なお各ページのへのリンクについては、TOPページ・投稿アーカイブ・自己紹介の3つになります。

  • コピーライト
  • 各ページへのリンク

ではこれら2項目を設定していきましょう！

フッターにコピーライトを追加しよう！

コピーライトとは、Webサイトの著作権のことを指します。
サイトの著作権が誰にあるか示すために表記するテキストになります。
コピーライトはあってもなくても問題がありませんが、明示的にわかるよう記載しておきましょう。

コピーライトに必要な内容は以下の3つとなりますよ。

  • Copyright（©︎）
  • サイト公開時の西暦
  • 著作権を持っている人の名前（サイト名）

これら3つを組み合わせると、記述内容は以下のようになります。
「©︎ 2021 サイト名」
※2021年にサイトを公開した場合

なお、サイト名はWordPressの管理画面で設定した内容を取得することができます。
サイト名を変更することは少ないと思いますが、コピーライトを都度変更しなくてもいいように、管理画面に登録したサイト名を表示するようにしましょう。

サイト名を取得・表示する関数は以下になります。

WP公式マニュアル「get_bloginfo」
WordPress Codex 日本語版「テンプレートタグ/get bloginfo」

get_bloginfo使用例

<?php echo get_bloginfo( 'name' );?>

テンプレートタグ「get_bloginfo」の丸括弧内において、使用できるテキストや、その詳細については上記マニュアルの「パラメータ」項目に一覧が載っています。詳しく内容を確認したい場合は、マニュアルをご覧ください。

なおコピーライトを示す「©︎」はHTMLの特殊文字扱いとなります。
直接「©︎」と記述するのではなく、ブラウザで正しく表示される「&copy;」と記載するようにしましょう。

では実際にfooter.phpに記述していきましょう。
著作権・ライセンス要件を示すsmallタグで、コピーライトを囲みます。
Finderに戻って「first-theme」フォルダ内にある「footer.php」を編集してください。

編集後のfooter.php
編集箇所）3行目：コピーライト追加

    <footer> 
      <!-- フッターコンテンツ --> 
      <small>&copy; 2021 <?php echo esc_html( get_bloginfo( 'name' ) );?></small> 
      <?php wp_footer(); ?> 
    </footer> 
  </body> 
</html>

編集ができたら保存し、ブラウザで表示チェックを行うと正しくコピーライトが表示されているのが確認できますよ。
また、HTMLでは「&copy;」と記載した内容が、表示上では「©︎」と変換されているのがわかります。

これでフッターにコピーライトを表記することができました！
次に各ページへのリンクを追加しましょう。

フッターに各ページのリンクを追加しよう！

ヘッダーのグローバルナビゲーションと同じく、管理画面でメニューを作成しリンク一覧を表示するようにしましょう。グローバルナビゲーションでは、functions.phpにメニューの位置を登録した後に管理画面でメニューを作成しました。
フッターも同じように設定していきましょう！

まずはfunctions.phpにメニューの位置を登録する記述を追記していきます。
Finderで、テーマフォルダ「first-theme」内のfunctions.phpをエディタで開いてください。

編集後のfunctions.php
編集箇所）14〜19行目：メニュー登録コード修正

<?php 
  //「投稿」アーカイブのパーマリンク変更コード 
  function post_has_archive( $post_args, $post_type ) { 
    if ( $post_type == 'post' ) { 
      $post_args['rewrite'] = true; 
      $post_args['has_archive'] = 'post-archive'; 
    } 
    return $post_args; 
  } 
  add_filter( 'register_post_type_args', 'post_has_archive', 10, 2 ); 
 
  //「メニュー」の登録コード 
  function register_navigation() { 
    register_nav_menus( 
      array(  
        'gloval_navigation' => 'グローバルナビゲーション', 
        'footer_menu' => 'フッターメニュー', 
      ) 
    ); 
  } 
  add_filter( 'after_setup_theme', 'register_navigation' );

メニューの複数登録にあたって、14行目の「register_nav_menu」を「register_nav_menus」に変更しました。
また関数を変更したため、丸括弧内に直接記述していたメニューの内容を「array」という配列の形に変更しています。

単数メニューの登録関数「register_nav_menu」の形のままだとエラーが出てしまうため、記述変更の際は気をつけてください。カンマを「=>」に直したり、括弧の数を間違えないようにチェックしてくださいね。

ではfunctions.phpに追記後、保存できたらWordPressの管理画面に戻ってメニューを追加しましょう。
左サイドバー「外観」>「メニュー」をクリックしてください。

メニューの編集画面が開けたら、フッター用のリンク一覧を作成するために画面上部に表示される「新しいメニューを作成しましょう。」のテキストをクリックしてくださいね。クリックすると新規メニュー作成画面が表示されます。
まずは「メニュー名」に名前を記入しましょう。その次に下の方にある「メニュー設定」で「フッターメニュー」にチェックを入れた後、青ボタン「メニューを保存」をクリックしましょう。
メニュー名は日本語でOKです。わかりやすい名前にするといいでしょう。

ここまでの管理画面での手順

  1. 「外観」の「メニュー」をクリック
  2. 「新しいメニューを作成しましょう。」から新規メニューを作成
  3. 「メニュー名」にメニューの名前を記入(日本語OK)
  4. 「メニュー設定」の「メニューの位置」にある「フッターメニュー」にチェックを入れる
  5. 青ボタン「メニューを作成」をクリック

これらが完了すると「メニュー項目を追加」からリンクページを選択することができるようになります。
フッターに表示させたいリンク・記事を選択して「メニューに追加」してくださいね。
該当するページがない場合は「カスタムリンク」から直接URLを記入して設定することができますよ。

今回、フッターに表示するリンクは以下の3つにします。

  • TOPページ
  • 投稿アーカイブ
  • 自己紹介ページ

TOPページと投稿アーカイブについてはカスタムリンクから、自己紹介ページは固定ページから追加していきます。
※固定ページや投稿記事など設定したい場合に、該当記事が「下書き」「非公開」の場合は選択項目に表示されないため選択できない状態になります！
　メニューにて選択したい記事がある場合は、必ず「公開」状態にしておきましょう。

カスタムリンクを追加する場合、メニューの項目追加エリアから「カスタムリンク」をクリックしてください。
「URL」と「リンク文字列」の2つを入力する箇所があるため、リンク先のURLと画面に表示するテキストをそれぞれ入力してくださいね。
入力ができたら「メニューに追加」ボタンを押して、メニュー項目を追加しましょう。

固定ページから表示したいページを選択する場合は、メニューの項目追加エリアにある「固定ページ」をクリックしてください。最近投稿された・編集された記事は、タブ「最近」に表示されるため、該当記事があればチェックをいれてくださいね。チェックを入れたあとは、下に表示されている「メニューに追加」ボタンを押して、項目の追加を行ってください。

もし「最近」タブに該当記事がない場合は、タブ「全て表示」をクリックすると記事が見つかりますよ。
※それでも記事が表示されない場合は、記事のステータスが「下書き」「非公開」になっていないかチェックしてくださいね。

全ての記入・設定ができたら、青ボタン「メニューを保存」をクリックしましょう。
正しく保存ができたら、画面の上部に白帯で「フッターメニュー を更新しました。」の文字が表示されますよ。

これでフッターメニューの内容を登録することができました！
次に、実際にフッターにこのメニューを表示していきましょう。
表示する方法はheader.phpで記述した内容と一緒になります。

テンプレートタグ「wp_nav_menu()」を使うことで、メニューを表示することができましたね。
フッターも同じくこのテンプレートタグを使用します。
Finderに戻って、テーマフォルダ「first-theme」内にある「footer.php」をエディタで開いて編集してください。
コピーライトの上に、メニュー（リンク一覧）を表示するようにします。

編集後のfooter.php
編集箇所）3〜8行目：テンプレートタグ「wp_nav_menu」追加。メニューを表示

    <footer> 
      <!-- フッターコンテンツ --> 
      <?php 
          $footer_menu_args = array( 
            'theme_location' => 'footer_menu' 
          ); 
          wp_nav_menu( $footer_menu_args ); 
      ?> 
      <small>&copy; 2021 <?php echo esc_html( get_bloginfo( 'name' ) );?></small> 
      <?php wp_footer(); ?> 
    </footer> 
  </body> 
</html>

ブラウザでの表示

コピーライトの上に、追加したメニューが表示されました！
あとはCSSで整えるとよりフッターらしくなりますよ。
グローバルナビゲーションとは違うため、テキストのサイズはもう少し小さくしてもいいかもしれませんね。

これで、フッターに表示する内容全ての設定が完了しました。

sidebar.phpにサイドバーの内容を記述しよう！

WordPressには、ヘッダー「header.php」とフッター「footer.php」という共通パーツのテンプレートが存在していることがわかりました。共通パーツはヘッダー・フッター以外にもいくつかテンプレートが存在します。これら共通パーツのことを、WPでは「モジュールテンプレート」（あるいは「モジュール式のテンプレート」）と呼称しています。

モジュールテンプレートは「page.php」「archive.php」といった通常のテンプレートと違い、テンプレート単体で使用することがありません。通常のテンプレートに埋め込み・呼び出しを行ってサイト上に表示させます。

モジュールテンプレートはヘッダー・フッターはもちろん、以下の6つの要素が該当します。

  • ヘッダー（header.php）
  • フッター（footer.php）
  • サイドバー（sidebar.php）
  • コメント（comments.php）
  • ポップアップ式コメント（comments-popup.php）
  • 検索フォーム（searchform.php）

今回このテーマでは「コメント」「ポップアップ式コメント」「検索フォーム」の3つのモジュールは使用しません。
ヘッダー・フッターは既に作成しているため、残りのサイドバーを作成していきましょう。

*

栖天

ヘッダーとフッターはわかりますけど、サイドバーってどのページで使えばいいんでしょうか？

*

唯月

そうね……。2カラムのサイトでは全ページにサイドバーを表示しているところもあるし、投稿記事やアーカイブだけサイドバーを表示しているところもあるわね。

*

栖天

サイトによっていろいろあるんですね。

*

唯月

サイト作成者の好みもあるものね。
今回はサイドバーに載せたい情報も少ないから、投稿ページのみに最新記事を表示するサイドバーという形にしましょうか。

ではFinderに戻って、サイドバーのテンプレートを確認しましょう。
現段階では、テンプレートを作成しただけでファイル内には記載がないはずです。
さっそくサイドバーの大枠となるHTMLを記述していきましょう。クラス名「sidebar」のdivタグを使用します。

<div class="sidebar"> 
  ここにサイドバーが入ります。 
</div>

サイドバーを表示するページのテンプレートに追記をしよう！

header.phpとfooter.phpの場合、表示したいページに「get_header」「get_footer」という記述を行っていました。
サイドバーであるsidebar.phpも同じく、表示したいページに「get_sidebar」を記述する必要があります。

今回サイドバーを表示したいページは「投稿」関連になるため、以下の3つのテンプレートに「get_sidebar」の記述を追加しましょう。サイドバーの設置は、クラス「main_content」のdivタグの後にします。

  • archive.php
  • category.php
  • single.php

追記後のarchive.php
追記箇所）8行目：get_sidebarを追記

<?php get_header();?> 
  <?php 
    〜中略〜（各種変数設定が記述されています） 
  ?> 
  <div class="main_content"> 
    〜中略〜（記事一覧の出力内容が記述されています） 
  </div> 
  <?php get_sidebar();?> 
<?php get_footer();?>

保存後ブラウザで表示チェックをすると、記事一覧リストの下部に「ここにサイドバーが入ります」テキストが表示されます。sidebar.phpに別の内容を記述している場合は、記述内容が表示されているはずです。

追記後のcategory.php
追記箇所）8行目：get_sidebarを追記

<?php get_header();?> 
  <?php 
    〜中略〜（各種変数設定が記述されています） 
  ?> 
  <div class="main_content"> 
    〜中略〜（カテゴリー別の記事一覧の出力内容が記述されています） 
  </div> 
  <?php get_sidebar();?> 
<?php get_footer();?>

こちらもarchive.phpと同じく、ブラウザでチェックするとsidebar.phpに記述した内容が表示されているはずです。

追記後のsignle.php
追記箇所）5行目：get_sidebarを追記

<?php get_header();?> 
  <div class="main_content"> 
    〜中略〜（記事詳細の出力内容が記述されています） 
  </div> 
  <?php get_sidebar();?> 
<?php get_footer();?>

記述ができたら保存し、ブラウザでサイドバーの記述を確認しましょう。

記事・記事一覧の下の方に、サイドバーの記述が表示されていれば確認OKです。
「archive.php」「category.php」「single.php」の3つのページを確認してくださいね。
では次にサイドバーの中身を追記していきましょう。

サイドバーの中身を記述しよう！

今回「投稿」のページにサイドバーを表示するようにしました。
サイドバーに表示する内容はやはり「投稿」関連が良いでしょう。
多くのサイトでは、最新の記事・人気のある記事・おすすめの記事を順序づけて表示しています。

今回このテーマでは「最新の記事」「おすすめの記事」を表示するようにします。
人気のある記事は、言い換えれば閲覧数が多い記事となりますが、閲覧数を取得することが難しいためここでは除外します。閲覧数の取得についてはできないことはないため、もし頑張って記事を人気順に並び替えることがしたい場合は検索してくださいね。

*

栖天

最新記事の取得……。
ということは、archive.phpで記述した内容と一緒になりますか？

*

唯月

そうよ。それが分かれば後はもう簡単よね。

*

栖天

はい！
でも「おすすめの記事」ってどうやって取得するんでしょうか？

*

唯月

毎日毎日おすすめ記事を選んでいたらキリがないわよね。
機械がおすすめする記事……ということで、記事をランダムに表示する方法を利用しましょう。

最新記事を5件表示するようにしよう！

ではまず最新記事を5件、サイドバーに表示するようにしましょう。
その最新記事リストの下に、おすすめ記事リストを表示するようにします。

「投稿」の最新記事を取得する方法は、既にarchive.phpで行っていますね。
第3回の記事をおさらいしながら、sidebar.phpに記述していきます。

ざっくりと振り返りを行うと、以下手順で最新記事一覧の取得・表示ができることがわかります。

  1. WP_Queryのパラメータと値をまとめた配列を作成
  2. WP_Queryで記事一覧を取得
  3. foreachで取得記事を一つずつ表示

サイドバーには最新記事リストとおすすめ記事リストの2つを表示する予定のため、sidebar.phpに記述する際はそれぞれコンテンツを分けるようにしましょう。クラス名「sidebar」のdiv要素の中に、最新記事リストを表示するクラス名「side_new」のsection要素を追加します。

Finderに戻って、テーマフォルダ「first-theme」内にある「sidebar.php」を編集してくださいね。

編集後のsidebar.php
編集箇所）2〜4行目：最新記事リストのsectionタグ・h2タグを追加

<div class="sidebar"> 
  <section class="side_new"> 
    <h2 class="side_title">最新の記事</h2> 
  </section> 
</div>
WP_Queryで最新記事を取得する記述を追加しよう！

作成したh2タグの下に、WP_Queryを使って記事一覧を表示するようにしていきます。
各種パラメータを指定して、WP_Queryから記事一覧を取得する記述を行います。

編集後のsidebar.php
編集箇所）4〜13行目：WP_Queryの記述を追加

<div class="sidebar"> 
  <section class="side_new"> 
    <h2 class="side_title">最新の記事</h2> 
    <?php 
      $side_new_args = array( 
        'post_type' => 'post', 
        'post_status' => 'publish', 
        'posts_per_page' => 5, 
        'order' => 'DESC', 
        'orderby' => 'date' 
      ); 
      $side_new_data = new WP_Query( $side_new_args ); 
    ?> 
  </section> 
</div>

archive.phpで記述した内容と違い「取得する件数は5件まで」と「ページャーは使用しない」という2点があります。
サイドバーに表示するため、最大5件がちょうど良いでしょう。

foreachを使って記事を一つずつ表示するようにしよう！

WP_Queryで取得したデータの変数をforeachで回す前に、変数の中身がちゃんと格納されているかチェックしましょう。
if文とempty関数を使って、変数の内容を行っていきます。

if文で指定した「データが存在する場合」の分岐内に、foreachの記述を行います。
記述の際に、HTMLタグの「ul」と「li」を忘れてないように気をつけてくださいね。

編集後のsidebar.php
編集箇所）14〜21行目：if文とforeach文を追加。

<div class="sidebar"> 
  <section class="side_new"> 
    <h2 class="side_title">最新の記事</h2> 
    <?php 
      $side_new_args = array( 
        'post_type' => 'post', 
        'post_status' => 'publish', 
        'posts_per_page' => 5, 
        'order' => 'DESC', 
        'orderby' => 'date' 
      ); 
      $side_new_data = new WP_Query( $side_new_args ); 
    ?> 
    <?php if( !empty( $side_new_data->posts ) ):?> 
      <ul> 
        <?php foreach( $side_new_data->posts as $side_new ):?> 
          <li> 
          </li> 
        <?php endforeach;?> 
      </ul> 
    <?php endif;?> 
  </section> 
</div>

では実際に表示する内容を取得・出力していきましょう。
今回、サイドバーに表示する記事の内容は以下にしたいと思います。

  • 記事タイトル
  • 記事へのリンク先
  • 画像

サイドバーの幅が狭く表示できる情報に限りがあるため、本文やカテゴリーの表示は行いません。
foreach内に取得したい内容を記述していきます。
記述にて使用した関数の詳細を知りたい場合は、第3回の記事をご覧ください。

編集後のsidebar.php
編集箇所）17〜22行目：タイトル・画像等を取得

<div class="sidebar"> 
  <section class="side_new"> 
    <h2 class="side_title">最新の記事</h2> 
    <?php 
      $side_new_args = array( 
        'post_type' => 'post', 
        'post_status' => 'publish', 
        'posts_per_page' => 5, 
        'order' => 'DESC', 
        'orderby' => 'date' 
      ); 
      $side_new_data = new WP_Query( $side_new_args ); 
    ?> 
    <?php if( !empty( $side_new_data->posts ) ):?> 
      <ul> 
        <?php foreach( $side_new_data->posts as $side_new ):?> 
          <?php 
            $post_id = $side_new->ID; //記事ID 
            $post_title = $side_new->post_title; //記事タイトル 
            $post_thumbnail = get_the_post_thumbnail_url( $post_id, 'post-thumbnail' ); //記事のアイキャッチ画像URL 
            $post_link = get_the_permalink( $post_id ); //記事ページURL 
          ?> 
          <li> 
          </li> 
        <?php endforeach;?> 
      </ul> 
    <?php endif;?> 
  </section> 
</div>

各種表示したいデータが取得できたら、実際に表示するための記述を行います。
レイアウトを意識しながらHTMLコーディングを行うと良いでしょう。

編集後のsidebar.php
編集箇所）24〜35行目：表示コードを追加。

<div class="sidebar"> 
  <section class="side_new"> 
    <h2 class="side_title">最新の記事</h2> 
    <?php 
      $side_new_args = array( 
        'post_type' => 'post', 
        'post_status' => 'publish', 
        'posts_per_page' => 5, 
        'order' => 'DESC', 
        'orderby' => 'date' 
      ); 
      $side_new_data = new WP_Query( $side_new_args ); 
    ?> 
    <?php if( !empty( $side_new_data->posts ) ):?> 
      <ul> 
        <?php foreach( $side_new_data->posts as $side_new ):?> 
          <?php 
            $post_id = $side_new->ID; //記事ID 
            $post_title = $side_new->post_title; //記事タイトル 
            $post_thumbnail = get_the_post_thumbnail_url( $post_id, 'post-thumbnail' ); //記事のアイキャッチ画像URL 
            $post_link = get_the_permalink( $post_id ); //記事ページURL 
          ?> 
          <li> 
            <a href="<?php echo esc_html($post_link);?>"> 
              <p class="img"> 
                <?php if( !empty( $post_thumbnail ) ):?> 
                  <img src="<?php echo esc_html($post_thumbnail);?>"> 
                <?php else: ?> 
                  <img src="http://placehold.jp/150x150.png?text=No image"> 
                <?php endif; ?> 
              </p> 
              <div class="area_txt"> 
                <h2><?php echo esc_html($post_title);?></h2> 
              </div> 
            </a> 
          </li> 
        <?php endforeach;?> 
      </ul> 
    <?php endif;?> 
  </section> 
</div>

ここまで記述ができたら、保存してブラウザで表示の確認をしましょう。
「投稿」archive.phpで確認した際と、似たような表示になっているはずです。
あとはCSSを整えて、サイドバーにある最新記事の一覧っぽくしましょう！

これで最新記事の一覧を表示することができました。
次はおすすめ記事一覧を表示するようにしていきましょう！

おすすめ記事5件を表示するようにしよう！

おすすめ記事一覧も最新記事一覧と同じく、WP_Queryを利用して記事を取得します。
途中までの記述は一緒のため、sectionタグから閉じsectionタグまでをコピーしてコンテンツ下部に貼り付けを行いましょう。h2タグ内のテキストは「おすすめ記事ランキング」に変更しておくといいでしょう。

また最新記事一覧と表示内容が被らないようにするため、各種変数名を変更しておきましょう。
ここで変更を怠ると思わぬバグが発生する恐れがあります。

  • WP_Queryで使用するパラメータを格納した変数名
  • 取得した記事一覧を格納する変数名

編集後のsidebar.php
編集箇所）7〜45行目：「おすすめ記事一覧」コードを追加。
詳細　　）8行目：h2タグ内テキストを修正。
　　　　）10、17、19、21行目：各種変数名を変更。

<div class="sidebar"> 
  <section class="side_new"> 
    <h2 class="side_title">最新の記事</h2> 
    〜中略〜 
  </section> 
 
  <section class="side_new"> 
    <h2 class="side_title">おすすめ記事ランキング</h2> 
    <?php 
      $side_recommend_args = array( 
        'post_type' => 'post', 
        'post_status' => 'publish', 
        'posts_per_page' => 5, 
        'order' => 'DESC', 
        'orderby' => 'date' 
      ); 
      $side_recommend_data = new WP_Query( $side_recommend_args ); 
    ?> 
    <?php if( !empty( $side_recommend_data->posts ) ):?> 
      <ul> 
        <?php foreach( $side_recommend_data->posts as $side_recommend ):?> 
          <?php 
            $post_id = $side_recommend->ID; //記事ID 
            $post_title = $side_recommend->post_title; //記事タイトル 
            $post_thumbnail = get_the_post_thumbnail_url( $post_id, 'post-thumbnail' ); //記事のアイキャッチ画像URL 
            $post_link = get_the_permalink( $post_id ); //記事ページURL 
          ?> 
          <li> 
            <a href="<?php echo esc_html($post_link);?>"> 
              <p class="img"> 
                <?php if( !empty( $post_thumbnail ) ):?> 
                  <img src="<?php echo esc_html($post_thumbnail);?>"> 
                <?php else: ?> 
                  <img src="http://placehold.jp/150x150.png?text=No image"> 
                <?php endif; ?> 
              </p> 
              <div class="area_txt"> 
                <h2><?php echo esc_html($post_title);?></h2> 
              </div> 
            </a> 
          </li> 
        <?php endforeach;?> 
      </ul> 
    <?php endif;?> 
  </section> 
</div>
記事の表示順序がランダムになるように変更しよう！

ではここから記事をランダムに表示するための記述に変更していきます。
変更箇所は、WP_Queryで取得する記事の内容を設定するパラメータの配列部分になります。
編集するパラメータは以下になります。

  • ソート指定のパラメータを「日付順」から「ランダム」に変更

WordPress公式マニュアルのWP_Query「順序づけパラメータ」という項目を確認すると、ランダムで並び替えるパラメータが存在することがわかりますね。
WordPress Codex日本語版「関数リファレンス/WP Query」

引用：WordPress Codex日本語版 関数リファレンス/WP Query（https://wpdocs.osdn.jp/関数リファレンス/WP_Query）/ 2021年2月28日現在

sidebar.phpにコピーして追加したコードに編集を加えましょう。
Finderに戻って、テーマフォルダ「first-theme」内のsidebar.phpを開いて修正してくださいね。

編集後のsidebar.php
編集箇所）7〜45行目：「おすすめ記事一覧」コードを追加。

<div class="sidebar"> 
  <section class="side_new"> 
    <h2 class="side_title">最新の記事</h2> 
    〜中略〜 
  </section> 
 
  <section class="side_new"> 
    <h2 class="side_title">おすすめ記事ランキング</h2> 
    <?php 
      $side_recommend_args = array( 
        'post_type' => 'post', 
        'post_status' => 'publish', 
        'posts_per_page' => 5, 
        'order' => 'DESC', 
        'orderby' => 'rand' 
      ); 
      $side_recommend_data = new WP_Query( $side_recommend_args ); 
    ?> 
    <?php if( !empty( $side_recommend_data->posts ) ):?> 
      〜中略〜 
    <?php endif;?> 
  </section> 
</div>

ここまで編集ができたら保存し、ブラウザで表示の確認を行いましょう。
「おすすめ記事ランキング」のコンテンツでは、記事の順番がランダムになっていることが確認できるはずです。

*

唯月

ブラウザの画面をリロードしたら、記事の順番が入れ替わるのが確認できるわ。

*

栖天

ほんとだ！
ということはこのページにアクセスする度にランキングが変わるってことですか？

*

唯月

そういうことになるわ。
でもそうコロコロ変わられると困るわよね。
というわけで、1日ごとにランキングが変わる仕様に変更しましょう！

表示記事の並びが1日ごとに変わるように変更しよう！

ではもう一度、公式マニュアルのWP_Queryの順序づけパラメータの部分を確認してください。
パラメータ「rand」の箇所に「'RAND(x)' も使えます」という記述がありますね。

引用：WordPress Codex日本語版 関数リファレンス/WP Query（https://wpdocs.osdn.jp/関数リファレンス/WP_Query）/ 2021年2月28日現在

丸括弧の中の「x」はシードになる整数ということで、整数を指定するとランダムに取得される記事が固定されます。
例えば「1」を設定すると、どんなにリロードしても記事の順番が変わりません。
設定する数値を変えると、取得される記事が変わることが確認できますよ。

'orderby' => 'RAND(1)'

ここで適当な数値を入力してランダム表示を完了させたいところですが、残念ながら問題点があります。
固定の整数だと、表示される記事はずっと固定のままとなり日付が変わっても変わることはありません。
今回、日が変わるたびに表示する内容を変更したいため、その設定を加える必要があります。

表示の順序を変更するためには、シードになる整数の部分を変更すればいいことがわかります。
また日付ごとに変更するということで、今日の日付を整数として設定すれば日が変わった際に表示順序が変わることもわかります。では今日の日付を取得し、それを整数として設定するようにしましょう！

PHPには日付を取得する関数が存在しますが、今回はWordPressにも存在する日付取得関数を使用します。
公式マニュアルの「date_i18n」を説明しているページを見てくださいね。

WordPress Codex日本語版「関数リファレンス/date i18n」

引用：WordPress Codex日本語版 関数リファレンス/date i18n（https://wpdocs.osdn.jp/関数リファレンス/date i18n）/ 2021年2月28日現在

通常のPHPの日付取得関数を使用する場合タイムゾーンの設定が必要となります。
ですがこのdate_i18nは、WPの管理画面で設定したタイムゾーンの国の日付が適応されるため、コードにタイムゾーンの追記が不要となります。
記述忘れによるミスを減らすため、極力この関数「date_i18n」を使いましょう。

WordPressのタイムゾーン変更手順）

  1. WordPress管理画面 左メニューバー「設定」をクリック
  2. 「一般設定」にある「タイムゾーン」項目の国を変更
  3. 画面最下部「変更を保存」青ボタンをクリックして変更完了

「date_i18n」には3つのパラメータが設定できますが、現段階では1つめの、日付フォーマットを指定する「$dateformatstring」のみ設定することにします。日付フォーマットについては第三回の記事にある「投稿日を取得しよう！」にて詳細な説明をしています。もしフォーマットの形がわからない場合はこちらをご覧ください。

今日の日付を取得するということで、取得フォーマットは「Ymd」になります。
整数のみのため、ハイフンや月日の記号や文字は不要です。

<?php 
  $today_date = date_i18n( 'Ymd' ); 
  $query_args = array( 
    'orderby' => 'RAND(' . $today_date . ')' 
  ); 
?>

今日の日付を取得し、得られた数値を変数「$today_date」に格納しています。
それから、WP_Queryのパラメータ「orderby」にRANDを設定し、そのシードに変数「$today_date」で取得した日付の整数を記述しています。「$today_date」の中にちゃんと今日の日付が入っているか確認する際は「var_dump」を使って出力チェックしてくださいね。

ではsidebar.phpの「おすすめ記事ランキング」コードに編集を加えます。
Finderに戻って、テーマフォルダ「first-theme」内のsidebar.phpを開いて修正してくださいね。

編集後のsidebar.php
編集箇所）10行目：今日の日付取得の変数追加。16行目：ランダムの記述を変更。

<div class="sidebar"> 
  <section class="side_new"> 
    <h2 class="side_title">最新の記事</h2> 
    〜中略〜 
  </section> 
 
  <section class="side_new"> 
    <h2 class="side_title">おすすめ記事ランキング</h2> 
    <?php 
      $today_date = date_i18n( 'Ymd' ); 
      $side_recommend_args = array( 
        'post_type' => 'post', 
        'post_status' => 'publish', 
        'posts_per_page' => 5, 
        'order' => 'DESC', 
        'orderby' => 'RAND('. $today_date .')' 
      ); 
      $side_recommend_data = new WP_Query( $side_recommend_args ); 
    ?> 
    <?php if( !empty( $side_recommend_data->posts ) ):?> 
      〜中略〜 
    <?php endif;?> 
  </section> 
</div>

ブラウザで表示チェックを行うと、記事の表示がバラバラの順番になっており、リロードしても順番は変わらないようになっているはずです。日付が変わった後にページの再読み込みをしてみると昨日とは表示の順番が変わっていることが確認できますよ。

これでサイドバーのHTMLコーディングは完了です。
あとはCSSを調整してサイドバーらしく見えるように整えましょう！

*

唯月

これで、今必要となる共通パーツは作成できたってところね。

*

栖天

ヘッダーとフッターを調整することでサイト感がぐっと増しましたね…！

*

唯月

では次回は残りのindex.phpやhome.phpを作成していくわ。
ラストスパートよ。がんばってね。

coming soon…