【MW WP Form】ビジュアルエディターをオフ/非表示/無効にする方法

Web制作でWordPressサイトにお問い合わせフォームを実装する際、MW WP Formを使うことがあるかと思います。

MW WP Formは保守中の既存サイト向けとして利用し、導入前にWordPress公式ディレクトリで最新の対応状況を確認してください。functions.phpを編集する前にバックアップを取り、子テーマまたは独自プラグインへ記述してください。

お問い合わせページ、確認ページ、サンクスページの3段階をデフォルトで作成できるプラグインなので、結構需要がありますよね。

ただ、便利なプラグインではあるのですが、注意して使用しないといけない点があります。

それは、MW WP Formのビジュアルエディターをオフにしないと、お問い合わせページのデザインが突然崩れてしまうことがあるということです。

知らないうちにデザインが崩れてしまう、と聞くと恐ろしくなりますが、事前にコードをコピペさえすれば防止することができます。

MW WP Formで、他にも注意する点を以下の記事にまとめていますので、ぜひご覧ください。

【コピペOK】MW WP Formで勝手に挿入されるpタグ・brタグを削除する方法

WordPressサイトでお問い合わせフォームを実装する時、MW WP Formを利用することがあるかと思います。MW WP Formは保守中の既存サイト向けとして利用し、導入前にWordPress公式ディレクトリで最新の対応状況を確認して…

本記事の執筆者：マサトラ

フリーランス歴4年のWebエンジニア。現在は20社以上のWeb制作会社社様と提携し、WordPress構築やLP制作を中心に月3～5件のペースでサイト制作を手がけています。
このブログでは、実務で得た知識やノウハウ、制作現場での気づきを、フリーランスとして活動中の方はもちろん、これからWeb制作を仕事にしたいと考えている方にも役立つよう発信しています。

MW WP Formのビジュアルエディターとは？
なぜビジュアルエディターをオフにしないといけないのか
【コピペOK】MW WP Formでビジュアルエディターをオフ/非表示/無効にする記述
まとめ

MW WP Formのビジュアルエディターとは？

MW WP Formのビジュアルエディターって何だっけ？という方のために、一度確認しておきますね。

以下の画像をご覧ください。

こちらはWordPress管理画面内のMW WP Formエディター画面です。

赤枠で囲われた「ビジュアル」、青枠の「テキスト」というタブがあり、エディターモードをビジュアル or テキスト切り替えできます。

Web制作の場合、HTMLコーディングしたデータを貼り付けるのでテキストエディタのタブを選択して作業することになるかと思います。

その際に、ビジュアルエディターのタブが存在していると、やっかいなことになるので、これを無効にするというのが今回の記事の主旨です。

なぜビジュアルエディターをオフにしないといけないのか

冒頭にも少し述べましたが、ビジュアルエディターをオフにしていないと、お問い合わせページのデザインが崩れてしまうことがあります。

これは、「ビジュアル」タブと「テキスト」タブを切り替えたときに起こる事象のようで、せっかくお問い合わせフォームを完成させた後に、タブを何気なく切り替えてしまうと、デザインが崩れてしまうことがあります。

実際に私もこの事象に遭遇したことがあり、うっかりクライアントが管理画面でタブに触らないようにするためにも、ビジュアルエディターをオフにする必要があると感じました。

【コピペOK】MW WP Formでビジュアルエディターをオフ/非表示/無効にする記述

では、早速ですが、MW WP Formのビジュアルエディターをオフにする方法ですが、以下のコードをfunctions.phpに貼り付けましょう。

次のコードはMW WP Formの投稿タイプだけを対象にします。固定ページなど、ほかの編集画面のビジュアルエディターには影響しません。

function wtm_disable_mw_form_visual_editor( $can_richedit ) {
  $screen = function_exists( 'get_current_screen' )
    ? get_current_screen()
    : null;

  if ( $screen && 'mw-wp-form' === $screen->post_type ) {
    return false;
  }

  return $can_richedit;
}
add_filter(
  'user_can_richedit',
  'wtm_disable_mw_form_visual_editor'
);

そして、再度WordPress管理画面内のMW WP Formエディター画面を確認してみましょう。

そうすると、以下の画像のような表示になっているかと思います。