WordPressサイトをMAMPローカル環境からエックスサーバーに移行時にCSSが反映されない

Question

【環境】
ローカル環境はMAMP、FTPソフトはCyberduck,サーバーはエックスサーバー、移行したいサイトのテーマはLightningです。
テキストエディタはVsCodeです。

【実現したいこと】
MAMPで作成したWordPressサイトをエックスサーバーにアップしたい。

【行った事】
MAMPで作成したWordPressサイトをエックスサーバーに移行しようとしています。
具体的には「アプリケーション/MAMP/htdocs/wordpress」内のファイルをすべてFTPソフトでエックスサーバーの独自ドメイン直下のpublic_html内にコピーしました。
また、wp-config.php内の
データベース名
ユーザー名
パスワード
ホスト名
をエックスサーバーの情報を元に適切に入力しました。

その後、MAMP内のphpMyAdminからローカルのデータベースを.sql形式でエクスポートしました。
ここまでは上手くできています。

そのあと、sqlファイル内のlocalhost:8888の記述をすべて独自ドメインの表記に置き換える必要があるので、以下の記事を参考にSearch Replace DBを使用し、書き換えたファイルをインポートしてみましたが、サイトは表示されるがCSSが適用されず、かつ画像がすべて表示されない状態になってしまいます。サイト内リンクを含めページ間の移動は上手く行っています。ちなみに/wp-adminにもアクセスできません。
https://wheelchair-coder.com/281/

その後、推奨されていない方法だとは知りつつも、テキストエディタの置き換え機能でlocalhost:8888を独自ドメインに置き換えたsqlファイルをインポートしてみるも、結果は上記と同じです。

次は、置き換えを一切せず、MAMPからエクスポートしただけのsqlファイルをエックスサーバーのデータベースにインポートしてみると、トップページのみCSS、画像含め正常に表示されます。
しかし、その状態で下層ページに移動しようとすると「データベース接続確立エラー」となります。
URLを見た所localhost:8888のページを探しにいっていたのでここは理解できます。

まとめると、
①MAMPのphpMyAdminからエクスポートしたsqlファイルのドメイン名をlocalhostから独自ドメインに書き換えたものを本番環境にインポートすると、CSS・画像が適用されない。しかし、ページ間の移動は上手く行っている。

②MAMPからエクスポートして何も書き換えを行っていないsqlファイルを本番環境にインポートすると、トップページはCSS・画像含め正常に表示されている（しかも書き換えてないはずなのにURLは独自ドメイン）。しかし下層ページに移動しようとすると、データベース接続確立エラーとなる。

以上、長文かつわかりにくくなってしまいましたがお力を貸していただきたいです。
何か足りない情報があればすぐに補足します。
どうかよろしくお願いします????‍♂️

Answer 1

「Search Replace DB」を使う方法を頻繁に使っています。
その際、以下の作業を行っていないのであれば試してみてもいいかと思います。

[1] 置換する際に、URLの末尾に「/」があった場合は、やり直してみてもいいと思います。
置換する際は、末尾に「/」があるか否か、「http」なのか「https」なのかなど厳密に認識した上で作業してください。

---

[2] 「Search Replace DB」を用いて置換を行った場合、
「.htaccess」をエックスサーバー用に書き換える必要があります。

パーマリンク設定 (/wp-admin/options-permalink.php) で「変更を保存」を押すと、
自動で.htaccessが更新されるのでOKです。

自動更新できなかった場合は.htaccessに書くべき内容が表示されるので、
手動で.htaccessを書き換えてください。

---

[3] ソースコード内に「localhost:8888」の文字がないかを検索。もしあれば置換

Comments

[Co9xsR]

ご回答ありがとうございます！
[1] に関して自分で確認して見たところ今までは
「localhost:8888」→「〇〇.jp（独自ドメイン）」に置き換えていた所を
「localhost:8888/フォルダ名」→「〇〇.jp（独自ドメイン）」に置き換えた所表示自体は上手く行きました！

ただ、「〇〇.jp/wp-admin」には正常にアクセスしてログインできるのですが、ダッシュボードからサイトを表示すると「localhost:8888/フォルダ名」にリダイレクトされているようです。

スマホで確認した場合はすべての下層ページも含め「〇〇.jp/slug名」となっているので、MAMPを使っているPCのみで起こっている状態です。

初期の質問の趣向とは少しずれますが、お力を貸して頂けると幸いです。
よろしくお願いします????‍♂️

[new1ro]

[2] を実行するまで、"リダイレクト"は発生するのではないかと思います。
サーバ上の「.htaccess」の中身はどのようになっていますか? (フォルダ名が入ったままになっていませんか?)

> スマホで確認した場合はすべての下層ページも含め「〇〇.jp/slug名」となっているので、MAMPを使っているPCのみで起こっている状態です。

スマホでは問題なく表示できた、ということですか?
であれば、うまくいっていないときの.htaccessをブラウザがキャッシュしている可能性もあります。
別の、普段使っていないブラウザでアクセスしてみてください。

[Co9xsR]

キャッシュを削除したところPCでも上手く表示されました！
ご丁寧なご回答ありがとうございました????‍♂️
助かりました????