LPは素のHTMLとCSSで作ってきました。WordPressで作ってほしい、と言われたら範囲外なので断っとりました。その範囲を広げたくて、練習用に1本まるごと作ってみました。
見た目を作る手間は、正直そんなに変わりませんでした。違ったのはその後ろです。静的なHTMLでは考えんでよかったことが4つ出てきました。フォームが動かんかった話、見積の項目が足りてへんかった話、CSSが効かんかった話、作ったzipが弾かれた話。この順に書きます。
断った案件がきっかけやった
きっかけは、ココナラで見つけたレンタカー屋さんのLP案件です。発注率の高いクライアントで、内容もやれそうやった。でも降りました。自分の出品がHTML・CSS・JSで作る形になっとって、WordPressは範囲外やったからです。
LPの案件自体は、応募が100人を超えるものが並ぶくらい需要があります。そこにWordPressという条件が付いた瞬間だけ、自分の手が届かんかった。それで練習用に、架空のレンタカー会社のLPを1本作ることにしました。
作る時に決めた芯はひとつです。納品したあと、客が管理画面だけで直せる形にする。だから料金表は画像に焼かずに表のブロックで作りました。画像に焼いた瞬間、値段を1つ変えるたびにこっちへ依頼が来ることになります。それは客にとっても自分にとっても損です。よくある質問もWordPressに最初から入っとる開閉ブロックで作って、プラグインは足しませんでした。
フォームが「読み込み中」で止まる
問い合わせフォームのプラグインを入れて、ページに置きました。画面にはちゃんと出ます。項目を埋めて送信を押す。そこで「読み込み中」の表示のまま、止まりました。
エラーメッセージは出ません。画面が壊れるわけでもない。ただ進まんだけです。
原因はパーマリンクの設定でした。「基本」のままやと、プラグインが内部で叩くアドレスに疑問符が2つ並ぶ形になって404が返ってきます。設定を「投稿名」に変えたら、そのまま通りました。
知っとったら1分で終わる話です。知らんかったら、フォームの設定を疑って何時間も溶かします。実際、最初に疑ったのは自分が置いた項目の書き方の方でした。
「フォーム設置」は、見積の1行では足りん
パーマリンクを直して、確認画面まで進むようになりました。ほんなら次は最後の送信で止まりました。今度はメッセージが出ます。管理者メールの送信に失敗しました、と。
差出人のアドレスが架空やからかと思って、実在するアドレスに変えました。同じでした。つまりフォームの設定やなくて、WordPressからのメール送信そのものが通ってへん。サーバー側の正確な理由まではまだ確かめてませんが、外部のメールサーバーを使う設定が要る、というところまでは実際に触って分かりました。
ここは見積の話に直結します。フォーム設置という1行で見積もると、実際にやることは3つあります。
- フォームを置いて項目を作る
- メールが外に出ていく設定をする
- 本当に受信箱に届くかを通しで試す
1つ目だけ数えて見積を出すと、納品したあとに「問い合わせが来ません」と連絡が来ます。その時にはもう追加でお金はもらいにくい。無償で対応する未来が最初から埋まっとるわけです。
届いとるCSSが、効いてへん
見た目を整えるCSSを書きました。反映されません。書き方を間違えたかと思って何度も見直しました。
ファイルのアドレスをブラウザに直接打ち込んでみたら、普通に開きます。中身も自分が書いた通りでした。届いとる。でも効いてへん。
今のWordPressのブロックテーマは、子テーマのCSSを自動では読み込みません。子テーマというのは、元のテーマ本体には手を入れずに、自分の変更だけを上から重ねる仕組みのことです。この上乗せぶんを読み込む処理を自分で書いて、やっと効きました。
ファイルが届くことと、読まれとることは別です。静的なHTMLなら、置いて読み込みを1行書いた時点で終わっとった作業でした。
作ったzipが、テーマとして弾かれた
最後は納品の形です。テーマ一式をzipにまとめて、管理画面からアップロードしました。テーマファイルが存在しません、と言われました。
zipを開いたら中身は全部入っとります。原因はWindowsの標準機能でzipを作ったことでした。中のファイル名の区切り記号がWindows流のままになっとって、WordPress側が階層を読めてへんかった。Windowsに元から入っとる別のコマンドで作り直したら、そのまま通りました。
zipの中身を目で見て確認しても分かりません。見えるのはファイル名だけで、区切り記号は見えんからです。
違いは、見た目やなくて後ろの配線やった
写真を並べて、文字を置いて、スマホで崩れてへんか見る。この部分はどっちで作っても同じでした。時間もほぼ変わりません。
違ったのは、置いたあとに動かすための配線が要るかどうかです。フォームは置くだけでは飛ばん。CSSは置くだけでは読まれん。テーマは固めるだけでは入らん。静的なHTMLは、置いたらそれがそのまま動きます。その差でした。
それで確認のやり方を変えました。作ったら必ず、その機能を最後まで1回通します。フォームなら本当に送信して、受信箱に届くところまで見る。テーマなら実際に別の場所へアップロードして有効化まで試す。置いたところで確認を終わらせない。
今回踏んだ4つは、そのまま確認項目にしました。パーマリンクの設定、メールが実際に届くか、CSSが読み込まれとるか、zipの中の区切り記号。全部で8項目のチェックをスクリプトにして、テーマと一緒に納品物へ入れてあります。自分の目は毎回同じところを見落とすので、機械に見てもらう方が確実でした。
もしWordPressでのLP制作を受けるなら、見積の時点でこの配線ぶんを数に入れといたほうがええです。客から見える完成品は同じでも、そこまでの道のりが同じやないので。
今回作ったLPはそのまま置いてあります。架空のレンタカー屋さんの設定で、料金表も店舗も全部架空です。実物はこちら：みなとレンタカー（LP制作サンプル）
あわせて読みたい
- WordPressで画像だけ403エラー｜原因はWAFの誤検知やった｜これもエラーの出方が実際の原因とズレとった話
- テストが通っても本番で落ちる｜緑を信じて1日分飛ばした｜「動いとるように見える」をどう疑うかの話