使用する環境
- WordPressのバージョン:4.3.0
- TinyMCE Advancedプラグイン:4.2.5
プラグインをインストールするには、wordpress管理画面からプラグイン＞新規で検索窓にプラグイン名を入力するとダイレクトにインストールすることができます。
TinyMCE Advanced プラグイン
TimyMCE Advancedプラグインは、ビジュアルエディタ画面のメニューボタンに拡張機能ボタンやメニューを付加したり、不必要なボタンの削除することができるプラグインです。拡張機能ボタンには通常の編集系のボタンの他、なくてはならない表組みの入力を支援するメニュー追加したり、動画参照のボタン等、とても便利な機能を追加することもできます。 以下は画像は、まだ何もしていないwordpress4.3.0のオリジナルメニューの状態とTinyMCE Advancedでカスタマイズ後の比較画像です。
基本的な使い方：機能拡張ボタンを追加する
管理画面から設定＞TinyMCE Advancedと進むと右側のペインに以下のようなTinyMCE Advaced設定画面が表示され、下図のようなEditor Settings画面が表示されます。図中の赤枠内が拡張可能な機能ボタンで、下線ボタンから始まり、改ページボタンまでいろいろなボタンが用意されています。この赤枠内ボタンを上のメニューバーにマウスでドラック＆リリースするとボタンが追加され、逆にメニューバーから赤枠内に移すとボタンを非表示状態にしてくれます。自分のやりやすい形にメニューバーを変更することができます。
特にオススメなボタンは、画像の挿入/編集ボタンと動画の挿入/編集ボタンの２つで、見やすいブログにする場合には、画像や動画は必要になるでしょう。ぜひ使ってみてください
機能拡張１：リストスタイル機能等が付加できます
前述した基本的な使い方の他にリストスタイルの指定やコンテキストメニューの変更およびリンクスタイルの変更ができます。
List Style オプション
List Styleオプションにチェックをすると、リストや連番の箇条書きリストを作成する際に、デザインを変更できるようになります。選択しない場合は、黒丸化数字のみです。 リストマークの場合は、黒丸／白丸／四角を選択でき、数字の場合は、ラテン／ギリシャ／ローマ字の大文字、小文字が選択できるようになります。Context Menu オプション
コンテキストメニューとは、マウスを右クリックした場合にポップアップ表示されるメニューのことで、ContextMenuにチェックをすると、標準からTinyMCE Advanced用に置き換えます。
Link (replaces the Insert/Edit Link dialog) オプション
これにチェックをすると、記事中のリンクを作成する場合に、noref属性やtarget属性を選択できるようになります。
機能拡張２：editor-style.css等の指定が可能
Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.
テーマフォルダーにeditor-style.cssというファイルを用意するとこの指定にもとづいてwordpress内蔵のビジュアルエディターの表示するようになります。つまり記事のstyle.cssの内容にすると実際の表示のまま編集が可能になります。Stop removing the <p> and <br /> tags when saving and show them in the Text editor
記事の保存時やビジュアルエディタに切り替えた場合に、自動挿入される<p>や<br />排除されるのを禁止します。Enterキーでは<p>が、Shift+Enterキーでは<br />が自動挿入されます。Replace font size settings
フォントサイズの単位をpx（ピクセル）に変更できるようになります。Enable pasting of image source
これにチェックすると、画像のコピー＆ペーストでimgタグが直接エディタに挿入できます。ただし、FireFoxとサファリブラウザ限定となります。直リンクする以外に役に立たないと思います。設定のエクスポートとインポート
別に機能拡張というわけではないですが、いままでに設定したことをエクスポートしたりインポートするための設定が一番下側に用意されています。
Initializing…
この記事へのコメントはありません。