WordPress管理画面の壊れたCSSを修正する方法

出会う ワードプレス 破損したバックエンドのCSSスタイルの問題は本当に頭痛の種です。なぜなら、バックエンドの管理インターフェイスが乱雑でスタイルのないページになってしまう可能性があるからです。

この問題は、サイトのバックエンドを使いにくくするだけでなく、サイトの管理やメンテナンスにも直接支障をきたすので、早急に解決しなければならない問題です。そして、多くの初心者はそれを解決する方法を知らないことが多いのです。

私たち自身のウェブサイトでも同様の問題に遭遇したため、最も簡単で効果的な解決策を見つけるためにあらゆるトラブルシューティングを試しました。このチュートリアルでは、以下の方法を紹介します。ワードプレスのクイックフィックス バックエンドCSSスタイル破損の問題

WordPressのバックエンドのCSSが壊れているのはなぜですか？

WordPressのバックエンドのCSSが崩れる原因はたくさんあり、初心者が問題をトラブルシューティングするのは困難です。以下に、WordPressバックエンドのCSSスタイルが崩れる主な原因をまとめました：

1. プラグインの競合
   コードの質が低いプラグインには独自のCSSファイルが含まれていることがあり、WordPressのデフォルトスタイルと衝突してバックエンドのスタイルに異常をきたすことがあります。
2. HTTP/HTTPSの不一致
   サイトにコンテンツが混在している場合（一部のファイルが HTTPS ではなく HTTP で読み込まれる）、ブラウザが CSS ファイルの読み込みを妨げ、スタイルが失われることがあります。
3. テーマ妨害
   テーマによってはバックエンドで独自のCSSファイルを読み込むため、競合が発生する可能性があります。また、カスタムバックエンドテーマが使用されている場合、スタイルの問題が発生する可能性があります。
4. キャッシュの問題
   ブラウザのキャッシュに古いCSSファイルが保存されている可能性があります。また、キャッシュ プラグインが古い CSS ファイルを提供し、スタイルが正しく表示されない可能性があります。
5. CDNの問題
   コンテンツ配信ネットワーク（CDN）の設定が間違っていると、古いバージョンのCSSファイルが配信され、スタイルが欠落したり破損したりする可能性があります。
6. ファイルパーミッションエラー
   CSSファイルのパーミッションが正しく設定されていない場合、サーバーはそれらを読み取ることができない可能性があります。
7. ファイルの破損
   更新やアップロードの過程で、CSSファイルが破損または紛失する可能性があります。
8. ブラウザの拡張機能
   ブラウザの拡張機能（特にコンテンツブロッカー）の中には、CSSの表示を妨害するものがあります。

これらの原因を理解することで、WordPressバックエンドで壊れたCSSスタイルの根本的な原因を素早く突き止めることができ、より効果的に問題を修正することができます。

ステップ1：プラグインの競合チェック

私たちの経験ではWordPressプラグイン(特に質の悪いプラグイン) は通常、バックエンドの CSS が破損する主な原因です。しかし、WordPressのサイトやサーバー設定の問題により、よくできたプラグインであってもコンフリクトを引き起こすことがあります。

プラグインの競合を特定し、解決する方法を以下に示します：

1.すべてのプラグインを無効にします。

まず、WordPressのバックエンドに移動し、次の場所に移動します。 プラグイン " インストール済みプラグイン ページ
のすべてのプラグインをチェックします。 一括操作 ドロップダウンメニューから選択 非アクティブ化をクリックしてください。 アプライアンス.

その後、バックエンドページを更新するか、再読み込みして、CSSの問題が解決されているかどうかを確認してください。問題が解決された場合は、プラグインが競合を引き起こしていることを意味します。

2.ケースバイケースでプラグインを有効化

問題の原因となっている特定のプラグインを特定するには、プラグインを1つずつ再有効化する必要があります。各プラグインの下にある コミッション.

その後、バックエンドページを更新し、CSSが再び壊れていないか確認してください。
このようにして、問題を引き起こしている特定のプラグインを特定することができます。

3.プラグインの更新または交換

競合するプラグインが特定されたら、そのプラグインがアップデートされていないか確認します。アップデートで問題が解決しない場合は、代替プラグインを探すか、プラグイン開発者に連絡して問題を解決することを検討してください。

ステップ2: HTTPSロードの安全でないファイルのチェック

CSSの破損につながるもう1つの一般的な問題は、不適切なHTTPS設定です。

これは、ウェブサイトがHTTPSプロトコルを使用しているにもかかわらず、一部のCSSファイルがHTTP（安全でないプロトコル）で読み込まれている場合に発生します。
このような場合、Google Chromeなどのブラウザは自動的にこれらの安全でないリソースをブロックし、WordPressのバックエンドのCSSが破損します。

問題を特定するには？

これは、ブラウザの 検査ツール（インスペクト） 問題の確認

1.ブラウザを開き、ページを右クリックして プローブ.

2.切り替え コンソール タブで ミックスコンテンツエラー.

もし "安全でないコンテンツはブロックされました" というエラーメッセージが表示されます。

混合コンテンツの問題を解決するには？

1. WordPressの設定でURLをチェック

• 入り込む 設定 " 全般 ページで ワードプレスアドレス 歌で応える サイトアドレス のURLは HTTPS 始まりです。

2. WordPressにHTTPSを強制的に使用させます。 URLがすでに正しい場合は、手動でWordPressにHTTPSプロトコルを使用させることができます。
編集 wp-config.php ファイルに以下のコードを追加してください：

define('FORCE_SSL_ADMIN', true)；
if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') ！== false)
    $_SERVER['HTTPS'] = 'on'；
}

プラグインで解決 コードに詳しくない場合は、次のようなプラグインを使用できます。 本当にシンプルなSSL最初のステップは、ワンクリックですべてのURLを強制的にHTTPSにすることです。

ステップ3：主題干渉のチェック

テーマの干渉は、WordPressバックエンドでCSSが破損する一般的な原因の1つです。ここでは、テーマに関連する問題を特定し、修正する方法を紹介します：

1.デフォルトテーマに切り替え

WordPressテーマがCSSの破損を引き起こしているかどうかを確認するには、まずWordPressのデフォルトテーマに切り替える必要があります。

1. WordPressのバックエンドに移動し、次の場所に移動します。 外観 " テーマ ページ
2. デフォルトのWordPressテーマを有効化します。 トゥエンティトゥエンティフォー.

銘記デフォルトのテーマがインストールされていない場合は 新しいトピックの追加 ボタンをクリックしてデフォルトテーマを検索し、インストールしてください。デフォルトのテーマには通常、年号が付けられています。

3. テーマを切り替えた後、バックエンドページを更新して、CSSの問題が解決したかどうかを確認してください。

問題が解決した場合は、元のテーマがCSSの衝突を引き起こしていることを意味します。

2.テーマの競合を修正

問題がテーマから来ていることを確認した場合、以下を試してください：

テーマのアップデートをチェック

• 入り込む 外観 " テーマ ページでテーマを選択し 最新情報 ボタンをクリックして、最新バージョンが使用されていることを確認してください。

テーマのカスタムコードを確認

• アップデートがうまくいかない場合は、特にテーマのカスタム修正をチェックする必要があります：
  • 追加CSS(テーマのカスタマイズ設定でスタイルを追加）。
  • functions.phpファイル をカスタムコードに追加して、エラーがあるかどうかを確認してください。

テーマ開発者に連絡

• それでも問題が解決しない場合は、テーマ開発者にテクニカルサポートを求めることができます。
• 問題が解決しない場合は、別のスレッドに切り替えることを検討してください。

3.WPCodeによるカスタムコードの管理

今後同様の問題が発生しないようにするためには ダブルPCコード カスタムコードを管理するプラグインです。WordPressのコードスニペット管理プラグインです。 functions.php ドキュメンテーション

WPCodeの利点：

• カスタムCSSコードをより簡単に保存、管理できます。
• 問題の特定に役立つエラーチェックを内蔵。
• テーマを切り替えてもカスタムCSSが失われることはありません。
• 無料版もあり、基本的なニーズに適しています。

また、当サイトでは、カスタムCSSを含むカスタムコードスニペットを管理するためにWPCodeを使用しています。

ステップ4：キャッシュ問題の修正

通常、WordPressのキャッシュプラグインはバックエンドの管理領域をキャッシュしません。しかし、キャッシュの設定が正しくない場合、ブラウザのキャッシュと競合し、CSS の破損の問題につながる可能性があります。

1.ブラウザのキャッシュをクリア

まず、ブラウザのキャッシュをクリアする必要があります：

• ブラウザの設定を開き 閲覧データの消去 オプション
• Clear cached dataを選択し、Cache filesオプションがチェックされていることを確認します。
• 削除が完了したら、WordPressバックエンドをリロードして問題が解決したかどうかを確認します。

2.WordPressのキャッシュをクリア

問題が解決しない場合、次のステップはWordPressのキャッシュをクリアすることです。

• WordPress Cacheプラグインによって生成されたキャッシュファイルです。
• キャッシュプラグインの設定ページで キャッシュを消去 または同様のオプションがあります。

この方法の詳細については、私たちの記事を参照してください。WordPressのキャッシュをクリアするには？

ステップ5: CDNの問題の修正

サイトがコンテンツデリバリーネットワーク（CDN）サービスを使用している場合、設定ミスにより WordPress バックエンドの CSS が破損する可能性があります。これらの問題を特定し、修正する方法を説明します：

1.CDNエラーの確認

ブラウザの 検査ツール（インスペクト）への切り替え コンソール タブCSSファイルがブロックされているか、見つからない場合、ここに関連するエラーメッセージが表示されます。

2.CDNキャッシュのクリア

1. CloudflareなどのCDNサービスのウェブサイトにログインし、コントロールパネルに移動します。
2. 出向く キャッシュ」設定 パート
3. 打点 すべてをパージ ボタンをクリックして、すべてのCDNキャッシュをクリアします。

銘記しかし、キャッシュをクリアするオプションは、通常簡単に見つけることができます。

キャッシュをクリアした後、サイトに戻り、バックエンドページをリロードして、CSSの問題が解決したかどうかを確認してください。

ステップ 6: ファイルパーミッションエラーの修正

ファイルパーミッションが正しく設定されていないと、サーバーがCSSファイルを読み込めなくなり、WordPressバックエンドのCSSが破損する問題が発生する可能性があります。ここでは、ファイルパーミッションの確認と修正方法を説明します：

1.ウェブサイトへの接続

FTPユーティリティを使ってWordPressサイトに接続します。接続したら、WordPressのルートディレクトリに移動します。 wp-adminそしてwp-includes 歌で応える wpコンテンツ フォルダー

2.フォルダパーミッションの確認と変更

1.右クリック wp-admin フォルダを選択します。 ファイル権限 もしかしたら 因果性.

2.すべてのディレクトリのパーミッションが 755.

• パーミッションが正しくない場合は、755に変更し、すべてのサブディレクトリに再帰的に適用することを選択してください。

3.ファイルのパーミッションの確認と変更

1. 上記の手順を繰り返して、ファイルのパーミッションを 644.
2. パーミッションがすべてのファイル（ファイルのみ）に再帰的に適用されるようにします。

上記の手順が完了したら、WordPressのバックエンドページを再度表示し、CSSの問題が解決されているかどうかを確認してください。

ステップ 7: 破損したファイルの修復

ファイルが破損していると、WordPressのバックエンドのCSSが異常に表示されることもあります。

WordPressのファイルが破損する原因は次のとおりです：

• ワードプレスの更新が不完全
• 文書の誤削除
• ホスティングサービスプロバイダの設定ミス

破損したファイルの修復または置換方法

1.WordPress最新版のダウンロード

• どけ WordPress.org をクリックし、最新版のWordPressファイルをダウンロードしてください。
• ダウンロードしたZIPファイルをコンピュータに解凍します。

2. ウェブサイトへのリンク

• FTPユーティリティまたはコントロールパネルを使ってWordPressサイトに接続します。

3. 最新のWordPressファイルをアップロードしてください。

• WordPressのファイルをコンピュータからウェブサイトのルートディレクトリにアップロードします。
• アップロード時に選択 上書きをクリックして、新しいファイルが古いファイルを置き換えることを確認してください。アップロードが完了したら、WordPressのバックエンドページにアクセスして、CSSの問題が解決したかどうかを確認してください。

ステップ 8: ブラウザの拡張機能のチェック

ブラウザの拡張機能（特にコンテンツブロックや広告ブロックに関連するもの）は、WordPressバックエンドのCSSの表示を妨害する可能性があります。

エクステンションに起因する問題の認識と解決方法

1. 拡張機能管理メニューを開きます。

• ブラウザで 拡張機能/プラグインの管理 メニュー

2. すべての拡張機能を一時的に無効にします。

• 特に広告ブロックとセキュリティプラグイン。
• 選択できます 拡張機能の無効化 あるいは 下ろし.

3. 問題が解決したかどうかを確認

• 拡張機能を無効にした後、WordPressのバックエンドにアクセスして、CSSの問題が解決したかどうかを確認してください。

4. ケースバイケースでの拡張機能の有効化

• 問題が解決された場合は、拡張機能がコンフリクトを引き起こしていることを意味します。
• エクステンションを1つずつ有効化し、1つごとにバックエンドページをリフレッシュして、問題が再び発生するかどうかを確認します。

5. エクステンションの設定を調整するか、代替をお探しください。

• 問題のある拡張機能を見つけたら、その設定を確認し、WordPressバックエンドでCSSをブロックしていないことを確認します。
• 設定がうまくいかない場合は、他の拡張機能を探してみてください。

皆さんのお役に立てれば幸いです！