Skip to content
実践記録

静的サイトをWordPress化したら、想像の5倍大変だった

0621eyecatch

導入

これ、全部1日で起きたことです。何日もかけた話ではないです。むしろ1日でこんなに詰め込まれていたのか、と後から見返して自分でちょっと驚いた。

きっかけは単純で、はるか昔に作成したHTMLとCSSとJavaScriptで作ったポートフォリオサイトを、WordPressに移したかった。それだけだった。
テーマファイルを並べて、デザインはそのまま、中身だけPHPに変えればいい。

最初の3〜4時間は、それでだいたい合っていた。ローカル環境の中では、思っていたよりすんなり再現できてしまった。

問題はその後だった。せっかく動いたんだから、Antigravityで作った環境とGitHubと本番環境までつなげてしまおう、という欲が出た。

それが地獄の始まりだった。

簡単に終わると思っていた

front-page.phpとかpage.phpとか、必要そうなファイル名を並べて、Antigravityに「これをWordPressテーマに変換して」と頼んだ。最初の数十分は順調だった。ファイルはどんどん作られていく。

いざLocal環境でテーマを有効化しようとしたら「壊れているテーマ」という表示が出た瞬間もあったけど、index.phpが無いと言われて直したらすぐ動いた。
専門知識がないというのはこういう瞬間に効いてくるんだな、と思いつつも、この時点ではまだ余裕があった。

ここまでで3〜4時間。思っていたよりすんなりいったので、正直ちょっと調子に乗っていた。
なんならXにポストしたもんね。

Worksが縦一列になった

問題はここから本格化した。

Worksページは本来、画像がBento GridかMasonryみたいにきれいに並ぶはずだった。
実際に表示してみると、画像が全部縦に一列、ただ積み重なっているだけだった。
「またかよ」と、この後何度も思うことになる最初の一回。

Movie / Stillの絞り込みボタンを押しても何も起きない。
キャプションの文字がそのまま画面に露出する。画像の一部は404。

原因を一つに絞れなかったのがつらかった。（嘘。実は燃えた。震えるほどヒート。）
Consoleを開いて、出てくる赤いエラーを一つずつ潰していく作業になった。

  • Isotopeという並べ替え用のJavaScriptが正しく読み込まれていなかった
  • isotope-docs.min.jsという、デモサイト用の別物のファイルを使ってしまっていた
  • WordPress標準のjQueryのnoConflictに対応していないJSが混ざっていた
  • 日本語のファイル名やフォルダ名がそのまま残っていて、パスが通っていなかった
  • loading.gifやborder画像の参照先が壊れていた

正直、ここまで原因が分散しているとは思わなかった。
一つ直したら次が出てくる、というのを何回も繰り返した。
Consoleの赤いエラーを見るのにも、この頃から少しずつ慣れてきた気がする。
慣れたくなかったけど。

AIさんの「完了しました」を疑い始めた

手元の静的HTMLには、Worksが24件しかなかった。
でも実際に公開していたサイトには66件あった。
つまり、自分が持っていたデータはもう古かった。おいいい加減にしろぃ！

なので、今公開中のサイトを正として、
画像・キャプション・YouTubeリンク・Movie/Stillの分類・複数画像のギャラリーを、一つずつ移植していく作業になった。

ここでAIから何度も「完全に再現できました」と言われた。
最初は素直に信じていた。でも画面を開くと、全然再現できていないことがよくあった。
キャプションが欠けていたり、画像の順番が違っていたり。

何回かそれを繰り返すうちに、「完全に直りました」という言葉そのものを、そのまま信じなくなった。
AIの完了報告より、自分の目で見た画面とConsoleの方を信じる。
そういう感覚が、たぶんこの作業の中で一番大きく変わった部分だと思う。

ACFで管理画面から更新できるようにした

既存の66件を全部WordPressの投稿として作り直すのは、さすがに無理だと判断した。

なので、既存分はarchive-works.php内に静的HTMLとして残し、今後追加する分だけWordPressの管理画面から投稿できるようにする、というハイブリッドな構成にした。

ACFの無料版を使って、Movie/Still、single/movie/group、動画URL、追加画像1〜5、キャプションを入力できるようにした。
フィールドグループはfunctions.phpから自動登録するようにした。

投稿を更新したら一覧の先頭に出るように、modified DESCで並べる調整もした。
Portfolioページも同じ方式にした。
ただPortfolioはIsotopeじゃなくMasonryを使っていて、splash_textが存在しないというエラーでまた止まった。
ローディング表示のHTMLとJSを直して、グリッド表示とColorboxの動作をやっと取り戻した。

何を言ってんのかわかんねーと思うが、私も実際全部全部分かってる訳でもない。日本語でおk。

GitHubにつないだのにChangesが出ない

ここで一番混乱したのがこれだった。

GitHub Desktopをつなげたのに、Antigravityで修正したファイルが、なぜかGitHub Desktop側のChangesに反映されない。何を直しても変化なし。

調べてみたら、AntigravityがLocal環境で実際に編集していたテーマフォルダと、GitHub Desktopが監視していたデスクトップ側のフォルダが、別々の場所だった。さらに調べると、テーマフォルダの中に、もう一つ同じ名前のテーマフォルダがある二重構造になっていた。
マトリョーシカやめろ。なんでこんなことになったのか、正直今もよく分かっていないのがちょっとまずい。

最終的に、Localで実際に動いているテーマフォルダの方へ.gitを移して、Antigravityの修正がそのままGitHub DesktopのChangesに出るようにした。これでようやくCommit・Pushができる状態になった。

GitHub ActionsでXserverへ自動デプロイ

毎回ZIPを作ってWordPressの管理画面からアップロードするのが、面倒になってきた。
なので、GitHub Actionsで自動デプロイを組んだ。

流れとしては、Localで修正してGitHub DesktopでCommit・Push、そうしたらGitHub Actionsが動いて、XserverのWordPressテーマフォルダへ自動で反映される、という形。

XserverにはテーマフォルダだけにアクセスできるFTPアカウントを作って、GitHub SecretsにFTP_HOST、FTP_USERNAME、FTP_PASSWORDを登録した。
GitHub ActionsはFTPSを使う設定にした。

最初は「530 Login incorrect」というエラーで何度も止まった。
理由は明白。数十分前に設定したパスワードわかんなくなっちゃって、それを直したらやっと通った。
GitHub Actionsの画面が緑のチェックマークになった瞬間は、地味だけどかなり嬉しかった。

Contactが消えなかった意外な原因

今回は、サイトの持ち主のご希望で、ついでにContactのページを無くして欲しいとのことだった。

sidebar.phpからはContactのリンクをちゃんと消したはずなのに、本番サイトでは相変わらずContactが表示され続けていた。

キャッシュかと思って色々試したけど変わらない。
GitHubの反映漏れかと思ってそれも確認したけど問題なかった。

原因はそのどちらでもなかった。
Xserver上に、works・portfolio・about・contactという、旧静的サイトのフォルダがそのまま残っていた。
/works/にアクセスすると、WordPressより先に古いworks/index.htmlの方が表示されていた。
つまりWordPress側の修正は最初から関係なかった。

これに気づいたときは、ちょっと拍子抜けした。
あんなに悩んでいたのに、原因はもっと手前の、見落としていた場所にあった。

旧フォルダは削除せず、works_static_backupのように名前だけ変更した。
その後パーマリンクを再保存したら、ようやくWordPress版のページが表示されるようになり、Contactも消えた。
AboutページはWordPress側に固定ページを作っていなかったので、一度中身が消えてしまった。
本番でAbout固定ページを作って、About Pageテンプレートを指定し直して、なんとか復旧。

最終的にできたこと

  • 静的HTMLサイトのWordPressテーマ化
  • Isotopeグリッド表示
  • Masonryグリッド表示
  • Colorboxによる画像・動画のポップアップ
  • ACF無料版を使った追加投稿の仕組み
  • 既存作品と新規投稿のハイブリッド表示
  • LocalとGitHubの一本化
  • GitHub ActionsからXserverへの自動デプロイ
  • 不要だったContactページの削除
  • 旧静的サイトとの競合の解消

AIと一緒に作業して分かったこと

ChatGPTには相談役として、状況を説明したり原因を一緒に考えたりする役割を任せていた。
実装そのものはAntigravityにやっていただいた。この分け方は、自分にとっては合っていたと思う。

ただ、AIが「直りました」と言っても、それは作業ログ上の話でしかなくて、実際の画面やConsoleとは別物だった。
何度もそのギャップにつまずいた。
だから途中から、AIの報告は一旦受け取った上で、必ず自分の目で確認する、という手順を強めた。

専門的な知識が足りていないまま進めていたので、何が起きているのか分からないまま直っていることも多かった。それでいいのか分からないけど、とにかく前には進んだ。

まとめ

正直、まだ全部理解できているとは言えない。GitHubのフォルダがなぜ二重になっていたのかも、結局はっきりしないままだし、ACFの仕組みも完全には分かっていない。

それでも、画面が表示されて、GitHub Actionsが緑になって、Contactが消えて、サイトが今ちゃんと動いている。それだけは事実として残った。

ちなみに、今回はこの前契約したXserverにドメイン移管して作業しました。
ほんとに簡単でいい感じです。
ドメインの移管作業も、ChatGPTさんに相談しながらやったけど、なんも問題起きなくてつまんないから記事にしません。

▶︎

独自ドメインを取得した記事

一人だったら、たぶんWP化にチャレンジすらしなかったと思う。
何が分からないのかも分からない状態だったから。
今もまだ不安なところは多いけど、とりあえずこうして記録を書いている。

関連記事