wordpressで記事入力する際にぜひ導入したい「TinyMCE Advanced」プラグイン

wordpress標準エディタだけで記事入力するのは意外と大変です。この標準エディタを拡張し入力を楽にするTinyMCE Advancedというプラグインの使い方を紹介

Initializing...

wordpressで記事入力する場合htmlを自家書きできるといいのですが、初心者にとってはつらいものがあります。htmlをおぼえなくても記事入力の場合に役立つのがTinyMCE Advancedというプラグインです。

 

使用する環境

  • 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画面が表示されます。図中の赤枠内が拡張可能な機能ボタンで、下線ボタンから始まり、改ページボタンまでいろいろなボタンが用意されています。この赤枠内ボタンを上のメニューバーにマウスでドラック&リリースするとボタンが追加され、逆にメニューバーから赤枠内に移すとボタンを非表示状態にしてくれます。自分のやりやすい形にメニューバーを変更することができます。

ボタンをドラック&リリースで追加または削除する方法

特にオススメなボタンは、画像の挿入/編集ボタンと動画の挿入/編集ボタンの2つで、見やすいブログにする場合には、画像や動画は必要になるでしょう。ぜひ使ってみてください

機能拡張1:リストスタイル機能等が付加できます

前述した基本的な使い方の他にリストスタイルの指定やコンテキストメニューの変更およびリンクスタイルの変更ができます。

オプション設定1:LinkStyle他

List Style オプション

List Styleオプションにチェックをすると、リストや連番の箇条書きリストを作成する際に、デザインを変更できるようになります。選択しない場合は、黒丸化数字のみです。

リストマークの場合は、黒丸/白丸/四角を選択でき、数字の場合は、ラテン/ギリシャ/ローマ字の大文字、小文字が選択できるようになります。

Context Menu オプション

コンテキストメニューとは、マウスを右クリックした場合にポップアップ表示されるメニューのことで、ContextMenuにチェックをすると、標準からTinyMCE Advanced用に置き換えます。

TinyMCE Advanced用のコンテキストメニュー

Link (replaces the Insert/Edit Link dialog) オプション

これにチェックをすると、記事中のリンクを作成する場合に、noref属性やtarget属性を選択できるようになります。

リンク作成が便利になる

機能拡張2:editor-style.css等の指定が可能

オプション2:Advanced Options

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とサファリブラウザ限定となります。直リンクする以外に役に立たないと思います。

設定のエクスポートとインポート

別に機能拡張というわけではないですが、いままでに設定したことをエクスポートしたりインポートするための設定が一番下側に用意されています。

 

設定のExport&Import

Initializing…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサーリンク
ページ上部へ戻る