WordPressでLPを作る｜静的HTMLと違った4つのこと

LPは素のHTMLとCSSで作ってきました。WordPressで作ってほしい、という条件の付いた依頼は範囲外なので見送っとりました。その範囲を広げたくて、練習用に AI（Claude）と1本まるごと作ってみました。手を動かしたのはほとんど AI で、私の番は、どう作るかを決めることと、サーバーに WordPress を立てる所、アップロードするファイルを選ぶ所でした。

先に結論を書いときます。写真と文字を並べて、スマホで崩れてへんか見る。見た目を作るところの手間は、HTMLのときとほぼ同じでした。違ったのは、置いたあとに動かすための配線です。フォーム、メール、CSS の3つでつまずいて、4つ目のテーマのzipは、前に別の作業で踏んどったので先回りしました。どれも、置いたらそのまま動く静的なHTMLでは考えんでよかったことです。

作ったのは2026年8月で、そのときは WordPress 7.0 でした。この記事は10月に、AI と当時の記録と公式の説明を突き合わせて書き直したもので、前の版から直した所はその場で断っとります。

客が管理画面だけで直せる形にした

題材は架空のレンタカー屋さんのLPです。作る時に決めた芯はひとつで、納品したあと、客が管理画面だけで直せる形にすること。

だから料金表は画像に焼かずに、WordPress の表のブロックで作りました。画像に焼いた瞬間、値段を1つ変えるたびにこっちへ依頼が来ることになります。それは客にとっても自分にとっても損です。よくある質問も、WordPress に最初から入っとる開閉のブロック（詳細）で作って、そのためのプラグインは足してません。

フォームが「読み込み中」で止まる

問い合わせフォームは Snow Monkey Forms（当時 12.1.4）というプラグインで作りました。実際のサーバーに置くと、フォームは画面にちゃんと出ます。項目を埋めて進めようとすると、「読み込み中」の表示のまま止まりました。

エラーメッセージは出ません。画面が壊れるわけでもない。ただ進まんだけです。

原因はパーマリンクの設定でした。「基本」のままやと、プラグインが内部で呼ぶアドレスが ?rest_route=…?ver=… のように疑問符が2つ並ぶ形になって、404 が返ってきとった。AI が2つ目の ? を & に替えて呼んでみると、今度は 403 に変わります。入口はあって、確認の印で断られとるらしい。どうやら、アドレスの組み立てだけが壊れとったようです。設定を「投稿名」に変えたら、そのまま通りました。

これは当時の版で踏んだ話で、今の版で直っとるかは確かめてへんです。ただ、フォームが黙って止まった時は、フォームの設定より先にパーマリンクを見る価値はあります。

「フォーム設置」は、見積の1行では足りん

サーバーの上でパーマリンクを直したら、確認画面まで進むようになりました。ほんなら次は最後の送信で止まりました。今度はメッセージが出ます。「管理者メールの送信に失敗しました。」

差出人が設定されてへんと WordPress の決まったアドレスになるので、AI がそれを疑って、実在するアドレスへ変えて送り直しました。同じでした。

前の記事ではここで「つまりフォームの設定やなくて、WordPressからのメール送信そのものが通ってへん。サーバー側の正確な理由まではまだ確かめてませんが、外部のメールサーバーを使う設定が要る、というところまでは実際に触って分かりました」と書いてました。理由は確かめてへんと断ってはいましたが、それでも言い過ぎでした。2週間ほどあとに、同じ WordPress から届いとった更新のお知らせのメールを見つけて、それを手がかりにパスワードの再設定もできました。少なくともその更新のお知らせは、同じ WordPress から届いとった。8月11日の時点でほかのメールが通っとったかは確かめてへんです。フォームの通知がなんで落ちたかも、まだ確かめてへん。外のメールサーバー（SMTP）を使う設定も、このLPには入れてません。架空の店なので、フォームの下に「通知メールの送信設定は行っていません」と書いて止めとります。

それでも、見積の話は変わりません。フォーム設置という1行で見積もると、実際にやることは3つあります。

• フォームを置いて項目を作る
• メールがちゃんと外に出ていくようにする（SMTP が要るかどうかを見極めるところから）
• 本当に受信箱に届くかを、最後まで通しで試す

1つ目だけ数えて見積を出すと、納品したあとに「問い合わせが来ません」と連絡が来ます。その時にはもう追加でお金はもらいにくい。無償で対応する未来が最初から埋まっとるわけです。今回も、メールが届かんかもしれんことは置く前から AI が予想しとって、AI と作ったサーバーに置く時の手順書の、公開して初めて分かることの項目に入れとりました。それでも、確認画面まで出た時点では画面の上は全部そろっとって、本当に止まるかは最後の送信を押すまで分かりませんでした。

届いとるCSSが、効いてへん

見た目を整えるCSSを、AI が子テーマの style.css に書きました。反映されません。AI はまず書き方の間違いを疑いました。

子テーマというのは、元のテーマ本体には手を入れずに、自分の変更だけを上から重ねる仕組みのことです。AI がファイルのアドレスを直に開いてみると、普通に開きます。中身も AI が書いた通り。ファイルは届いとる。それでも見た目には効いてへん。届いとるのに読まれてへんかったんです。

前の記事では「今のWordPressのブロックテーマは、子テーマのCSSを自動では読み込みません」と書いてましたが、これは言い過ぎでした。WordPress.org の公式の子テーマの説明では、子の style.css が読まれるかどうかは親テーマ次第です。親が子のぶんまで読む作りなら、子は何もせんでええ。今回の親の Twenty Twenty-Five は、本体のコードを見ると親自身のスタイルシートしか読まん作りでした。それで子のぶんは、AI が子テーマの functions.php に読み込む処理を書き足して、やっと効きました。

add_action( 'wp_enqueue_scripts', static function () {
	wp_enqueue_style( 'minato-rentacar-lp', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
} );

ファイルが届くことと、読まれとることは別です。静的なHTMLなら、置いて読み込みを1行書いた時点で終わっとった作業でした。

zipは、前に踏んどったので最初から tar で作った

最後は納品の形です。テーマ一式をzipにまとめて、管理画面からアップロードします。

前の記事では、このLPで作ったzipが弾かれた、と書いてましたが、まちがいでした。zipが弾かれたのは、これより前の別の作業です。その時は AI が、Windows の PowerShell に入っとる Compress-Archive というコマンドでzipを作っとって、中のファイル名の区切り記号が Windows 流の \ になっとりました。それで受け取った側が、フォルダーの階層を読めてへんかった。ZIP の仕様書には、区切りは / でなあかん、と書いてあります。

前の記事には「zipの中身を目で見ても、区切り記号は見えん」とも書いてました。これも逆です。その時の作業の記録には、AI が中身の一覧に \ が出とるのを見とったのに、表示の癖やと流した、と残っとります。

それで、このLPのzipは最初から Windows に元から入っとる tar で作りました。あわせて、zip の中のファイル名を生のまま読む小さな台本も AI が作って、\ が混ざってへんか、要るファイルがそろっとるかを、作るたびに見るようにしました。

その台本が働いたのは、8月の下旬にこのLPを作り直した時です。AI が同じ tar のつもりで、Git Bash に入っとる tar を使ってもうた。こっちは GNU tar で、zip は作れません。名前だけ .zip で、中身は tar の形のファイルができとりました。台本がそれを止めたので、アップロードする前に気づいて、Windows の tar で作り直しました。

書き直すにあたって、AI に手元でもう一度試してもらいました。Windows PowerShell 5.1 の Compress-Archive で作ったzipは、中の名前が mytheme\style.css になっとりました。同じフォルダーを Windows の tar で作ると mytheme/style.css です。Git Bash の tar で .zip の名前を付けて作ると、頭にフォルダー名がそのまま並んだファイルができて、台本は中のファイルを1つも読めませんでした。PowerShell 7 の Compress-Archive と、エクスプローラーの右クリックから作るzipは試してへんので、どっちになるかは分かりません。

違いは、見た目やなくて後ろの配線やった

写真を並べて、文字を置いて、スマホで崩れてへんか見る。この部分はどっちで作っても同じでした。

違ったのは、置いたあとに動かすための配線が要るかどうかです。フォームは置いただけでは送れんかったし、CSSは置いただけでは読まれんかった。テーマのzipも、固める道具を間違えると入りません。静的なHTMLは、置いたらそれがそのまま動きます。その差でした。

それで確認のやり方を変えました。作ったら、その機能を最後まで1回通します。フォームなら本当に送信して、受信箱に届くところまで見る。ただ、この見本は架空の店なので、受信箱までは通してへんです。フォームの下には、通知メールの送信設定はしてへんと注記を出したままにしとります。テーマなら実際に別の場所へアップロードして有効化まで試す。今回のつまずきはどれも、置けたかどうかを見ただけでは出てこんかった物でした。

前の記事では、ここで「踏んだ4つをそのまま確認項目にして、8項目のチェックをスクリプトにした」と書いてましたが、まちがいでした。AI が作った納品前のチェックの台本は確かにあって、見本として回すと7項目、実案件の時だけ見る2つを足すと9項目です。ただ、見とるのはページ内リンクの飛び先、電話番号の表示とリンクのずれ、架空の注記、テーマに検証用のファイルが混ざってへんか、といった所です。4つのうち台本で見とるのは zip の区切りだけで、それも別の台本。メールはサーバーに置く時の手順書に、フォームから1件送って通知メールが届くか見る、と書いて、手で確かめる形です。CSS は functions.php に直しを入れたので、テーマと一緒に付いていきます。パーマリンクは手順書にも入ってへんかった。これは今回書き直しながら気づいた穴です。

今回作ったLPは、架空のレンタカー屋さんの見本として置いてあります。店先の「作ったもの」の並びの「WordPressで作ったLP」から見本を開けます。店名も料金表も店舗も全部架空です。

WordPress の困りごとで、エラーの出方と本当の原因がずれとった話はWordPressで画像だけ403エラーとWordPressのスラッグに-2が付く原因にも書きました。WordPress を使わずにLPを置いた時の話はCloudflare WorkersでLP公開です。

WordPress のLPやフォームで困っとったら

WordPress でLPを作りたい、置いたフォームが止まる、送ったはずのメールが届かん。そういう時は、今の状態を見せてもらえたら、どこで止まっとるかの切り分けと作る形をこちらで書き起こします。

相談する（メッセージのみ）