質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.63%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 889

Co9xsR

score 5

【環境】
ローカル環境は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は独自ドメイン)。しかし下層ページに移動しようとすると、データベース接続確立エラーとなる。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+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」の文字がないかを検索。もしあれば置換

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/21 12:17

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

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

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

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

    キャンセル

  • 2020/03/22 08:35

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

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

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

    キャンセル

  • 2020/03/22 11:57

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る