風吹です。

どうしてもDreamWeaverのように、WordPressのエディターで、
CSSスタイルを選択して適用できるようにしたかったので、
今回は、WordpressプラグインTinyMCE Advancedに独自スタイルを
適用させるカスタマイズ方法の紹介です。

 

editor-style.cssを追加

WordPressのテーマディレクトリにeditor-style.cssを追加する。

editor-style.cssの中身に反映させたいCSSを記入。
今回は面倒だったので、賢威のメインCSSであるbase.cssをコピペ。
いちいち追加するたびにコピペが面倒だと思い、@importでbese.cssを
読み込もうとしたが、それは無理だった。

 

editor-style.cssを読み込むようにする

functions.phpに以下を追加する。

 

 

これで読み込ませるCSSの用意と、それを読み込ませることが
出来たので下準備が完了です。

 

TinyMCE Advancedをインストールする

tinymce_editor_head2

 

プラグイン → 新規追加 から、TinyMCE Advancedをインストールする。

 

プラグインのインストール方法がわからない方はこちらで手順を確認してください。

WordPressプラグインのインストール方法

 

TinyMCE Advancedの設定

ドラッグ&ドロップで、必要なボタンを追加し、いらないボタンは削除する。

 

mce01

 

次に、少し下にスクロールして、高度なオプション項目の、
「CSS クラスメニューの作成」にチェックを入れる。

 

mce02

 

これでカスタマイズ完了です。

 

実際に投稿画面で確認してみるとこうなっています。

 

mce03

 

tinymceadvance3

 

これで賢威のスタイルシートをビジュアルエディタで
いつでも呼び出して適用することができるようになりました。

最新ネットビジネス速報をいち早くお届け!

有益な情報を最新で配信しています。

メルマガ登録