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

ANTzのWordpress講習は6回目。いよいよ大詰めです。

前回はざっくりとテンプレートの枠組みを作り、ループ構造も一部実装し、その概念を覚えていきまいした。
今回はさらに作り込んでいきます。

▽ 今回のアジェンダ
■ 固定ページを作る（Company）
・カスタムフィールドの作り方
・ショートコードの登録方法
■ トップページを作る（front-page.php）
・条件分岐の書き方
・Informationの部分でループ構文を使用する
■ お役立ちプラグインの紹介
・Query Monitor, Custum Post Type UI, Advenced Custom Fields, All-in-One WP MigrationCustum

固定ページを作る

まず手始めに実装しやすそうな静的ページ、company.htmlをコピーしてファイル名をpage.phpに書き換え旅する仕事場のテーマ内におきます。

次に前回作った共通ヘッダやフッタ部分に <?php get_header(); ?> と <?php get_footer(); ?> を差し込みます。

<?php get_header(); ?> // 共通ヘッダ
<div class="tabitabi_">
	<div class="tabitabi_wrap">
		<div class="tabitabi_title1">COMPANY</div>
		<h1 class="tabitabi_title2">企画／運営会社</h1>
	</div>
	<div class="tabitabi_wrap" style="margin-top:35px;">
		<div class="tabitabi_companyL">
			<h2>株式会社ANTz</h2>
			<p>
				「世界の情報を発明して扱えるようにすること」を理念としている情報システム開発会社。<br>
				自社サービスの位置空間利用事業とクライアントワーク事業 （ITシステム開発, ウェブ制作）を生業に2013年に後の「鎌倉・旅する仕事場」で起業。<br>
				シェアオフィススペースとして開く前から一角を利用していたことや、カマコンバレーの活動など、さまざまな縁が結ばれてシェアオフィス「鎌倉・旅する仕事場」を運営していくことに。<br>
				「世界の情報を発明して扱えるようにすること」と共に、鎌倉の街で「つながりの輪」を広げるべく奮闘中。<br><br>
				<a href="http://www.ant-z.jp/" target="_blank">http://www.ant-z.jp/</a>
			</p>
		</div>
		<div class="tabitabi_companyR"><img src="tabitabi/img/company_antz.jpg" alt="株式会社ANTz" width="486"></div>
	</div>
</div>
<?php get_footer(); ?> // 共通フッタ

ここでソース全体を見て、OFFICEページなど他のページとも見比べながら、まずは固定ページのタイトルや本文がどの部分にあたるかを見定めます。

タイトル部は「COMPANY」と「企画／運営会社」と2つあるので、１つ目の「COMPANY」をタイトルとし、２つ目のタイトルは後からカスタムフィールドで対応することにします。

本文はh2の「株式会社ANTz」〜右エリアの写真イメージまでにするのがよさそうです。

▽ 以下の範囲を本文と見定める

<div class="tabitabi_companyL">
  <h2>株式会社ANTz</h2>
  〜
<div class="tabitabi_companyR"><img src="tabitabi/img/company_antz.jpg" alt="株式会社ANTz" width="486"></div>

データ入っていないと内容を表示できないので、Wordpress管理画面の固定ページにCOMPANYを追加します。

タイトルは「COMPANY」、本文は上のソースをテキストモードにしてペーストして一旦保存するために「公開」ボタンを押しておきます。

カスタムフィールドを作る

次にCOMPANY下の、「企画／運営会社」を入力するためのカスタムフィールドを作っていきます。
まずはカスタムフィールドを作るための定番プラグイン「Advenced Custom Fields」を管理画面のプラグインに追加して、有効化させます。
（新規でプラグイン名を検索してください）

次にカスタムフィールドを作ります。
管理画面メニュー「カスタムフィールドから」新規追加で以下のように設定します。

タイトル名やフィールドラベル名は任意で入れます。
フィールドラベル名は後でテンプレート内で出力する際に使用します。
ここでは title_jp としました。

これでCOMPANYの入力画面でフィールドが追加されているのが確認できたので、そこに「企画/運営会社」と入力し「更新」ボタンを押します。

page.phpに戻り、タイトルや本文を出力できるよう以下のようにコードを入力していきます。

<?php get_header(); ?>
<div class="tabitabi_">
	<div class="content_wrap clearfix">
	<?php if(have_posts()):?>
	  <?php while(have_posts()):?>
	    <?php the_post(); ?>
	    <div class="tabitabi_wrap">
	      <div class="tabitabi_title1"><?php the_title(); ?></div> //タイトル
	      <h1 class="tabitabi_title2"><?php the_field('title_jp'); ?></h1> //カスタムフィールド部
	    </div>
	    <?php the_content(); ?> // 本文
	  <?php endwhile;?>
	<?php else:?>
	<?php endif;?>
	</div>
</div>
<?php get_footer(); ?>

ループ構造は前回習った"基本のループ構文"を使用し、その中で、タイトルや本文、カスタムフィールドの出力するコードを記述します。

ショートコードの作成（function.php）

ここで、画像のパスが切れているので適切なパスを設定する必要があります。
テンプレートPHPであれば、直接phpでテーマのディレクトリを指定する関数を書くなどして（以下参考）対応できますが、固定ページの本文内なので、こちらのコードは記述できません。

//↓この記述はできない
<?php echo get_stylesheet_directory_uri() ?>/img/〜

環境が変わる度にパスを書き直すのは面倒だし忘れがちなので、ここはうまく記述しておきたいところ。
そこで、ショートコードを使用します。
ショートコードは、変数のような形でfunction.phpで定義づけしておき、記事入力画面内ではコードを記述するだけでOKです。

// function.php

<?php
// ショートコード生成関数
function shortcode_cssurl() {
	return get_stylesheet_directory_uri();
}
add_shortcode('css_url', 'shortcode_cssurl');
?>

css_urlという名前にパスを定義づけたので、こちらを記事入力画面に記述します。

これでCOMPANYページのCMS化ができました。

Query Monitor

今回のCMS化にあたって便利チェックツールQuery Monitorを東崎先生から紹介いただきました。

こちらをしようすることで、クエリの速度やアクションフックの状況など、様々な状態が確認することができます。また、上記のように、固定ページであれば is_page(), is_singlularなどの関数が使えるという情報も出るので開発の目安になるとのことです。

詳しい解説はLIGの記事が参考になります。
https://liginc.co.jp/web/wp/plug-in/151347

ここで、今回はタイムアップ。
社員のお二人は、今回も「楽しかった！」とのことでした！

次回はいよいよ最終回。
front-page.phpの作り込みと、リモートのアップロードの予定です。

これまでのレポート
› Wordpress講習to株式会社ANTz#1レポート「CMS、WordPressとは」
› Wordpress講習to株式会社ANTz#2レポート「WP制作環境を作ろう」
› Wordpress講習to株式会社ANTz#3レポート「WP管理画面を見ていこう」
› Wordpress講習to株式会社ANTz#4レポート「テーマ・テンプレート構造をしろう」
› Wordpress講習to株式会社ANTz#5レポート「旅する仕事場のテーマを作ろう（1）」