第21回記事の分類その４ / お問合せフォーム - ICC｜Web基礎

Contents

1 事前準備
2 前回のおさらい
- 2.1 WordPressの分類機能
- 2.2 「書籍」投稿タイプの追加でやろうとしていること
3 テンプレートを編集してカスタムフィールドの値を表示しよう
- 3.1 本の価格が 1,250円に改定された！
4 PHPの基本
5 「本のカテゴリー」の情報を表示しよう
- 5.1 the_ から始まる関数はechoを付けなくても画面に出力される
6 「出版社」投稿タイプをつくり、「書籍」と分けて出版社の情報を登録できるようにする
7 テンプレートを編集して「出版社」の値を表示しよう
8 まとめ
9 次回の準備〜お問合せフォームを追加

事前準備

https://icc.firstelement.co.jp/ を開こう。
「Local」を立ち上げて、icc-booksの左側のグレーの三角をクリックしてサイトを起動し、Localの右端にあるADMINボタンをクリックしてWP管理画面にログインしよう。

前回のおさらい

WordPressの分類機能

カテゴリーとタグ（「投稿」にのみ）
カスタムフィールド（高機能なメモ欄）
投稿と固定ページ（記事の”格納場所”が分かれている）
カスタム投稿タイプ（追加で”格納場所”を増やせる）
カスタムタクソノミー（追加でカテゴリーやタグを増やせる）

「書籍」投稿タイプの追加でやろうとしていること

出版社の自社サイトに書籍紹介コーナーをつくる
今後、書籍が増え続けるので、”お知らせ”や”会社概要”と混ざると管理しづらくなる…
　⇒ カスタム投稿タイプとカスタムタクソノミーで別の格納場所をつくろう
　　⇒ プラグイン「Custom Post Type UI」で手早く済ませよう
「書籍」というカスタム投稿タイプ、「本のカテゴリー」というカスタムタクソノミーをつくった
書籍の分類の”格納場所”である「本のカテゴリー」というタクソノミーは作成したが、分類自体は自分で登録する必要があるので、必要な分類を「本のカテゴリー」の各タームとして登録する
価格や著者などの詳細項目は、後々検索に使用するかもしれないし、専用の入力欄があるほうが表記ゆれも起こりづらいのでカスタムフィールドに登録しよう
　⇒ カスタムフィールドには「Advanced Custom Fields」「Smart Custom Fields」など便利で人気のプラグインがあるが、とりあえず基本を押さえるためにデフォルトのカスタムフィールド機能で入力してみる
実際に書籍を登録するにあたり、カスタムフィールドの入力欄は初期状態では非表示になっているので投稿画面の右上の三点ドット > 設定から表示しておく
本のタイトルはタイトル欄へ、紹介文は本文欄へ、分類は該当するタームにチェック、詳細はカスタムフィールドに個別に入力する。
プレビューすると、タイトルと本文以外が表示されない。標準ではテーマ/テンプレート側もカスタム投稿タイプ/カスタムタクソノミー/カスタムフィールドに対応していないため。
　⇒ テンプレートを編集して上記項目が表示されるようにしよう
　⇒ 外観 > テーマエディターからコードの編集ができるからお手軽に済ませよう
　⇒ Windowsのセキュリティの制限で（？）テーマエディターから保存ができない
　⇒ エディターアプリ（今回はVisual Studio Code）を使用して、直接テンプレートファイルを編集しよう。

　———- 前回ここまで ———-

テンプレートを編集してカスタムフィールドの値を表示しよう

カスタムフィールドの項目を表示する場所はどこが適切だろうか？
書籍の詳細ページの紹介文＝本文欄の下部に表示しよう
　⇒ 編集するファイルは wp-content/themes/twentytwenty/template-parts/content.php
　⇒ 36行目のthe_contentで本文を表示しているので、その直後に書く
　⇒ 38行目の’>’の後で改行して下記のように書く

<?php the_meta(); ?>

the_metaはその記事に登録されているすべてのカスタムフィールドの値をひとかたまりで表示するシンプルなWordPress専用の関数。シンプルすぎて使いづらいので実際の現場では使わない。代わりに post_custom や get_post_meta などの関数を使用する。ここでは post_custom を使用して、個別にカスタムフィールドの値を取り出して表示してみよう。

<?php echo post_custom( '著者' ); ?>

「著者」の情報だけを取り出して表示できた！
…名前だけが表示されているので、項目名を追記しよう

著者：<?php echo post_custom( '著者' ); ?>

＜？ｐｈｐと？＞の外はhtmlなのでそのまま書いたものが表示される。
その他の項目も同様に書いてみよう
ページをリロードしてみると、改行が無視されて一行にまとまっている
htmlでは、キーボードのenterキーで行を改行しても改行と見なされない。＜br＞タグで”ここが改行です”と明示する必要がある

著者：<?php echo post_custom( '著者' ); ?><br>
単行本価格：<?php echo post_custom('単行本価格'); ?><br>
電子書籍価格：<?php echo post_custom('電子書籍価格'); ?><br>
・・・
・・・

改行された！…が、相変わらず左端に張り付いたまま
単なる改行ではなく、<dl><dt><dd>を使ってマークアップしてみよう

<dl>
	<dt>著者：</dt><dd><?php echo post_custom('著者'); ?></dd>
	<dt>単行本価格：</dt><dd><?php echo post_custom('単行本価格'); ?></dd>
	<dt>電子書籍価格：</dt><dd><?php echo post_custom('電子書籍価格'); ?></dd>
	<dt>ページ数：</dt><dd><?php echo post_custom('ページ数'); ?></dd>
	<dt>ファイスサイズ：</dt><dd><?php echo post_custom('ファイスサイズ'); ?></dd>
	<dt>発売日：</dt><dd><?php echo post_custom('発売日'); ?></dd>
	<dt>ASIN ：</dt><dd><?php echo post_custom('ASIN'); ?></dd>
	<dt>販売 ：</dt><dd><?php echo post_custom('販売'); ?></dd>
</dl>

htmlの書き方は、原則、開始タグと終了タグで要素を囲む。ひとかたまりのグループは開始タグと終了タグで囲まれる。さらにセクション全体が別のタグで囲まれる…このように入れ子構造になっている。
brタグで区切ることも多いが、この場合は<dl><dt><dd>タグを使うと意味的にもデザイン的にもまとまる

dl = Description List = 定義リスト
dt = Description Term = 項目名
dd = Description Details = 内容
br = Line Break = 改行

うまくいけば下図のように本文欄の下にきれいに収まっているはず（実際は、テーマのCSSによってdl/dt/ddを表示する幅や太字が定義されているのできれいに表示されている）。

本の価格が 1,250円に改定された！

…その場合は、該当する書籍の投稿画面をひらき、カスタムフィールド「単行本価格」の値を￥1,250(税込) と打ち直して、リロードして変更されていることを確認してみよう。

PHPの基本

　<?php the_meta(); ?>

開始タグ：<?php
終了タグ：　?>
一連の処理の最後はセミコロン「;」
関数は後ろに丸括弧「()」が付いていることで判別できる。関数とは、一連のよく使う処理をひとかたまりにしたパッケージ。電子レンジや洗濯機のおまかせコースのようなもの。”おまかせ”にせず条件を指定したい場合は丸括弧内に条件を書く。これらの条件または材料のことを引数という。その関数がどんな引数を受け入れるかは関数次第なので、関数の仕様を確認する必要がある。
複数の引数を受け付けることも多く、その場合はそれぞれ半角カンマで区切る。それぞれを第一引数、第二引数、第三引数…と呼ぶ。
post_custom( '著者' ) の場合はカスタムフィールドの値を取り出す関数に対して、第一引数に「著者」という条件を与えたことで、登録されたカスタムフィールドのうち「著者」の値のみ取り出すことができた。
変数はドル記号「$」で始める。変数は値を一時的に格納する入れ物。その後の処理へ渡すために使う。
変数や関数を書くだけでは画面に表示されない（関数は関数内部にechoやprintが含まれていれば表示される）。なぜなら、多くの変数や関数は他の処理と組み合わせて前処理/後処理をし、最終的に画面出力するという流れが前提なので、意図的に「画面に表示する」というコマンド = echo / print を書かないと画面には出力されない。その点、htmlは画面に出力することが目的のため、何もコマンドを書かずとも画面に出力される。

<?php
$writer = post_custom( '著者' );
if ( $writer ) { // 値がある場合
    echo $writer;
} else {
    echo '情報がありません';
}
?>

if〜else〜endifという書式で、ifの丸括弧に書いた条件に応じた出し分けができる。条件分岐と呼ぶ。分岐したそれぞれで処理内容が複雑/複数行に渡る場合は波括弧「{}」で囲むことでまとめて処理できる。
条件分岐の処理内容を波括弧で囲う場合は、最後のendif; は要らない。
phpの内部で文字列を扱う場合はシングルクォート「’」またはダブルクォート「”」で囲む。
数字は、〜クォートで囲まない場合は数値として扱われ、囲む場合は文字列として扱われる。
スラッシュ２つ「//」を付けるとそれ以降はコメント＝メモとして機能には影響せず、コードの意図などをメモしておくことができる。

PHPはhtmlと混ぜこぜで書けるので気軽で便利であり、一方でソースコードが複雑になるので可読性が悪くなりがち（htmlとjavascriptとcssとphpが同居…カオス。。。。）そんなときも、Visual Studio Codeなどのエディターを使うと自動で色分けしてくれるので便利。

PHPの印象として、他の言語と比較して文字列の加工が便利な印象。文章の何文字目から何文字目を抜き出す、全角→半角に変換、なども便利な関数が揃っている。WordPressには専用の関数がたくさんあった上でそれらPHPネイティブの便利な関数で自由に加工で、さらにHTMLやJSやCSSと混ぜこぜに書いて、相互に値を渡したり受け取ったりできるので、Webには都合のよい便利な言語、という印象。

ちなみにここ数年〜10年ぐらいのWebサービスに使われる人気の言語/環境の組み合わせをあらわす「LAMP」という言葉が存在する。

L = linux（サーバーOS）
A = apache（Webサーバー）
M = MySQL（データベース）
P = PHP（スクリプト言語）

そのぐらいWebサービスに使用する言語としてポピュラーな言語。

「本のカテゴリー」の情報を表示しよう

先程の<dl><dt><dd>のリストの最後に、次のコードを追記しよう。

<dt>カテゴリー：</dt><dd><?php the_terms( $post->ID, 'category2' ); ?></dd>

the_term 関数は、その記事に紐付けられたタクソノミー/ターム情報を表示するWordPress専用の関数。第一引数と第二引数は必須項目で省略できない。第一引数は記事IDを指定（$post->IDで動的に取得できる）、第二引数はターゲットのタクソノミー名（category2）を指定。ちなみに第三引数はタームリストの前に表示する語句、第四引数は各タームを区切る文字列（デフォルトは半角カンマ）、第五引数はタームリストの後に表示する語句で、いずれも省略可能。

この関数は内部にecho / print のコマンドが含まれているので、echo / print を手打ちする必要はない。

the_ から始まる関数はechoを付けなくても画面に出力される

WordPressに備わっている関数のうちthe_から始まる関数は、テンプレート内で使用することを想定しているために内部にecho / printコマンドが含まれている。the_title = タイトル、the_content = 本文など、関数名を書いただけで画面に出力される。これらテンプレート上での使用を想定した関数群を、WordPressは「テンプレートタグ」と読んでいる。

参考）テンプレートタグ
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0

「出版社」投稿タイプをつくり、「書籍」と分けて出版社の情報を登録できるようにする

書籍情報のカスタムフィールドに、出版社の名前を毎回書くのは非効率であり、また出版社の一覧ページがあると便利と思われるため、「書籍」とは別に「出版社」というカスタム投稿タイプをつくり、お互いにリンクする設定にする。

「出版社」投稿タイプをつくる

CPT UI > 投稿タイプの追加と編集
投稿タイプスラッグ = publisher
複数形/単数形のラベル = 出版社
ページ下部、設定 > サポート > カスタムフィールドにチェック
ページ下部、「投稿タイプを追加」ボタンをクリック

「書籍」と「出版社」をリンクするための準備

「Smart Custom Fields」というカスタムフィールドを便利にするプラグインをインストールする。

Smart Custom Fieldsの本家HPはこちら。

Smart Custom Fieldsを開き、新規追加
タイトルを「出版社詳細」と入力
出版社の詳細情報としてサイトURLを登録できるようにする
- 「フィールドを追加」ボタンをクリック
- タイプ＝テキスト、ラベル＝URLとする
- 右ペインの「表示条件」から「出版社」を有効にする
  　⇒ このカスタムフィールド入力画面は「出版社」投稿タイプにのみ表示される

「公開」する

出版社情報を登録する

投稿タイプ「出版社」 > 新規追加をクリック
タイトルに「インプレス」と入力
本文は省略
投稿画面下部に、前段でSmart Custom Fieldsで作成した「出版社詳細」という欄があり、「URL」という専用入力欄が作成されているので、そこに https://www.impress.co.jp/ と入力
「公開」する
　⇒ インプレス社の情報が「出版社」投稿タイプにURLとともに保存された

「書籍」投稿タイプに「出版社」投稿タイプとリンクするための設定

Smart Custom Fields > 新規追加
タイトルを「書籍詳細」と入力
書籍の詳細情報として「出版社」投稿タイプとリンクできるようにする
- 「フィールドを追加」ボタンをクリック
- タイプ＝「関連する投稿」、ラベル＝「出版社」、名前＝「publisher」とする
- 投稿タイプは「出版社」にチェック（書籍ではない…書籍から出版社情報を参照するので）
- 選択できる個数は「1」（その本と紐付ける出版社は1社なので）
右ペインの「表示条件」から「書籍」を有効にする
　⇒ このカスタムフィールド入力画面は「書籍」投稿タイプにのみ表示される

書籍 > 作成済みの記事を開く
投稿画面下部に、前段でSmart Custom Fieldsで作成した「書籍詳細」という欄があり、「出版社」という専用入力欄が作成されているので、そこから「インプレス」を選択
「更新」する
　⇒ 書籍に投稿タイプ「出版社」の「インプレス」の記事へのリンクが設定された

テンプレートを編集して「出版社」の値を表示しよう

編集するファイルは wp-content/themes/twentytwenty/template-parts/content.php をVisual Studio Codeで開く
ASIN の行の後に改行して、同じ書式で書く…が、PHPで取得した値が配列で保存されているので分解する必要がある。ここでは説明は省略する。以下をコピペする。

				<dt>出版社：</dt><dd>
				<?php 
				$publisher = SCF::get( 'publisher' );
				if ( $publisher ) {
					foreach ( $publisher as $postid ) {
						$title = get_the_title( $postid );	
						$link = get_permalink( $postid );
						?>
							<a href="<?php echo $link; ?>"><?php echo $title; ?></a>
						<?php
					}
				}
				?>
				</dd>

正常に記述できていれば、上図のように「インプレス」という出版社名がリンク付きで表示される。リンクをクリックするとインプレス社の「出版社」ページが開く。

今後、数百〜数千冊と書籍が増えた場合でも、「出版社」投稿タイプの「インプレス」の情報を編集すれば、すべての書籍にリンクされたインプレスの情報は更新される。

一方、インプレス社のページも同様に「関連する投稿タイプ」を使って書籍情報を紐付ければ、インプレス社のページから自社が出版している本の一覧を表示することができる。絶版になって削除すれば自動的に一覧から消える。

まとめ

ちょっと踏み込んだ内容を扱いましたが、「書籍」と「出版社」情報を別々に登録し、相互にリンクすることでクロスで情報の検索やソートができるようになり、管理も楽になります。これは実際の現場レベルの内容ですので、現段階ではイメージだけ掴めればOKです。

以上

次回の準備〜お問合せフォームを追加

お問い合わせフォームを設置する。
- Contact Form 7をインストールし、フォームを新規追加し、タイトルを「お問い合わせフォーム」として、その他はデフォルトのまま保存する。
固定ページを新規追加し、タイトルを「お問い合わせ」にする
- 「お問い合わせ」の本文欄に新規ブロックを追加し「Contact Form 7」を選び、ドロップダウンから今作成した「お問い合わせフォーム」を選択する
- 記事を公開する
テスト送信してみる
- サイトのおもて側で「お問い合わせ」ページにアクセスし、フォームが正常に表示されていることを確認したら、動作確認のためにテスト送信してみる。
- 名前やタイトルを「テスト」などダミーの内容を書いて、送信ボタンを押す。
  ⇒ 緑色の枠で囲まれた「メールは送信されました」という内容のメッセージが送信されれば無事送信完了
実際にメールが届いているか確認してみる
- 「Local」を開き、icc-booksの選択して、右側の画面の３つタブの最後「TOOLS」を選択
- 「OPEN MAILHOG」をクリック

ブラウザにメールアプリのような画面が開く（テスト用のメーラー）
先程のメールが無事送信されていれば、「ICCブックス」から”テスト”の内容のメールが届いている

以上