WordPressでビジュアルとテキストの切り替えができない時の原因と解決方法

WordPress ロゴ

WordPressで記事を書いていて、「ビジュアル」と「テキスト(HTML)」の切り替えが急にできなくなったことはありませんか。私も以前、構築をお手伝いしたサイトのクライアントから「投稿画面でビジュアルとHTMLの行き来ができなくなった」と連絡をもらい、けっこう焦りました。しかも全画面ではなく一部のページだけという妙な症状で、当時は原因を突き止めるのに何時間もかかったのを覚えています。

あれから時代は進み、いまのWordPressは「ブロックエディター(Gutenberg)」が標準です。とはいえ「ビジュアルとコードを切り替えたいのにやり方がわからない」「Classic Editorプラグインを入れているのにタブが消えた」といった悩みは、形を変えていまも現役。質問を受けることが多いテーマです。

この記事では、いまのブロックエディターでビジュアルとコードを切り替える方法と、クラシックエディターで「ビジュアル/テキスト」タブが出ない・切り替わらないときの原因と対処を、現行のWordPressに合わせて整理します。

原因はユーザー設定だったり、権限プラグインだったり、ブラウザ側の問題だったりと意外と幅があります。ただ、見るべきポイントさえ押さえておけば、順番に切り分けていくことで、たいていは数分で復旧できます。やみくもに設定をいじって状況を悪化させるより、原因の当たりをつけながら上から試していくほうが確実です。この記事でも、その切り分けの順番に沿って解説していきます。読み終わるころには、「次に同じことが起きてもここを見ればいい」という勘所がつかめるはずです。それでは、まずは自分の使っているエディターの種類を確認するところから始めましょう。

まず確認:あなたのエディターはどっち?

対処を間違えないために、最初に「いま使っているのがどちらのエディターか」をはっきりさせておきましょう。WordPress 5.0以降、標準はブロックエディター(Gutenberg)です。記事の中身が「段落」「見出し」「画像」といったブロックの集まりになっていれば、それがブロックエディターです。

一方、画面右上などに「ビジュアル」「テキスト」という2つのタブが並び、1つの大きな入力欄に書き込む昔ながらの形式なら、クラシックエディターです。これは「Classic Editor」プラグインを入れている場合に表示されます。

切り替えのやり方も、トラブルの原因も、この2つでまったく別物です。自分がどちらを使っているかを確認してから、対応するセクションに進んでください。

ブロックエディターで「ビジュアル⇔コード」を切り替える方法

ブロックエディターには「ビジュアルエディター」と「コードエディター」という2つの表示モードがあります。普段見ているブロックの画面がビジュアル、記事全体をHTMLソースとして表示・編集できるのがコードエディターです。クラシック時代の「テキストタブ」に近い役割だと考えてください。

1. 右上の「オプション」メニューから切り替える

編集画面の右上にある縦三点メニュー(︙=オプション)をクリックすると、メニューの「エディター」欄に「コードエディター」という項目があります。これを選ぶと記事全体がHTML表示に切り替わります。元に戻すときは、同じメニューから「ビジュアルエディター」を選べばOKです。

2. ショートカットキーで一発切り替え

マウス操作が面倒なら、キーボードショートカットが速いです。WordPress公式ドキュメントでも案内されている方法で、WindowsとMacでそれぞれ次のキーを押します。

Windows:Ctrl + Shift + Alt + M
Mac:⌘ + Shift + Option + M

このショートカットはトグル式なので、もう一度押せばビジュアルに戻ります。私は細かいHTMLをいじりたいときによく使っています。なお、特定のブロックだけHTMLを直したい場合は、ブロック単位のオプション(ブロックのツールバーにある三点メニュー)から「HTMLとして編集」を選ぶ方法もあります。記事全体ではなくそのブロックだけソース編集に切り替わるので、ピンポイントで直したいときに便利です。

出典・参考:Use keyboard shortcuts (Block Editor) – WordPress.org DocumentationYes, the WordPress Block Editor Has a Code View – WordPress.com

クラシックエディターで「ビジュアル/テキスト」タブが出ない・切り替わらない時

Classic Editorプラグインを使っている場合、本来なら入力欄の右上に「ビジュアル」「テキスト」の2つのタブが並びます。これが表示されない、あるいはクリックしても切り替わらないときは、原因がいくつか考えられます。確認しやすい順に並べたので、上から潰していきましょう。

原因1:ユーザープロフィールの設定

いちばん多いのがこれです。WordPressには利用者ごとに「ビジュアルエディターを使用しない」という設定があり、ここにチェックが入っているとビジュアルタブが消えてテキスト編集のみになります。

  1. 管理画面の「ユーザー」→「プロフィール」を開く
  2. 「ビジュアルエディター」の項目を確認
  3. 「ビジュアルエディターを使用しない」のチェックを外す
  4. ページ下部の「プロフィールを更新」をクリック

クライアント側で起きている場合は、その人のプロフィールを確認する必要があります。設定はユーザーごとに独立しているので、「管理者の自分では普通に出るのに、相手の画面だけ出ない」というのは、まさにこれが原因のことが多いです。

原因2:JavaScriptの読み込みエラー(プラグイン・テーマの競合)

タブ自体は表示されているのに切り替わらない、ボタンが効かない、エディターの表示が崩れる——こうした症状の多くは、ページ上のJavaScriptエラーが原因です。WordPress本体・プラグイン・テーマを更新した直後に起きやすいのが特徴です。

切り分けの基本は、プラグインを一度すべて停止して症状が直るか試すことです。直ったら1つずつ有効化して、原因のプラグインを特定します。テーマが疑わしいときは、一時的に「Twenty Twenty-Four」などの公式デフォルトテーマに切り替えて再現するか確認します。ブラウザの開発者ツール(F12)の「Console」に赤いエラーが出ていれば、それが手がかりになります。

原因3:ユーザー権限・ロール管理プラグイン

冒頭で触れた私のトラブルが、まさにこのパターンでした。当時は権限管理プラグイン「User Role Editor」が絡んでいて、管理者では問題ないのに「投稿者」「編集者」だけタブが出ない、という妙な状態に。とりあえず管理者権限のユーザーを作って急場をしのいだものの、根本解決にはなりませんでした。

ロール管理プラグインで権限(capability)を細かくいじると、エディター関連の機能に必要な権限まで知らないうちに削ってしまい、特定ロールだけタブや機能が欠ける、ということが起こり得ます。心当たりがあれば、権限プラグインを一度無効化して症状が変わるか試すのが手っ取り早いです。改善するなら、そのプラグインの権限設定を見直しましょう。

原因4:ブラウザのキャッシュ

設定もプラグインも問題ないのにおかしい、という場合はブラウザ側を疑います。古いキャッシュが残っていてエディターのJavaScriptがうまく読み込まれず、切り替えが効かなくなることがあります。ブラウザのキャッシュと履歴を削除してから再読み込みするか、シークレットウィンドウで開いて症状が消えるか確認してください。これだけで直るケースも珍しくありません。

出典・参考:WordPress Block Editor – WordPress.org Documentation

関連記事:WordPressでビジュアルからテキストに切り替えると表示が崩れる問題

昔ながらの「本体のバグ」だったケースもある

もうひとつ、私が経験したのが「WordPress本体側の不具合」と思われるケースです。クライアントから「同じ症状がまた出た」と連絡があり、調べ直したところ、当時は管理画面の「画面のレイアウト」を2列から1列に変更すると症状が改善する、という報告が見つかりました。実際それで直ったので、特定のバージョンやテーマの組み合わせで起きる相性問題だったのだと思います。

いまのWordPressではこの「画面のレイアウト(列数)」の設定自体がブロックエディターには存在しませんが、「設定をいじっていないのに突然おかしくなった」「特定の画面だけ症状が出る」というときは、本体やプラグインのバージョンの組み合わせを疑う発想は今でも有効です。WordPress本体・プラグイン・テーマを最新版に更新するだけで直ることもあるので、ひと通り試して直らなければ更新も検討してみてください。

まとめ

ビジュアルとテキスト(コード)の切り替えができないトラブルは、慣れていないと身構えてしまいますが、原因のパターンはそれほど多くありません。まず自分のエディターがブロックかクラシックかを見極め、ブロックなら三点メニューかショートカットで切り替え、クラシックならユーザー設定・JavaScriptエラー・権限プラグイン・ブラウザキャッシュの順に切り分ける——これが基本の流れです。

私の経験では、クラシックエディターで「相手の画面だけタブが出ない」ときは、ほぼプロフィールの「ビジュアルエディターを使用しない」のチェックが原因でした。逆に「タブは出るのに切り替わらない」ときは、プラグインやテーマ更新にともなうJavaScriptエラーやキャッシュが怪しいです。上から順に試せば、たいていは原因にたどり着けます。

クライアントが自分で記事を更新するサイトでは、こうした「急に切り替えができない」というトラブルは特に起きやすいものです。原因の大半はユーザー設定やブラウザの状態といった身近なところにあるので、最初から不正アクセスやデータ破損を疑って大ごとにする必要はありません。落ち着いて一つずつ確認すれば大丈夫です。

WordPressは更新のたびに仕様が少しずつ変わるので、こうした小さな不具合は今後も形を変えて出てきます。慌てずに「どこで何が起きているか」を切り分ける癖をつけておくと、いざというときに落ち着いて対応できます。困ったときは、本体・プラグイン・テーマを最新に保つこと、そしてブラウザのキャッシュをこまめにクリアすることを基本の備えにしておくと安心です。同じ症状で困っている方の助けになればうれしいです。