見出し画像

Wordpress講習 to 株式会社ANTz #7 レポート「 テーマをリモートにアップしよう」（最終回）

plamo

Wordpress講習も7回目を迎え、ついに最終回です。
受講していただいているANTzの社員の方が管理する「鎌倉旅する仕事場」サイトをワードプレス化することをめざしこれまで進めてきました。
最終回のお題はこちらになります。

■ front-page.phpを作ろう
・INFORMATIONのループ
■ カスタム投稿タイプを使ってメンバーページを作ろう
■ リモートにアップしよう

front-page.phpを作ろう

まずは前回の固定ページに引き続き、front-page.php（トップページ）を作っていったのですが、noteでは要点となるINFORMATIONのループ部分だけ簡単に紹介します。
http://tabikamakura.com/（ページ下のINFORMATION参考）

まず、第5回でも触れた基本のループを使ってみます。
するとWordpressの設定で紐づけているTopページ（固定ページ）の本文フィールドの内容がそのまま表示されてしまいます。
するとWordpressの設定で紐づけているTopページ（固定ページ）の本文フィールドの内容がそのまま表示されてしまいます。

-----------
基本のループ
-----------
<?php if(have_posts()): ?>
 //記事が存在する場合
 <?php while(have_posts()): ?>
   <?php the_post(); ?>
   //記事の内容
 <?php endwhile; ?>
 <?php else: ?>
//記事が存在しない場合
<?php endif; ?>

（固定ページ本文に入れておいた「トップページです」が表示される）

本来は、INFORMATIONの記事を表示させたいので、このループを第5回の時に触れたサブループ1（WP_Query）を使用して以下のように記述します。

<?php $the_query = new WP_Query('post_type=post&posts_per_page=4'); ?>
<?php if($the_query->have_posts()): ?>
 <?php while($the_query->have_posts()): ?>
 <?php $the_query->the_post(); ?>
     <section class="report topic"><a href="http://www.facebook.com/tabikamakura/photos/a.1511984072422389.1073741828.1502278450059618/2025591254394999/" target="_blank"><img src="<?php echo get_stylesheet_directory_uri() ?>/img/information/info_20180226.jpg" width="221" height="130" alt="旅する仕事場">
       <div class="text">
       <h3 class="title"><?php the_title(); ?></h3>
         <p class="cm"><?php the_excerpt(); ?></p>
         <p class="day"><?php the_time('Y.n.j'); ?></p>
       </div></a>
     </section>
 <?php endwhile;?>
<?php else:?>
//記事が存在しない場合
<?php endif;?>
<?php wp_reset_postdata();?>

サムネイルの表示は最大4件にしたいのでWP_Queryの引数にposts_per_page=4と記述します。
今回、記事投稿は基本的にINFORMATIONでしか使わないので、特にカテゴリの指定などはしていません。
こちらで投稿に入っている全ての記事を対象に最新から4件表示されるようになりました。

メンバーページをカスタム投稿タイプで作る

旅する仕事場のメンバーページは、固定ページととらえて本文にソースベタ打ちということでもよいのですが、ページの要素に規則性があるので、カスタム投稿タイプを使って作っていきました。

手順としてはこのような流れです。

1. カスタム投稿タイプで"member"を作成
2. カスタムタクソノミーで職種ごとのカテゴリーを作る
3. カスタムタクソノミーの一覧を作るループを記述
4. （3）のループの中でさらにmemberのループを記述

記述方法は以下をご参考ください。

<?php
$terms = get_terms( 'member_cat');
foreach ( $terms as $term ):            
 ?>          
 <section class="job clearfix">
   <h3 class="job_type"><?php echo $term->name;?> <span class="job_type_sub"><?php echo strip_tags(term_description($term->term_id)); ?></span></h3>
   <?php
   $args = array(
     'post_type' => 'member',
     'posts_per_page' => -1,
     'tax_query' => array(
       array(
         'taxonomy' => 'member_cat', 
         'terms' => $term
       )
     )
   );
   $memberposts = get_posts( $args );
   foreach ( $memberposts as $post ) :
     setup_postdata( $post ); ?>
     <div class="member">
       <div class="member_img">
         <?php
         $image = get_field('member_thumb');
         $size = 'full';
         if( $image ) {
           echo wp_get_attachment_image( $image, $size , false , array('class'=>'img_oblong'));
         }?>
       </div>
       <div class="member_data">
         <p class="member_name"><?php the_title();?></p>
         <p class="member_url"><a href="<?php the_field('member_url');?>" target="_blank"><?php the_field('member_url');?></a></p>
         <p class="member_details"><?php the_field('member_detail');?></p>
       </div>
     </div>
   <?php endforeach; ?>
   <?php wp_reset_postdata();?>
 </section>
 <?php endforeach;?>

ループを二重にすることで、職種事にカテゴリ分けされたメンバーの一覧を出力できます。

最後にリモートにアップロードする手順に触れて、無事最後までいききって7回に渡る勉強会が終了しました。

ANTzのお二人には
「ワードプレスへの苦手意識が本当に低くなった。」
「PHPに触れたことで、そちらにも興味が広がりました。」
などのお言葉をいただきました〜

東崎先生、ANTzの皆さま本当にお疲れさまでした！

▼東崎先生のnoteはこちら

これまでのレポート



この記事が気に入ったらサポートをしてみませんか？