Wordpress講習 to 株式会社ANTz #7 レポート「 テーマをリモートにアップしよう」（最終回）
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はこちら
これまでのレポート