卒業制作(6)-WordPress-デジハリ修了(23)
サイトマップにあるページをHTMLでコーディングし終えたら、いよいよWordPress化です。
※私はHTMLでWebページを作成→WordPress化という、デジハリのカリキュラムに沿って作業します。Webページの作り方に関しては受講内容や各人の考え方、スクールの方針などもあると思います。あくまでも卒業制作の一例と捉えてください。
Localの導入
WordPressの動作環境を自分のパソコン内に設定するためのツールです。WordPressの学習をするのなら、絶対にインストールしておくべき便利なツールです。
WordPressの動作を確認するためにサーバーへアップロードの手間が省けます。これが無くなるだけで、相当なストレスの軽減となります。
類似のツールは他にもあるようですが、導入の簡易さやWordPressの学習だけに用途を限定するのなら、Localで十分だと思います。
しかし、デジハリのカリキュラム内ではLocalの使用は学習しません。私の場合、卒業制作の打ち合わせ時にトレーナーさんからオススメされました。
個人的な感想ですが、はじめてWordPressを学習するのなら、カリキュラムと同様にサーバー上でWordPressを動かす方が良いかもしれません。
まずはサーバーで運用して、やるべきことや面倒なことを一通り学習していきます。
そして、卒業制作ではLocalで作業の効率化を図るというやり方が良いと思います。
Localの作業データを本番環境へ移行
Localで作成したWebサイトは自分のパソコン内に作られます。
卒業制作として提出するには、自分で用意したサーバーにアップロードして、サーバー上で正しく挙動するところまで確認しなければなりません。
Localの WordPressをサーバーに移行するなら、以下のブログを参考にバックアップツールを使って半自動で行うのが確実だと思います。
（私が使用していた時点での話です）
以降、特記が無ければ、本記事はLocalで作業しながらサーバーで運用を確認しています。また、Localでの動作は私が卒業制作の作業をしていた当時のものです。必ず、最新の情報をご確認ください。
サーバーへの転送
さくらインターネットを使っている場合、WordPressのデータをサーバーヘアップロードできるのは、デフォルトの設定では2MBまでです。
そのため、Localの作業データをバックアップツールを使ってサーバーへ移行する際、たいていの場合は制限に引っかかってしまいます。
そこで、以下のブログを参考に最大アップロードサイズを引き上げます。
セキュリティ対策
カリキュラムで習ったように、サーバーのセキュリティ対策などを行います。
このあたりはあえて詳述しません。デジハリのカリキュラムをご覧ください。
まずはメールフォームから
Localで作業環境を整えたら、メールフォームをWordPressのプラグインContact Form 7を使って実装しました。
『WordPress 仕事の現場でサッと使える！ デザイン教科書』で取り上げられており、使い方も同書に書かれていたことが決め手でした。
固定ページを作って、そこにメールフォームのショートコードを読み込むだけ……“これだけ”なら問題なく実装できました。
Localでメールチェック
Localで動作しているWordPressのメールフォームからメールが送受信できるかどうか、Localで確認する場合は、Localアプリの［Tools］→［mailpit］→［open mailpit］で確認できます。
詳しくは、以下のブログを参照してください。
こちらでメールの送受信も確認！ まずは、卒業制作完成です、バンザイ！
でも、これでは、あまりにも味気ないのでいろいろと手を加えることとしました。
「メディア」の画像を使う
メールフォーム内の「メールを送信」ボタンは画像にしたかったのですが。
固定ページのブロックエディタからは、あらかじめサーバーに用意しておいた画像（FTPで画像用フォルダにアップロード）を読み込むことが出来ません。
やろうと思ったら、あらかじめサーバー上の（Localであればパソコン）URLを取得しておいて、これをHTMLで指定して……となります。
でも、トレーナーさんからは「ブロックエディタでHTMLを直接記述するのはよろしくない（カスタムHTMLを使うなら話は違うけど）」と注意を受けました。
いや、それはわかるけど、じゃあサーバーにある画像はどうやって使うのか……っていうか、この考え方が間違いです。
ブロックエディタ上で使いたい画像は「画像を挿入」で使います。
一度、エディタからアップロードした画像は以降、管理画面の「メディアライブラリ」に登録され、ここにある画像は何度でも使えるようになります。あらかじめ「メディアライブラリ」に登録もできます。
そうだったのか！ っていうか、メディアライブラリは使い勝手がとても良い！ ここに到達するだけで、エラく時間が掛かって悩みました。
WordPressのブロックエディタでSVGを使う
WordPressはデフォルトの設定では、SVGのアップロードができません。せっかく、メディアライブラリの使い方が分かったのに！
しかし、プラグインのSVG Supportをインストールすれば、SVGのアップロードができます。
このプラグインのお陰で、無事SVGで作ったボタンを使うことができました。
使い方は以下のブログを参照してください。
なお、こちらのブログにもありますがSVGは厳密には文書ファイル（XMLベース、SVGをテキストエディタで開くと確認できる）なので、セキュリティの都合でデフォルトではSVGがアップロードさせていないのだそうです。
なるほど……SVGがXMLベースだからこそ便利で使いたいのですが、むしろそれがセキュリティの穴になりかねないとは。
こういうカンジで、デジハリのカリキュラム外のことで、いろいろ調べることが多いのも卒業制作です。
メールフォームからGmailのアドレスだけ届かない
Localでメールフォームが動作することを確認したら、いよいよサーバーにアップロードしての確認です。
Localで確認済みだから問題ないだろうと高をくくっていたら……なんとメールが届かない！ 「こんなことがあるの？」と驚きました。さすが卒業制作、一筋縄でいきません。
原因を追及するといっても、いったい何が起こっているのか、さっぱりわかりません。そこで、いろいろ試したところ、なんとなく症状が分かってきました。
Localでの動作は問題ない、メールは正しく届いている
サーバーにあるメールフォームから、Gmail宛てに送ったメールはすべて届かない（複数のプラグインで試した）
サーバーにあるメールフォームから、Gmail以外に送ったメールは届く
管理者のメールアドレスをGmailにしたら、管理者宛の通知も届かない
※あくまでも卒業制作時の現象です。
どうやらメールフォームの問題というより、WordPressとGmailに問題があるようです。
というわけで、さくらインターネットのヘルプを探してみると……ありました！
Gmailへのメールがエラーになる
これ以降は、卒業制作の作業をしていた当時のものです。また、原因と対策が多岐にわたっています。おそらく、このnoteを読んでも現在発生している問題が解決しないと思われます。
あくまでも「卒業制作時にこんなことがあった」という覚え書きです。
問題を解決したい場合は、必ずお使いのサービスのサポート情報をご参照ください。
【Gmailへのメール送信がエラーになって返ってくる現象でお困りのお客様へ】
【Gmail宛てにメールを送信するお客様へ・メール送信者のガイドライン変更(Gmail)に伴う設定変更のお願い】
さくらインターネットのサポートによると、Gmailを悪用したメールが増えすぎたため、セキュリティを強固にしたことが原因のようです。
私の場合、こちらのサポート情報を元にWordPressの設定を一つ一つ、すべて見直して設定し直していったら解決しました。記事はハイパーリンクで他の記事にも飛んでいますが、それもすべて読んでいきます。
ここで要注意なのが、「さくらインターネットに契約した当初は設定していない（画面も開いていない）項目であっても見直して、サポート情報どおりに設定する」ことです。
「使ってないから自分に関係ない」と思いがちですが、そういう箇所にもデフォルトでセキュリティの設定がされています。
とりあえず私の場合は、このサポート情報通りの設定でGmail宛てのメールが送信できるようになりました。この問題の解決だけで、三日ぐらい費やした記憶があります。
データベースと帳票の関係
メールフォームが完成したので、これで卒業制作を終わっても良かったのですが。
このメールフォームは「市民講座への参加申し込み」用に作りました。
できれば「市民講座の参加を受け付けていないときは、フォームを閉じている」ようにしたいと思いました。
ステータスが「受付中」と「受付以外」でメールフォームへ飛ぶリンク先を切り替える、フォームを差し替えてしまうとか考えたのですが……手動で作業するなら、それでも良いかなと思ったりしていました。
しかし、トレーナーさんとのやり取りで「カスタムフィールドのラジオボタンやチェックボックスの状態で、記事内の表示を切り替えられる」という話があったときに閃きました。
「あっ、これデータベースと帳票でやったところだ！」と。このときに、やっとWordPressで何ができるのかが、ちょっと実感できるようになりました。
これがどういうことなのかというと……伝票発行のシステムがあるとします。
見積もり依頼があったら伝票商品、単価、販売数を入力して、伝票のデータベースに登録します。
そして、伝票の種類を「見積書」にすると見積書のフォームに入力した内容が記載されます。
この見積もりがそのまま売り上げになったら、伝票の種類を「請求書」にすると請求書のフォームに入力した内容が記載されます。この際、消費税が計上されたり、支払いサイトによる入金期日なども記載されるでしょう。
……データベースには伝票の内容だけ登録。出力する帳票に応じて、フォームを切り替えて記載内容を変えたり、自動計算してくれます。
こういった伝票発行システムと似たようなことがWordPressではできる＝WordPressのデータベースの使われ方が、ちょっと分かったような気がしました。
講座の申し込み状況によってメールフォームを切り替える
WordPressの使い方がなんとなく分かってきたので、講座の参加者の募集受付のステータスごとに表示を切り替える方法を思い付きました。
メールフォームは「講座の申し込みを受付中」と「講座の申し込みを受けて受けていない」の2つ、メールを送れるか否かの状態があります。
メールが送れない場合は、さらに「スケジュールは発表されたが受け付けていない」「受付期間中だが満了」「講座終了」の状態があります。
これを整理すると以下のようになります。
講座のスケジュールは発表されたが受け付けていない-メールは送れない
講座の申し込みを受付中-メールは送れる
講座の受付期間中だが席が満了-メールは送れない
講座終了-メールは送れない
「講座の申し込みを受付中でメールは送れる」状態の時だけメールフォームを開けておくだけでも良いのですが。
「申込期間中なのに、どうしてメールが送れないのか？「いつになったらメールが送れるのか？」といった問い合わせが来る可能性も考慮して、このようにステータス分けをしました。
そこで講座の開始告知をする投稿ページに、カスタムフィールドで講座の「ステータス」をラジオボタンで選択するようにしました。
この「ステータス」のラジオボタンの状態によって、メールフォームに表示するメッセージを切り替えるようにしました。
実装できました！ なんて便利！ WordPress、便利すぎです！
申し込み受付中の講座だけを告知したい
ここまでできるなら、トップページの講座の告知も変えられそうなのですが……でも、トップページに表示するのは「直近で申し込み受付中」のものに限定したいです。
しかし、年度内に複数の講座がある場合、「受付中」の講座も複数になります。
日付で自動で管理するよりも「直近」であることを、ユーザーが意図的に管理できるようにしたいな……と思ったら、「先頭固定表示」という便利な機能がありました！
これは投稿日や公開日に関わらず記事を先頭に表示するもので、ブログなどでもよく見られるものです。
「申し込み受付中の直近の講座」だけ「先頭固定表示」にすれば、その講座だけをトップページに表示できるようになりました。
これは便利！
なお、「先頭固定表示」は複数の投稿にもチェックできます。
本来の意図なら、1つだけ表示されるようにした方が良いのでしょうが、イレギュラーで複数表示したい場合の対応と、1つだけ表示するコントロールがめんどくさかったので、そのままにしておきました。
講座のステータスごとに告知を変更
デザインカンプでぼんやり考えていた、講座のステータスごとに告知を変更することもできました。
考え方は、メールフォームと同じです。
「先頭固定表示」のおかげで、「告知をしたい講座のステータスだけ」表示することも簡単になりました。
さらに「年度内の講座がすべて終了」＝「告知する講座が存在しない」＝「先頭固定表示の投稿が無い」状態にするだけで、「年度内の講座がすべて終了」した告知も簡単にできました。
WordPress、便利すぎです！
アーカイブなど
メールフォームの表示の仕方をいろいろいじっているうちに、なんとなくアーカイブの使い方なども分かってきました。もともと講座で習っていたので、ようやく何を言っているのかが分かってきたようなカンジです。
投稿ページを「カテゴリー」ごとに集約して、かつ直近の投稿ページから順に並べる（降順）とか。
スケジュールであれば、逆に年度内の開催順に並べたいので開催日の昇順に並べるとか。こういう使い分けもできるので、ホントにWordPressって便利！
カテゴリーで分けにくいのでタグを使う
市民講座を長くやっていると、過去の講座を踏まえた講座や同一の事象を扱ったもの、同じ講師によるものなどなど、関連性が生まれてきます。
そうすると、同じ講師が過去にどんな講座を開いたのか、同じ事象（たとえば百年記念塔に関するもの）の講座にはどんなものがあるのか、と閲覧者は関連付けて閲覧したいと思うはずです。
そこで投稿記事に「タグ」を付けて、講座の関連づけて閲覧できる工夫もしてみました。
異なるジャンルの投稿＝カスタム投稿を使う
「私のクライアント」は市民講座とは別に、市が開催する出前講座も受け付けています。
WordPressならカスタム投稿が使えるので、出前講座をカスタム投稿にすることで「市民講座」と「出前講座」では異なる投稿として扱えるようにしました。
検索はちょっと…
ここまでできたので、投稿された記事の検索も付けようと思ったのですが。
デザインカンプでは設置を考慮しておらず、どこにどんな検索窓を付けるか検討する時間が無かったので、今回は保留としました。
検索の仕方が変わりました
WordPressが何者なのか理解できず卒業製作に着手するまでは、「ワードプレス メールを送る」みたいな、ぼんやりとした検索の仕方しかできませんでした。
しかし、WordPressのことがだんだん分かってくると、自分で何がしたいのか（何を知りたいのか）がわかってきました。
そうすると検索の仕方も「WordPress カテゴリー アーカイブ 投稿日順にソート」といったカンジで、やりたいことで具体的に検索できるようになりました。
ただ、「理解をして書いたコード」ではなく、その都度、検索しながら作っていったのでコードが継ぎ接ぎだらけで見苦しいものとなりました。
たぶん、これはきちんと整理整頓して第三者へ引き継ぎできるようにしなければならないのですが……このあたりは実現できませんでした。後ほどの課題です。
とはいえ、こうして無事、トレーナーさんに卒業製作のチェックを提出することができました！