phpファイルに似たようなループのコードを何回も書いていませんか？
できるだけコードを短くして、修正の手間を減らしましょう。
Contents
【脱修正地獄】コードを共通化して 爆速コーディング する方法【Wordpressのlocate_templateを使う】
前提とする動作環境
- Custom Post Type UIのプラグインを用いて、カスタム投稿タイプが「お茶クラス」、「ピアノクラス」の２種類ある。
- Advanced Custom fieldsのプラグインを用いて、「クラス」というフィールドを追加しており、「クラス」フィールドは「お茶クラス」「ピアノクラス」の2つの投稿タイプに表示されるようにしている。
- 「クラス」フィールドでは「開催日」「開催時刻」「講師名」「開催場所」の項目を登録してある。
サイト名：地域のカルチャー教室の紹介サイト
お茶クラス(投稿タイプのスラッグ名：tea_class)
| 開催日 | 開催時刻 | 講師名 | 開催場所 |
| 2019/5/1 | 10:00 | 山田太郎 | 東京 |
| 2019/6/1 | 10:00 | 山田花子 | 北海道 |
ピアノクラス(投稿タイプのスラッグ名：piano_class)
| 開催日 | 開催時刻 | 講師名 | 開催場所 |
| 2019/7/1 | 10:00 | 山田次郎 | 埼玉 |
| 2019/8/1 | 10:00 | 山田梅子 | 青森 |
共通している部分を見つける
投稿タイプが違うだけで他は同じです。普通に書いたら、2つ分、ループの投稿タイプを変えて、テーブルのタグを書いていくことになります。
|
1 2 3 4 5 6 7 8 |
<?php $args = array( 'posts_per_page' => 5, // 表示する件数 'orderby' => 'date', // 日付でソート 'order' => 'DESC', // DESCで最新から表示、ASCで最古から表示 'post_type' => 'tea_class' // 投稿タイプのスラッグを指定 ←ここ以外、コードが同じ！ ); $the_query = new WP_Query($args); if($the_query->have_posts()):?> |
|
1 2 3 4 5 6 7 8 |
<?php $args = array( 'posts_per_page' => 5, // 表示する件数 'orderby' => 'date', // 日付でソート 'order' => 'DESC', // DESCで最新から表示、ASCで最古から表示 'post_type' => 'piano_class' // 投稿タイプのスラッグを指定 ←ここ以外、コードが同じ！ ); $the_query = new WP_Query($args); if($the_query->have_posts()):?> |
同じようなコードが続くとすごく長くなってしまうので、それは避けたいですね・・・。
また、よくある話でテーブルの列に「持ち物」が追加になったとします。
| 開催日 | 開催時刻 | 講師名 | 開催場所 | 持ち物（NEW!) |
| 2019/5/1 | 10:00 | 山田太郎 | 東京 | お茶 |
| 2019/6/1 | 10:00 | 山田花子 | 北海道 | お茶、月謝 |
上記２パターンを修正するのは面倒ですよね。
ここを共通化（テンプレート化)すると、修正が発生した時に楽になります。
以下、コードです。
共通化コードを呼び出し
page_classes.phpで共通化コードを呼び出しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php $value = "tea_class"; include locate_template('class_table.php'); ?> </div> 〜途中省略〜 <?php $value = "piano_class"; include locate_template('class_table.php'); ?> </div> |
呼び出されている共通部分
class_table.phpで共通部分が呼び出されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<div class="scroll"> <table border="1px" width="100%" cellpadding="10" bgcolor="#42ACE2" style="text-align:center; vertical-align:middle" > <tr bgcolor="#fff" style="color:#fff; font-weight:normal;"> <th bgcolor="#42ACE2">開催日</th> <th bgcolor="#42ACE2">開催時間</th> <th bgcolor="#42ACE2">講師名</th> <th bgcolor="#42ACE2">開催場所</th> <th bgcolor="#42ACE2">持ち物</th> </tr> <!--ループ開始 --> <?php $args = array( 'posts_per_page' => 5, // 表示する件数 'orderby' => 'date', // 日付でソート 'order' => 'DESC', // DESCで最新から表示、ASCで最古から表示 'post_type' => $value // 投稿タイプのスラッグを指定 // $valueの変数に、tea_classやpiano_classが代入されることで、コードが定型化されます。 ); $the_query = new WP_Query($args); if($the_query->have_posts()):?> <?php while ($the_query->have_posts()): $the_query->the_post(); ?> <tr bgcolor="#fff"> <td><?php if(get_field('class_date')){?> <?php the_field('class_date'); }else{ echo "未定"; }?></td> <td><?php if(get_field('class_start_time') and get_field('class_end_time') ){?> <?php the_field('class_start_time');?>〜<?php the_field('class_end_time'); }else{ echo "未定"; }?></td> <td><?php if(get_field('class_teacher')){?> <?php the_field('class_teacher'); }else{ echo "未定"; }?></td> <td><?php if(get_field('class_prefecture')){?> <?php the_field('class_prefecture'); }else{ echo "未定"; }?></td> <td><?php if(get_field('class_things2pack')){?> <?php the_field('class_things2pack'); }else{ echo "未定"; }?></td> </tr> </div> <?php endwhile; ?> <?php else: ?> <!-- 投稿が無い場合の処理 --> <tr bgcolor="#fff"> <td><br /></td><td></td><td></td><td></td><td></td><td></td> </tr> <?php endif; ?> <br /> <!-- ループ終了 --> </tr> </table> </div> |
以上となります。
