WordPress管理画面のHTMLエディタを無効にして、ビジュアルエディタだけ表示させる方法

  • 23361
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

WordPressの管理画面で記事を投稿する際、HTML エディタとビジュアルエディタとを切り替えながら利用すると、< > などのタグが &lt;や&gt; などに変換され、レイアウトが崩れる場合があります。

個人的にはHTMLエディタ1 本で統一するのが理想なのですが…、企業様にWordPress サイトを納品する場合や、複数人でサイトを運営(記事を投稿)する場合など、ビジュアルエディタが必要なシーンも多いのではないかと思いますので、今回紹介させていただく記事では「HTMLエディタを無効にして、ビジュアルエディタだけ表示させる」方法について説明させていただこうと思います。

(1)今回の方針

あまり管理画面のコアファイルを触りたくないので、今回は「HTMLエディタを使わせない」ために display:noneHTMLエディタを表示させない、という方法を取ることにしました。

CSS 側だけで制御するシンプルな方法になりますが、さてこのCSS をWordPressファイルのどこに書くのか?また、実際に投稿画面でCSSを適応させるにはどうすればいいのか??
さらに「固定ページにはHTMLエディタは必要で、記事投稿ページには不必要」などの条件の場合に、どういう条件分岐を行うのか???などを掘り下げていこうと思います。


(2)カスタマイズ方法

上記方針に基づき、今回のカスタマイズは、
(1)管理画面のデザイン制御は、テーマフォルダ内に独自のCSS を設置し、そのファイルで行う。

(2)functions.php をカスタマイズし、アクションフックを利用して、管理画面用の独自CSSを読み込ませる。
また固定ページの時のみ、もしくは記事投稿ページの時のみのように条件分岐も行う。
でいくことにします。

もっとスマートな方法があるかもしれませんが、管理画面をガリガリ触りたくないのと、最近、アクションフックの有益性を身にしみて感じて来たので、ちょっと使ってみたかっただけです。。。ハイ。。

(3)テーマフォルダ内に、管理画面用の独自CSSを設置

WordPress管理画面のCSS を直接触っても良いのですが、コアファイルのアップグレードなどでせっかく書いたソースが消えると困るので、テーマファイル内に独自のファイル(今回は admin.css)を設置します。
WordPress管理画面のHTMLエディタを無効にして、ビジュアルエディタだけ表示させる方法

admin.css の記述例

HTMLエディタタブ、ビジュアルエディタタブを非表示にする場合ですが、
admin.css に以下のように記述します。
/*HTMLエディタタブ*/
a#content-html {
    display: none;
}

/*ビジュアルエディタタブ*/
a#content-tmce {
    display: none;
}


(4)アクションフック

(3)で作ったCSSを、管理画面で読み込ませるように調整します。

テーマファイルの functions.php を開いて、以下の記述を追記します。
function admin_css() {
	echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/admin.css">';
}
add_action('admin_head', 'admin_css');

これで固定ページ、投稿ページに限らず、管理画面にadmin.css が読み込まれるようになりますので、HTMLエディタタブ、ビジュアルエディタタブを強制的に消す(非表示にする)ことが可能になります。


(5)投稿ぺージのみ、HTMLタブを非表示にする方法

この場合は「記事投稿ページだけ」の条件ですので、edit_form_advanced フックを利用して「記事投稿ページにだけadmin.cssを読み込ます」という処理になります。

functions.php の記述は以下の通りです。
function admin_css(){
	echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/admin.css">';
}
add_action('edit_form_advanced', 'admin_css');

admin.css でHTML エディタタブを非表示にさせる記述は以下の通りです。
/*HTMLエディタタブ*/
a#content-html {
    display: none;
}


(6)固定ページのみ、HTMLタブを非表示にする方法

今度は「固定ページだけ」の条件ですので、edit_pages_advanced フックを利用して「固定ページにだけadmin.css を読み込ます」という処理になります。

functions.php の記述は以下の通りです。※admin.css は任意の名前でもOKです。
function admin_css(){
	echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/admin.css">';
}
add_action('edit_pages_advanced', 'admin_css');

admin.css でHTML エディタタブを非表示にさせる記述は以下の通りです。
/*HTMLエディタタブ*/
a#content-html {
    display: none;
}


この edit_form_advancededit_pages_advanced は色々と応用が出来そうです。

下手にプラグインを利用してカスタマイズするよりは、可能な限りアクションフックを利用した方が楽ですね(というコトを最新痛感しました)。


ちなみに、今回は「HTMLエディタを非表示にする」というカスタマイズですが、「ビジュアルエディタを非表示」にすることも当然可能です。

「ビジュアルエディタ自体を利用しない」のであれば、管理画面のユーザー編から非表示にした方が早いのですが…、
WordPress管理画面のHTMLエディタを無効にして、ビジュアルエディタだけ表示させる方法

条件により表示・非表示を変える場合は、HTML エディタを非表示にする場合と同様の条件分岐が必要になるかと思います。

  • 23361
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

この投稿と関連する記事一覧

この記事に関するコメント

  1. 大変参考になりました!
    ありがとうございます。

    一点、
    × edit_pages_advanced
    ○ edit_page_form

    の間違いではないでしょうか?

    勘違いでしたらすみません。

    1. ご指摘いただき有り難うございます。
      管理人のimadesi です。
      一度調べてみます。

コメントを残す