Wordpress講習 to 株式会社ANTz #5 レポート「旅する仕事場のテーマを作ろう（1）」

ANTzのWordpress講習は5回目です。
この日はANTzが運営しているシェアオフィス、鎌倉旅する仕事場サイトをデモでCMS化してみるということに挑戦していただきました。

サイトを眺める

まずは旅する仕事場サイトの全体構成を見ながら、前回習ったどのテンプレートに各ページが当てはまるかをざっくり見ていきます。

■ トップページ：frontpage.php
■ お知らせ記事：single.php
■ カンパニー、オフィスについて、コンセプト、お問い合わせ、アクセス：page.php
■ Q & A ：固定ページ（場合によっては記事化してもよい）
■ メンバーページ：独自のフォーマットで一覧表示されているので、カスタム投稿タイプを使って構築していく

テンプレートの枠組みを作る

まずは前回作ったオリジナルテーマのディレクトリ内に index.php、single.php、page.php、front-page.php をそれぞれ枠組みだけ作成します。（wp-content/themes/tabisuru/）

#index.php
<?php get_header(); ?>
 仕事場のホームページです
<?php get_footer(); ?>

#front-page.php
<?php get_header(); ?>
  フロントページです
<?php get_footer(); ?>

#single.php
<?php get_header(); ?>
 記事ページです
<?php get_footer(); ?>

#page.php
<?php get_header(); ?>
 固定ページです
<?php get_footer(); ?>

ヘッダーとフッターをあとで読み込む前提で、その部分はインクルードさせるコードを記述しておき、本文にはとりあえず「○○ページです」とだけ書いてプレビューを確認します。

これだけで、ルートのアドレスにアクセスすると「フロントページです」と表示され、例えば /sample/ など適当にアドレスを打ち込むと、index.phpの内容が表示されるようになりました。
こちらは前回のnoteで触れたテンプレート階層のツリー構造により、最終的には index.php が参照されるようなフローになっているからです。

次に、single.php、page.phpはデータを入れないとアドレスが発行されずアクセスできないので管理画面から記事内容を追加します。

その後、パーマリンクをクリックしてそれぞれのプレビューを確認すると、
「記事ページです」
「固定ページです」
と上で作ったソース内の文章が出て確認ができると思います。

アクションフックを入れる

サイトにログインしているときにワードプレス独自のヘッダーメニューなどが入ったり、その他プラグインとスムーズに連記できるようにするために、予めアクションフックを記述しておきます。

#index.php
<?php wp_head(); ?> ←アクションフック
 <?php get_header(); ?>
   仕事場のホームページです
 <?php get_footer(); ?>
<?php wp_footer(); ?> ←アクションフック

アクションフックの詳細はこちらが参考になります。
「WordPressカスタマイズの幅が劇的に広がる、フィルターフックとアクションフックの使い方」
https://liginc.co.jp/web/wp/customize/92030

記事出力とループ（一覧表示）の基本

基本の骨格ができたところで次は大事な記事出力です。
まずはワードプレスにおける記事出力の仕組みに関して東崎先生から解説がありました。
出力の仕組み（仕様）はこちらが大変参考になります。
▼WordPress 出力処理の仕組み
http://office-yone.com/blog/wordpress_flow/

その後、記事一覧を出すときのループ構文の書き方を説明いただきました。以下の3種類になります。

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

-----------
サブループ1（WP_Query）
-----------
<?php $the_query = new WP_Query($args); ?>
<?php if($the_query -> have_posts()): ?>
 //記事が存在する場合
 <?php while($the_query -> have_posts()): ?>
   <?php $the_query -> the_post(); ?>
   //記事の内容
 <?php endwhile; ?>
 <?php else: ?>
//記事が存在しない場合
<?php endif; ?>
<?php wp_reset_postdata() ; ?>

-----------
サブループ2（get_posts）
-----------
<?php $the_query = get_posts($args); ?>
<?php if($the_query): ?>
  //記事が存在する場合
  <?php foreach($the_query as $post ): ?>
    <?php setup_postdata($post); ?>
    //記事の内容
    <?php endforeach; ?>
  <?php else: ?>
  //記事が存在しない場合
<?php endif; ?>
<?php wp_reset_postdata() ; ?>

こちらを踏まえて、トップページのインフォ一覧部分にループ構文をあてていきます。
まずは基本のループの記述方で、本文を出力するWP関数を「//記事の内容」の部分に記述してみます。

//記事の内容
<?php the_content(  ); ?>

するとトップページを固定ページで設定していた場合、その本文の内容が出力されます。

しかし、ここではインフォ一覧を出力したいのでサブループ1かサブループ2のどちらかの書き方で記述する必要があるのですが、この日はここまで。

前回までは概念的な部分の説明となりインプットの作業が多かったのですが、今回は実際に手を動かしてブラウザで出力結果を見ていく作業だったということもあったのか、社員の方から
「楽しかった！もっとやりたい！」という感想をいただきました ^ ^

次回はさらに記事出力の部分を作り込んでいく予定です。

› Wordpress講習to株式会社ANTz#6レポート「旅する仕事場のテーマを作ろう（2）」