はじめに
WordPressを操作する際に、通常のビジュアルエディタが表示されず、テキストのみのエディタしか見えない場合があります。これはユーザーインターフェース上の問題であり、記事編集やコンテンツ作成において大きな障害となる可能性があります。
症状・背景
このテーマが必要になる主な場面:
- テーマのアップデート後にビジュアルエディタが表示されなくなる。
- プラグインの追加または更新によってエディタが変化する。
- JavaScript関連のエラーにより、ページ全体や特定の機能が正しく動作しない。
- カスタマイズしたCSS/JSファイルが原因でエディタが非表示になる。
手順・設定方法
ステップ1: JavaScriptを無効にして確認する
# WordPress管理画面にログインします。
wp-admin login
# コンソールを開き、JavaScriptを無効化します。
console > document.head.innerHTML += "<script>javascript:false</script>"ステップ2: JavaScriptのエラーを調査する
# ブラウザの開発者ツール（F12）を開きます。
Ctrl + Shift + I (Firefox) / F12 (Chrome)
# コンソールタブでJavaScriptのエラーを確認します。
console > javascript:alert(document.getElementsByTagName('html')[0].innerHTML)ステップ3: カスタムCSS/JSを一時的に無効にする
# ファイルマネージャーからwp-content/themes/your_theme名目下のstyle.cssとfunctions.phpを開きます。
wp-admin themes.php?page=theme-editor.php&file=style.css&theme=your_theme
wp-admin themes.php?page=theme-editor.php&file=functions.php&theme=your_theme
# 一時的にカスタムCSSやJSをコメントアウトします。
// <削除するCSS/JSコード>ステップ4: プラグインの無効化と再有効化
# WordPress管理画面にログインし、プラグインページを開きます。
wp-admin plugins.php
# ドロップダウンメニューから「無効」を選択します。
plugins > disable selected plugins
# 無効化されたすべてのプラグインを再び有効化します。
plugins > activate all注意事項
- JavaScriptが無効になった場合、サイト全体の機能に影響を与える可能性があるため注意が必要です。
- カスタムCSS/JSを変更する際は、元の状態に戻すためのバックアップを作成することを強く推奨します。
- プラグインの無効化と再有効化を行う際には、プラグインごとに個別に実行することをおすすめします。これにより特定のプラグインが問題の原因であるかを見つけることができます。
まとめ
1. JavaScript無効: JavaScriptのエラーによりビジュアルエディタが表示されない場合がある。
2. エラーログ確認: ブラウザのコンソールでJSエラーメッセージを確認する。
3. CSS/JSバックアップ: カスタムCSSやJSファイルを変更する前に必ずバックアップを作成する。
4. プラグインチェック: 問題が発生したら、一時的に全てのプラグインを無効化して再有効化を行う。
関連記事: