【Web制作過程】最新の投稿（今日のこんだて）を表示する

こんにちは、コンスキです。

今回はWordPress画面で投稿した給食の献立を「今日のこんだて」の部分に表示していきます。

WordPressの投稿内容とページの内容の連動

前回で全てのページをWordPress化することができました。

しかし、次の「今日のこんだて」の部分はスクリプトを直書きしてある状態です。

WordPressのいいところは更新を簡単にできることでした。

前回、次のような「今日のこんだて」と書かれたメニューをWordPress管理画面に追加しましたよね。

このメニューから記事を投稿することができるのですが、その記事の内容と下の「今日のこんだて」の部分の内容を連動させます。

プラグインをインスールする

前回作った「今日のこんだて」というから記事を投稿するとき、記事の中に入れる項目は次のように毎回決まっています。

というのもこの部分の目的は毎日の給食の写真と献立と総カロリーを保護者の人に見てらうことだからです。

こんな時は「カスタムフィールド」と呼ばれる機能を使うと楽になるそうです。

カスタフィールドを使うと、更新する場所や更新するファイルの種類をあらかじめ決めておくことができます。

ちなみに、WordPressには標準機能としてカスタムフィールドが付いていてます。

しかし、画像のカスタムフィールドを作ることができないため、次の「Custom Field Suite」というプラグインをインストールして有効化しておきます。

カスタフィールドの作成

先ほどのプラグインを有効化するとWordPressの管理画面に次のようなメニューが追加されています。

このメニューからカスタムフィールドの作成を行うことができるので、作成していきます。

「新規追加」を押すと次のような画面が出てくるので、「新規フィールドを追加」を押してカスタームフィールドを作成します。

新規フィールドの設定項目を次のように埋めていきます。

今作っているカスタムフィールドはこの部分↓のカスタムフィードです。

設定項目はに入れる内容は次のようになっています。

献立部分のカスタムフィールドの作成は完了しました。

こんな感じで「総カロリー」と「写真」のカスタムフィールドも作っていきます。

まずは総カロリー。

次は給食の写真です。

写真をアップロードできるようにしたいので、フィールドタイプの項目で「ファイルのアップロード」を選択して、File Typeの項目は「Image」、返り値の項目は「ファイルURL」に設定します。

次に一番上にある「タイトルを追加」と書かれた欄にこれらのフィールドタイプを1つのグループとした時のグループ名入力します。

最後に配置ルールの投稿タイプの項目で「post」を選択します。

これで、「今日のこんだて」というメニューから記事を投稿するときだけにカスタムフィールを設定できるようになります。

設定が終わったらこのフィールドグループを公開します。

献立を投稿する

作成したカスタムフィールドを「今日のこんだて」の投稿ページから使ってみます。

カスタームフィールドの中身を編集する画面表示されました。

それぞれの項目を埋めていきます。

最後にこの記事を公開します。

給食のこんだてページに出力する

あとは「給食のこんだて」ページに出力すれば、投稿機能とホームページの内容が連動されたことになります。

「給食のこんだて」ページを表示するときに読み込むファイルは「archive.php」です。

そこで、このPHPファイルの今日のこんだてを表示している部分を次のように編集します。

<div id="todays_menu">
  <h2><img src="<?php echo get_template_directory_uri(); ?>/img/todays_menu_heading.png" alt="今日のこんだて" width="378" height="65"></h2>
  <svg viewBox="10 0 763 2">
    <line x1="0" y1="0" x2="763" y2="0">
  </svg>
  <p id="todays_date">2021.06.25</p>
  <div id="todays_lunch_content">
    <img src="<?php echo CFS()->get('lunch_image'); ?>" width="367" height="276">
    <div id="lunch_menu_container">
      <ul id="lunch_menu_list">
        <div><?php echo CFS()->get('lunch_menu'); ?></div>
      </ul>
      <p id="total_calories">総カロリー：<?php echo CFS()->get('total_calories'); ?></p>
    </div>
  </div>
</div>

8、11、13行目には共通して次のスクリプトが書かれています。

<?php echo CFS()->get('〜〜〜'); ?>

「〜〜〜」と書かれている部分にカスタムフィールドを作成したときに設定した「名前」を入れることでそのカスタムフィールドの中身を出力できるようになっています。

上のように書いたら、ホームページを確認してみると次のようになってます。

「献立」と「給食の写真」と「総カロリー」がちゃんと表示されています。

おわりに

WordPressで設定した内容が、ホームページに表示することができましたが、かなり問題が残っています。

「わかめごはん〜」と書かれたメニューの見た目が少し変わってしまいました。

これは献立が品名ごとにli要素で書かれていたのを、カスタムフィールドの中身を出力する際に、一度にdiv要素の中に出力しているためです。

これいがにもかなり問題が残っているため、次回修正したいと思います。