第22回 記事の分類 まとめ / お問合せフォームの作り込み

by

事前準備

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

前回のおさらい

これまでの流れ

  • 本屋の自社サイトに書籍紹介コーナーをつくる
  • 投稿は “お知らせ”、固定ページは “会社紹介”に使う
  • 掲載する書籍が増えていくことを考え、カスタム投稿タイプとカスタムタクソノミーを作成し分離する
  • プラグイン「Custom Post Type UI」で「書籍」というカスタム投稿タイプ、「本のカテゴリー」というカスタムタクソノミーをつくる
  • 作成したカスタムタクソノミー「本のカテゴリー」に、必要な分類項目をタームとして登録する
  • 価格や著者などの詳細項目は、詳細検索への対応や、本文欄に書くことで表記ゆれやデザイン崩れが起きることも考慮し、カスタムフィールドに登録
  • 「書籍」投稿タイプでカスタムフィールドをサポートするようにCPT UIの設定変更
  • カスタムフィールドの入力欄が表示されるように投稿画面の右上の三点ドットメニューから設定変更
  • テスト登録してみる。本のタイトルはタイトル欄へ、紹介文は本文欄へ、分類は該当するタームにチェック、詳細はカスタムフィールドに個別に入力

テーマ > テンプレートファイルを編集して詳細データを表示する

  • どのテーマ/テンプレートも初期状態ではカスタム投稿タイプ/カスタムタクソノミー/カスタムフィールドに対応していないので（＝ユーザーによる独自の設定項目であるから）、テンプレートを編集して上記項目が表示されるようにカスタマイズする
    　⇒ エディターアプリ（今回はVisual Studio Code）を使用して、直接テンプレートファイルを編集する
  • 書籍の詳細情報（カスタムフィールド）は紹介文＝WordPressの記事本文の下部に表示する
    　⇒ 編集するファイルは wp-content/themes/twentytwenty/template-parts/content.php
    　⇒ the_content() 関数が本文を表示する関数なので、そのすぐ下に書く
著者：<?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>
  • 定義リストでタグ付け（マークアップ）したことによって、ただのひと固まりの文章だったものが意味付けされた上に、テーマに記述されたCSSによってスタイルも整った。
完成形のイメージ
  • 価格改訂など、データを変更する必要がある場合でも、投稿画面を開いてカスタムフィールド「単行本価格」の値を￥1,250(税込) と打ち直すだけ。Webの知識がなくとも、デザイン崩れを起こすことなく、簡単に更新できる。
  • リストの最後に「本のカテゴリー」を追記する
<dt>カテゴリー：</dt><dd><?php the_terms( $post->ID, 'category2' ); ?></dd>
  • the_term 関数を使い、第一引数に記事ID、第二引数に呼び出すタクソノミーのスラッグ（category2）を指定することで、その記事に紐付けられた「本のカテゴリー」のターム一覧がリンク付きで表示される。

「書籍」とは別に「出版社」投稿タイプをつくり、相互に参照する

  • 書籍のカスタムフィールドに出版社の名前を毎回書くのは非効率であり、また出版社の一覧ページ/出版社別のページがあると便利と思われるため、CPT UIで「書籍」とは別に「出版社」というカスタム投稿タイプをつくり、相互に参照する設定にする。
    • 名前：出版社、スラッグ：publisher、カスタムフィールドもサポート
    • カスタムタクソノミーの登録は今回は省略（本来、書籍と同様に「出版社のカテゴリー」をつくり分類する）
    • テスト登録で「インプレス社」の情報を登録
  • 異なる投稿タイプの記事同士をリンクする機能を持つカスタムフィールド系のプラグイン「Smart Custom Fields」をインストール
  • 同プラグインにてカスタムフィールドの入力欄「書籍詳細」を新規作成する。
「タイプ」は「関連する投稿」、「投稿タイプ」は参照先の「出版社」にチェック、選択できる個数は「1」、「表示条件」は「書籍」での表示を有効にする
  • 投稿画面下部にあらわれた「書籍詳細 > 出版社」入力欄から「インプレス」を選択すると、その書籍のページと「インプレス」の出版社の記事へのリンクが内部的に設定される
左の欄から出版社を選択すると右の欄に入る

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

  • 編集するファイルは wp-content/themes/twentytwenty/template-parts/content.php をVisual Studio Codeで開く
  • Smart Custom Fieldsで保存した値を取り出す SCF::get() 関数を記述する。
    • 取得した値は配列（＝1ダース12本の鉛筆の箱がさらにダンボールにたくさん入っているイメージ）で受け取るので分解する必要がある。
				<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>

				<dt>出版社：</dt><dd>
				<?php 
				$publisher = SCF::get( 'publisher' ); // Smart Custom Fieldsで保存された「publisher」の値を呼び出す
				if ( $publisher ) { // 値がある場合のみ以下実行
					foreach ( $publisher as $postid ) { // 配列をループで回しながら末端の値=出版社の記事IDを取り出す
						$title = get_the_title( $postid ); // 記事IDを元に、出版社名を取得
						$link = get_permalink( $postid ); // 記事IDを元に、記事のURLを取得
						?>
							<!-- リンクの書式を構成 -->
							<a href="<?php echo $link; ?>"><?php echo $title; ?></a>
						<?php
					}
				}
				?>
				</dd>
完成形

「インプレス」という出版社名がリンク付きで表示される。見た目には他のカスタムフィールドの情報と同じだが、実際は別の記事＝インプレスの出版社情報を参照しており、リンクをクリックするとインプレス社のページが開く。

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

今後、数百〜数千と書籍や出版社が増えた場合でも、最小限の手間でサイト内の情報を最新の状態に保つことができる（省力化）。

以上

お問合せフォームを作り込んでみよう

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

  • ブラウザにメールアプリのような画面が開く（テスト用のメーラー）
  • 先程のメールが無事送信されていれば、「ICCブックス」から”テスト”の内容のメールが届いている
受信しかできない袋小路。Localで作成されたWordPressから送られたメールのみ受信できる、テスト用のメールアプリ。

お問合せフォーム下部の書籍詳細項目を消す

前回、書籍の詳細情報を表示するためにcontent.phpというテンプレートファイルを編集したが、このファイルはすべての投稿タイプの詳細ページで共通で使われるファイルのため、書籍ページ専用に作り込むと他のページにおいて不要な情報が表示されてしまう。書籍とその他のページでcontent.phpを分ける。

  • Visual Studio Code の左ペインの一番上「エクスプローラー」を開き、content.phpの階層を開く
  • content.phpを選択した状態でキーボードの ctrl + c を押し、続けて ctrl + v を押すとファイルが複製される（content copy.php）
  • 複製されたほうを content-books.php と名称を変更する
    • この “books” は、「書籍」投稿タイプのスラッグ
  • これにより今後は書籍の詳細ページを開いたときは content-books.php ファイルが読み込まれ、それ以外の投稿タイプではcontent.phpが読み込まれる
  • content.php を開き、前回追加した<dl>〜</dl>を削除して保存する
  • お問合せフォームのページをリロードすると、書籍の詳細項目が消えているのが確認できる

フォームの内容を拡張する

お問合せフォームに必要な項目…お客様からいただく情報で必要なもの / 不必要なものは何だろう？…ひとまず、カルビーのお問合せフォーム（ https://faq.calbee.co.jp/form/contactus.html ）を参考にメールフォームの項目を増やしてみよう。

やること。

  • 以下の項目を追加する
    • お問合せの種類
    • 電話番号
    • 性別
  • 以下の項目名を変更する
    • 題名 → タイトル
    • メッセージ本文（任意） → お問合せ内容
  • 並び順を以下のように変更する
    • お問合せの種類
    • タイトル
    • お問合せ内容
    • メールアドレス
    • お電話番号
    • 氏名
    • 性別

「お問合せの種類」を追加する

  • お問合せの種類はドロップダウン形式にする
    • 入力フォーム内の先頭にカーソルを置き、改行
    • ドロップダウンメニューボタンをクリックして設定画面を開く
  • 「タグを挿入」ボタンをクリックすると、カーソルの位置に一連のコードが挿入される

項目の並び替え

<label>から</label>までをカット＆ペーストで、必要な順番に並び替える

項目名の変更

<label>の後の語句を打ち直す

「お電話番号」を追加する

  • 挿入する位置にカーソルを置き、改行する
  • 「電話番号」ボタンをクリック
  • 今回は必須にはしないので「必須項目」のチェックは付けない
  • タグを挿入

「性別」を追加する

  • 挿入する位置にカーソルを置き、改行する
  • ラジオボタンをクリックして設定画面を開く
  • 「オプション」欄に 選択しない / 男性 / 女性 の３つの選択肢を一行ごとに書く
  • タグを挿入

各要素をマークアップする

デフォルトのフォーム内容は<label>で囲まれている。これも一般的だが、前段のラジオボタンの項目で内部でlabel要素を使っていて、さらにlabe要素で囲むとエラーが発生するため、今回は前回と同様に<dl><dt><dd>タグでマークアップする。既存の<label>タグは除去する

完成形
  • テスト送信してみよう
    • 必須項目のテスト
      • あえて必須項目の「タイトル」を空欄にして送信してみよう
        • 「入力内容に問題があります」とメッセージが表示され、送信されない
    • タイトル含め、ダミーの内容で良いので、すべての項目を埋めてあらためて送信
    • 送信完了
  • Mailhogで無事受信できているか確認してみよう
  • 差出人、題名、メッセージ本文 しか記載されていない！
    • しかも、打ち直したはずの項目名が直っていない…

送信されるお問合せメールの書式を編集する

メールフォームの内容を作っただけでは、サイトに表示されるメールフォームが拡張されるだけで、送信されるメールの文面には反映されない。2つ目の「メール」タブから、送信されるメール本文にメールタグを挿入する必要がある。

下線で設定済みのメール項目が示されている。濃い黒色の項目がまだ未挿入の項目。
  • 本文内にメールタグをコピペする。見出しも既存の項目にならって記述する（書いたとおりにメールが届くので、見やすくなるように記述する）。
「題名」の項目も、デフォルトの書式に限らずわかりやすい題名に変更する
  • 再度、テスト送信
  • 無事、追加項目も書いた書式どおりに本文内に表示されているはず

補足…

  • 郵便番号の入力で市区町村を自動入力
  • 個人情報の取り扱い

以上

　

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x