eyemovic inc.

Works blog仕事の取り組み・ビジョン

2014.01.24

WordPress プラグイン「TinyMCE Advanced」

■概要

普段WordPressで記事を入力する際、
自由度が低い、使いにくいと思ったことはないでしょうか?

太字やリストなど、最低限の機能はありますが、
記事内に表を作成したい場合などはどうすればいいのでしょう?
テキストモードでhtmlソースを書くこともできますが、
一般のお客様には難しいと思います。

そんな時に役に立つのがこのプラグイン、
TinyMCE Advancedです。

■使用方法

それでは早速使用してみます。
TinyMCE Advancedのプラグインを有効にする前は、

img01

このように必要最低限の機能が並んでいますが、
プラグインを有効にすると、

img02

このようにエディタのメニューが格段に増えています。
それではまず、表を作成してみましょう。
メニュー2段目、中央のテーブルアイコンi49をクリックします。

img03

画像のように設定ポップが表示され、
そのまま挿入ボタンをクリックすると、

img04

この様に表組みが作成されます。
あとは見出しとデータを入力し、
セルのプロパティから背景色などの体裁を整えれば完成です。

img05

img06

img07

これならhtmlを編集できないお客様でも簡単に表を作成することができます。
もちろん表を作るだけのプラグインではありません。

img08

下のリストにあるアイコンを、上のメニューエリアにドラッグ&ドロップすることで、
各機能を追加できます。
順番も入れ替えられるので自分なりの使いやすいメニューにカスタマイズすることができます。
追加できる機能は下記のようになります。

i38 水平線 i39 全ツール表示切り替え i40 Blockquote i41 均等割付
i42 切り取り i43 コピー i44 貼り付け i45 検索/置換
i46 フォント i47 スタイル i48 コード整形 i49 表を挿入
i50 行のプロパティ i51 セルのプロパティ i52 行を上に挿入 i53 行を下に挿入
i54 行を削除 i55 列を左に挿入 i56 列を右に挿入 i57 列を削除
i58 セルの結合を解除 i59 セルの結合 i60 引用 i61 挿入
i62 削除 i63 略語 i64 頭文字 i65 新規レイヤーの挿入
i66 全面へ移動 i67 背面へ移動 i68 絶対位置指定の切り替え i69 水平線(設定あり)
i70 HTMLソース編集 i71 制御文字の表示 i72 改行なしスペースの挿入 i73 ガイドラインと非表示項目の表示切替
i74 日付の挿入 i75 時刻の挿入 i76 アンカーの挿入/編集 i77 スペルチェック


細かな設定

上記のメニュー設定以外にも更に細かな設定が可能です。

img09

Also enable

Advanced Image 画像の設定を、より詳細にできるようになります
Advanced List Option リストの設定を、より詳細にできるようになります
Context Menu 右クリックした際、TinyMCE Advancedの専用メニューが開けるようになります

Advanced Options

Advanced Link リンクの設定を、より詳細にできるようになります
Hide all CSS classes in the editor menus. メニュー内のCSSメニューを、出さないようにします
Stop removing the <p> and <br /> tags when saving and show them in the HTML editor <p>タグと<br />タグの自動削除を無くします

■まとめ

初歩的でシンプルなプラグインではありますが、
お客様がWordPressを使う上で、エディタの使いやすさというのは、
かなり重要なファクターの一つになります。
お客様に気持よく更新していただくためにも、
WordPress構築の際には是非インストールしておくことをおすすめします。

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。