• RSS

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

  • このエントリーをはてなブックマークに追加
  • 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 に以下のように記述します。



(4)アクションフック

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

テーマファイルの functions.php を開いて、以下の記述を追記します。


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



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

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

functions.php の記述は以下の通りです。


admin.css でHTML エディタタブを非表示にさせる記述は以下の通りです。



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

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

functions.php の記述は以下の通りです。※admin.css は任意の名前でもOKです。


admin.css でHTML エディタタブを非表示にさせる記述は以下の通りです。


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

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


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

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

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



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

コメント

コメントを残す