WordPressの管理画面で記事を投稿する際、HTMLエディタとビジュアルエディタとを切り替えながら利用すると、< >などのタグが＆lt;や＆gt;などに変換され、レイアウトが崩れる場合があります。
個人的にはHTMLエディタ1本で統一するのが理想なのですが…、企業様にWordPressサイトを納品する場合や、複数人でサイトを運営（記事を投稿）する場合など、ビジュアルエディタが必要なシーンも多いのではないかと思いますので、今回紹介させていただく記事では「HTMLエディタを無効にして、ビジュアルエディタだけ表示させる」方法について説明させていただこうと思います。
（１）今回の方針
あまり管理画面のコアファイルを触りたくないので、今回は「HTMLエディタを使わせない」ためにdisplay:noneでHTMLエディタを表示させない、という方法を取ることにしました。CSS側だけで制御するシンプルな方法になりますが、さてこのCSSをWordPressファイルのどこに書くのか？また、実際に投稿画面でCSSを適応させるにはどうすればいいのか？？
さらに「固定ページにはHTMLエディタは必要で、記事投稿ページには不必要」などの条件の場合に、どういう条件分岐を行うのか？？？などを掘り下げていこうと思います。
（２）カスタマイズ方法
上記方針に基づき、今回のカスタマイズは、（２）functions.phpをカスタマイズし、アクションフックを利用して、管理画面用の独自CSSを読み込ませる。
また固定ページの時のみ、もしくは記事投稿ページの時のみのように条件分岐も行う。
もっとスマートな方法があるかもしれませんが、管理画面をガリガリ触りたくないのと、最近、アクションフックの有益性を身にしみて感じて来たので、ちょっと使ってみたかっただけです。。。ハイ。。
（３）テーマフォルダ内に、管理画面用の独自CSSを設置
WordPress管理画面のCSS を直接触っても良いのですが、コアファイルのアップグレードなどでせっかく書いたソースが消えると困るので、テーマファイル内に独自のファイル（今回は admin.css）を設置します。
admin.css の記述例
HTMLエディタタブ、ビジュアルエディタタブを非表示にする場合ですが、admin.cssに以下のように記述します。|
1 2 3 4 5 6 7 8 9 |
/*HTMLエディタタブ*/ a#content-html { display: none; } /*ビジュアルエディタタブ*/ a#content-tmce { display: none; } |
（４）アクションフック
（３）で作ったCSSを管理画面で読み込ませるように調整します。テーマファイルのfunctions.phpを開いて以下の記述を追記します。
|
1 2 3 4 |
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エディタタブ、ビジュアルエディタタブを強制的に消す（非表示にする）ことが可能になります。
参考サイト
WORDPRESS:ADMIN_HEAD-ページフック名って？
（５）投稿ぺージのみ、HTMLタブを非表示にする方法
この場合は「記事投稿ページだけ」の条件ですので、edit_form_advancedフックを利用して「記事投稿ページにだけadmin.cssを読み込ます」という処理になります。functions.phpの記述は以下の通りです。
|
1 2 3 4 |
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 エディタタブを非表示にさせる記述は以下の通りです。
|
1 2 3 4 |
/*HTMLエディタタブ*/ a#content-html { display: none; } |
（６）固定ページのみ、HTMLタブを非表示にする方法
今度は「固定ページだけ」の条件ですので、edit_pages_advancedフックを利用して「固定ページにだけadmin.css を読み込ます」という処理になります。functions.phpの記述は以下の通りです。
※admin.cssは任意の名前でもOKです。
|
1 2 3 4 |
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 エディタタブを非表示にさせる記述は以下の通りです。
|
1 2 3 4 |
/*HTMLエディタタブ*/ a#content-html { display: none; } |
このedit_form_advancedやedit_pages_advancedは色々と応用が出来そうです。
下手にプラグインを利用してカスタマイズするよりは、可能な限りアクションフックを利用した方が楽ですね（というコトを最新痛感しました）。
ちなみに、今回は「HTMLエディタを非表示にする」というカスタマイズですが、「ビジュアルエディタを非表示」にすることも当然可能です。
「ビジュアルエディタ自体を利用しない」のであれば、管理画面のユーザー編から非表示にした方が早いのですが…、
条件により表示・非表示を変える場合は、HTML エディタを非表示にする場合と同様の条件分岐が必要になるかと思います。
コメント