WPのエディタまわりのカスタマイズ

Wordpressのエディタまわりのカスタマイズについて書いておく。

まずは、スタイルシート周りの諸問題。

１．管理画面で編集している時にスタイルシートを適用させる。
これは、あちこち検索すれば出てくるので手順は割愛。
問題は、同じタグに複数のスタイルが適用されている時。
たとえば、&ltH2 class="A">と&ltH2 class="B">がある場合。
ユーザが見出し２を選ぶと、WPのエディタは&lth2>タグを使ってくれる。
けど、クラスの指定までできないので、HTMLエディタを用いてクラスを適用させる必要がある。
俺らはともかく、お客様がこれをやるのはかなり面倒臭いはず。

２．CKEDITORを使う。
なので、CKEDITORのプラグインをあててみた。
これだと、文字のフォーマットを設定できるので完璧じゃん！てな感じ。
ckeditor.styles.jsをいじれば大した難しくない。



ね？左上のところに、「テキスト」「見出し２」・・・て用意できたでしょ？

スタイルシートまわりは上記手順で片付いた。
次に、やらなきゃいけないのは、定型文の挿入
たとえば、毎回入力するテンプレートの文章や、複数のタグを一度に貼り付ける場合。

当初は、AddQuicktagというプラグインを考えてた。
けど、コイツ、HTMLモードでしかボタンが出てこない。
なるべくなら、お客様にHTMLモードで操作させたくない。

そこで、先ほど適用したCKEDITORのメニューにオリジナルのコンボボックスを追加することにした。
調べてみると、どうやら、プラグインを追加すればいい感じ。

CKEDITOR.plugins.add( 'tokens',{
  requires : ['richcombo'],
  init : function( obj ){
    editor.ui.addRichCombo( 'tokens',{
      label : "",
      title :"hogehoge",
      voiceLabel : "hogehoge",
      className : 'cke_format',
      multiSelect : false,
      panel :{
        css : [ config.contentsCss, CSSのパス ) ],
        voiceLabel : lang.panelVoiceLabel
      },
      init : function(){/*thisにaddしたりとかの処理*/},
      onClick : function( val ){/*選択された時の処理*/
      }
    });
  }
});
で、こんなのが、できた。



このコンボボックスから「ボタン」を選択すると、以下のようになる。



この「ボタン」の部分は次のようなHTMLで表現されている。
&lta href="#" class="a_btn">&ltimg src="hogehoge" class="btn_1"></a>
ただ、先に書いたように、お客様が直接HTMLを書くのは避けたかった。
というわけで、こういうやり方で実装することにした。

これだけのことをやるだけで、軽く4時間が過ぎていた。
まぁ、形になったから良しとしよう。