【Web制作過程】献立を毎日更新する予定のページをWordPeress化する

プログラミング

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

ここまでで、全6ページ中5ページをWordPress化することができました。

残っているのは、「給食のこんだて」のページです。

今回はこのページをWordPress化していきます。

「今日のこんだて」用の投稿メニューを作成する

下の画像を見てください。

これは「給食のこんだて」というページのうち、毎日の給食を載せる部分です。

毎日給食を載せていく上で、コードを直接変えるという作業は、非常に手間がかかりますし、幼稚園の先生にとって非常に負担となってしまうことです。

そこで、WordPress管理画面から簡単に更新できるような仕組みを作ります。

現在、幼稚園のホームページを管理しているWordPressの管理画面には「投稿」と書かれたメニューがあります。

この「投稿」からブログなどの投稿をすることができます。

ここでは、わかりやすいように「投稿」というメニューを毎日の給食の献立を投稿するため専用のメニューに変えていきます。

「functions.php」という名前のPHPファイルを作って、テーマフォルダの中にアップロードします。

このファイルは、WordPressの機能をカスタマイズすることができるテーマファイルです。

アップロードを終えたら、WordPressの管理画面からもテーマフォルダの中身を確認しておきます。

「テーマのための関数」と書かれたテーマーファイルが追加されていることを確認できました。

functions.phpを編集する

追加された「functions.php」の中身に次のようなスクリプトを書きます。

<?php
function post_has_archive($args, $post_type) {
  if('post' == $post_type) {
    $args['rewrite'] = true;
    $args['has_archive'] = 'lunch';
    $args['label'] = '今日のこんだて';
  }
  return $args;
}
add_filter('register_post_type_args', 'post_has_archive', 10, 2);

6行目を見てください。

$args['label'] = '今日のこんだて';

「投稿」と書かれたメニューは、$args[‘label’]に代入した文字列に変わります。

「今日のこんだて」という文字を代入したので、管理画面のメニューにあった「投稿」が「今日のこんだて」に変わります。

次に5行目を見てください。

$args['has_archive'] = 'lunch';

今度は$args[‘has_archive’]というものに文字列を代入しています。

ここで入れた文字列はURLの最後の部分(スラッグ)になります。

「lunch」という文字列にしたので「https://konsuki.com/irokuhu/lunch」というURLのページが作られます。

しかし、このままではこのURLにアクセスしてもページが存在していないことになります。

少し作業が必要です。

まず、WordPressの管理画面から「設定 > パーマリンク」と選びます。

次に一番下までスクロールしてから「変更を保存」を選択します。

これで先ほどの「https://konsuki.com/irokuhu/lunch」に移動すると次のように「archive.php」の内容が表示されます。

ページは存在しているのですが、「archive.php」にはまだ何も書いていない状態なので、何も表示されません。

archive.phpを編集する

archive.phpを編集して、https://konsuki.com/irokuhu/lunch」へ移動したときに、「給食のこんだて」ページが表示されるようにします。

TOPページや他のページでもそうしてきたように、main要素の中身をHTMLファイルからコピーしてarchive.phpに貼り付けます。

<?php get_header(); ?><?php get_footer(); ?> を書いて、header.phpとfooter.phpを読み込むという点もこれまでと変わりません。

<?php get_header(); ?>
<div id="lunch_menu" class="sa sa--up">
  <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 get_template_directory_uri(); ?>/img/todays_menu.jpg" width="367" height="276">
      <div id="lunch_menu_container">
        <ul id="lunch_menu_list">
          <li>わかめごはん</li>              
          <li>さわらの西京焼き</li>              
          <li>肉じゃがカレー風味</li>              
          <li>キュウリと大根とにんじんの浅漬け</li>              
        </ul>
        <p id="total_calories">総カロリー:376kcal</p>
      </div>
    </div>
  </div>
  <div id="previous_menu">
    <h2>これまでのこんだて</h2>
    <p>2021年5月</p>
    <hr>
    <p>2021年4月</p>
    <hr>
    <p>2021年3月</p>
    <hr>
    <p>2021年2月</p>
    <hr>
    <p>2021年1月</p>
    <hr>
    <p>2020年12月</p>
    <hr>
    <p>2020年11月</p>
    <hr>
    <p>2020年10月</p>
  </div>
</div>
<div id="about_lunch">
  <h2 id="about_lunch_heading" class="sa sa--up"><span class="heading_num">01</span>給食について</h2>
  <div class="about_lunch_row sa sa--lr">
    <div class="about_lunch_text">
      <h3>①完全給食の制度</h3>
      <p>お昼ごはんは当園が提供する<span>完全給食</span>です。完全給食とは白いご飯やパン、飲みものまで含んでいる給食のことで、お昼ご飯をご家庭で各自用意していただく必要はありません。また、「週4日が給食、週1日がお弁当」というような、曜日によってお弁当が必要になることもなく毎日給食が提供される制度になっています。以前まで、お弁当を用意していただいていましたが、保護者の方の負担が大きいと判断して、今の完全給食の制度に改善されました。しかし、お子さんがご家庭の味を味わうことも大切であるため、不定期で「お母さん・お父さんのお弁当の日」を設けています。</p>
    </div>
    <img src="<?php echo get_template_directory_uri(); ?>/img/school_lunch.jpg" width="500" height="282">
  </div>
  <div class="about_lunch_row sa sa--rl">
    <img src="<?php echo get_template_directory_uri(); ?>/img/local_ingredients.jpg" width="500" height="282">
    <div class="about_lunch_text">
      <h3>②地元の食材</h3>
      <p>給食には口浮市内の野菜、お肉、魚などの食材がたくさん使われています。週に2度月曜日と金曜日には、地元の野菜だけを使った給食が提供されます。地元の方が作っている食材を使っているのには、お子さんの地元について知るきっかけになってほしいという願いが込められています。給食について栄養いっぱい、まごころいっぱいの食材を食べて元気に健やかな毎日を過ごしてもらいたいです。</p>
    </div>
  </div>
  <div class="about_lunch_row sa sa--lr">
    <div class="about_lunch_text">
      <h3>③管理栄養士による栄養の管理</h3>
      <p>当園には給食の栄養管理を行ってくださる専属管理栄養士が2名います。常に成長し続ける園児の身体には、それに見合ったバランスの取れた栄養やたくさんのエネルギーが必要です。管理栄養士の主な役割は、そのよう栄養やエネルギーを考えた毎日の献立を作成することです。他にも4歳以上の園児に対する、食育教育も担当していただいています。この年齢からの食育教育は、難しい内容を取り扱った教育ではありません。紙芝居や絵本を通して栄養の大切さを学んでもらい、嫌いになりがちな野菜に対する意識を少しでも変えることを目的にしています。</p>
    </div>
    <img src="<?php echo get_template_directory_uri(); ?>/img/nutritionist.jpg" width="500" height="282">
  </div>
</div>
<div id="about_snack_time" class="sa sa--up">
  <h2 id="snack_time_heading"><span class="heading_num">02</span>おやつについて</h2>
  <div id="snack_time_img_container">
    <div class="snack_time_img sa">
      <img src="<?php echo get_template_directory_uri(); ?>/img/nutrient_heading.png" alt="栄養を補う" width="195" height="56">
      <img src="<?php echo get_template_directory_uri(); ?>/img/nutrient.jpg" width="236" height="236">
    </div>
    <div class="snack_time_img sa">
      <img src="<?php echo get_template_directory_uri(); ?>/img/satisfaction_heading.png" alt="お腹を満たす" width="262" height="56">
      <img src="<?php echo get_template_directory_uri(); ?>/img/satisfaction.jpg" width="236" height="236">
    </div>
    <div class="snack_time_img sa">
      <img src="<?php echo get_template_directory_uri(); ?>/img/smile_heading.png" alt="笑顔をつくる" width="217" height="56">
      <img src="<?php echo get_template_directory_uri(); ?>/img/smile.jpg" width="236" height="236">
    </div>
  </div>
  <div id="snack_time_text" class="sa sa--up">
    <p> 幼稚園でのおやつには3つの役割があります。1つ目は<span class="important">「栄養を補う」</span>役割です。身体が小さい間は、朝昼晩の3度の食事では栄養が不足することがあります。子供の成長が速いものですが、幼稚児の間は特に成長速度が速いです。成長が伴っていると、単純に大人との体の大きさを比較して考えた栄養では、不足してしまいます。このようなことから、おやつには「栄養を補う」役割があります。おやつと言っても、アイスクリームやチョコレートではなく、ナッツ類や果物などの栄養の取れるおやつが出されます。</p>
    <p> 2つ目の役割は<span class="important">「お腹を満たす」</span>>ことです。食事と食事の間に、お腹が空いてしまうことがあります。お腹が空いてしまうと、午後の活動に集中することができないこともあるため、おやつには、お腹を満たして集中力を上げるというような役割もあります。</p>
    <p> 3つ目は<span class="important">「笑顔を作る」</span>役割です。美味しいおやつを食べると、機嫌が悪くても自然と笑顔が生まれます。幼稚園にいる時間を少しでも楽しい時間にするためにも、笑顔を生んでくれるおやつは大切な習慣の1つです。</p>
  </div>
</div>
<?php get_footer(); ?>

これで「https://konsuki.com/irokuhu/lunch」というURLに移動したときにHTMLと同じ見た目のサイトが表示されるようになりました。

コメント

タイトルとURLをコピーしました