WordPressの記事投稿画面のビジュアルエディタはhtmlの知識がなくても記事投稿が簡単にできるようになっていますが、更ににボタンを増やして記事投稿を楽にしたいと思いませんか、TinyMCE Advancedというプラグインを使うとビジュアルエディタにボタンを増やして投稿画面を拡張することが出来ます、あなたもこのTinyMCE Advancedをインストールしてビジュアルエディタを更に使いやすくしてみませんか？。
TinyMCE Advancedとはどんなプラグイン？
TinyMCE AdvancedとはWordpress記事投稿のビジュアルエディタを拡張してくれるプラグインで、デフォルトの投稿画面に編集ボタンを増やして無料ブログの感覚で作業ができる、初心者には無くてはならないプラグインです。
ここでは、TinyMCE Advancedをインストールして設定する方法と、TinyMCE Advancedの各ボタンの説明をしていきます。
TinyMCE Advancedをインストールする
管理画面左側メニューから【プラグイン】を選択して【新規追加】の検索窓にTinyMCE Advancedと入力します。
TinyMCE Advancedが表示されましたら【今すぐインストール】をクリックします。
【今すぐインストール】をクリックすると【有効化】に変わりますのでクリックしてTinyMCE Advancedを有効化します。
これでTinyMCE Advancedのインストールは完了です。
TinyMCE Advancedの設定
TinyMCE Advancedを有効化したら管理画面左側のメニューの【設定】から【TinyMCE Advanced】を選択します。
ツールバーの設定
エディター設定の画面に変わります、上部は現在使用中のビジュアルエディターです、使用したいボタンを下から選択して上のビジュアルエディターにドラッグ＆ドロップします、不要なボタンがあれば下にドラッグ＆ドロップすればいいだけです。
【エディターメニューを有効化する。】にチェックを入れるとツールバーの上部に【ファイル】【編集】【挿入】【表示】【フォーマット】【テーブル】【ツール】のメニューが表示されます、このメニューからTinyMCE Advancedの全ての機能を呼び出せるのでチェックを入れて表示させておきましょう。
各ツールボタンの機能
ここではTinyMCE Advancedの各ツールボタンの機能の説明をします。
スマホの方は横にスクロール。
| ボタン | 名称 | 機能 |
|---|---|---|
 |
見出し | ｈ１～ｈ６の見出しタグを挿入 |
 |
フォントファミリー | テキストのフォントを変更する |
 |
フォントサイズ | テキストのサイズを変更する |
 |
フォントスタイル | テキストのスタイルを変更する |
 |
太字 | テキストを太字にする |
 |
イタリック | テキストを斜体にする |
 |
引用 | 引用文を挿入するときに使います |
 |
番号なしリスト | 箇条書きのテキストを 番号なしのリスト形式にする |
 |
番号付きリスト | 箇条書きのテキストを番号付きのリスト形式にする |
 |
左寄せ | テキストを左寄せにする |
 |
中央揃え | テキストを中央に揃える |
 |
右寄せ | テキストを右寄せにする |
 |
両端揃え | テキストの両端を揃える |
 |
リンクの挿入／編集 | テキストにリンクを設定する |
 |
リンクの削除 | 設定したリンクを削除して 元のテキストに戻す |
 |
取り消し | 作業を取り消して一つ前の状態に戻す |
 |
やり直し | 取り消した作業を元に戻す |
 |
ツールバー切り替え | ツールバー一段から 複数段への切り替え（一段目右側へ設置する） |
 |
インデントを減らす | テキストのインデント（字下げ）を削除する |
 |
インデントを増やす | テキストをインデント（字下げ）する |
 |
テキストとしてペースト | 外部から文章をコピペする時にこのボタンをクリックするとフォーマットが削除されます |
 |
書式設定をクリア | 適用されている書式設定を消去して元の状態に戻す |
|
|
特殊文字 | クリックして特殊文字一覧から挿入 |
 |
「続きを読む 」タグを挿入 | 文中に「続きを読む」タグを入れて記事を分割する |
 |
テーブル | 記事内に表を挿入する |
 |
テキスト色 | テキストの色を変える |
 |
背景色 | テキストの背景色を変える |
 |
画像の挿入/編集 | 画像の挿入や編集をする |
 |
Insert/edit media | 動画の挿入や編集をする |
 |
キーボードショートカット | キーボードショートカット の一覧を表示する |
 |
下線 | テキストに下線を引く |
 |
打ち消し | テキストに打ち消し線を引く |
 |
切り取り | 切り取りをする |
 |
コピー | コピーする |
 |
貼り付け | ペーストする |
 |
下付き | テキストを下付きにする |
 |
上付き | テキストを上付きにする |
 |
横ライン | 文中に横ラインを入れる |
 |
印刷 | 印刷する |
 |
アンカー | このボタンを使ってリンク先の指定ができます |
 |
検索置き換え | 文中の単語を検索して別の単語に置き換える |
 |
ブロックを表示 | タグを枠で囲ってくれる |
 |
非表示文字を表示 | 非表示文字を表示する |
 |
ソースコード（細) | ビジュアルエディタ上に ポップアップが開き記事のソースコードを表示する |
 |
ソースコード （太) | 文中にcodeタグを挿入する |
 |
フルスクリーン | ビジュアルエディタを 画面いっぱいに広げます |
 |
日時を挿入 | 現在の日時を記事内に挿入する |
 |
改行なしスペース | 改行しないスペースを挿入する |
 |
左から右 | 文章を左寄せにする |
 |
右から左 | 文章を右寄せにする |
 |
顔文字 | 顔文字を一覧から挿入する |
 |
改ページ | 文中に 改ページタグを挿入してページを分割する |
設定
ツールバーの設定下に【設定】がありますのでこちらの設定を行っていきます、と言ってもチェックを入れるか入れないかだけなので簡単です。
リストスタイルオプション
リストスタイルオプションにチェックを入れると、番号付きリストと番号なしリストの横にプルダウンメニューが付いて色々な種類のリストを使用出来ます。
コンテキストメニュー
コンテキストメニューにチェックを入れビジュアルエディタ上で右クリックすると、下画像のように通常の右クリックとは異なるTinyMCE Advancedのメニューが表示されます。
代替リンクダイアログ
代替リンクダイアログにチェックを入れない場合のリンクメニューはリンク先のURLを入力するか設定ボタンをクリックして編集画面で設定します。
代替リンクダイアログにチェックを入れ た場合は下記の様な画像が表示されます。
URL：リンク先のURLを入力します。
リンク文字列：リンクにする文字を入力します。
Rel：nofollowの設定をするかどうか▼プルダウンメニューをクリックして設定します。
リンクターゲット：リンク先を新しいウィンドウで開くかどうか▼プルダウンメニューをクリックして設定します。
フォントサイズ
フォントサイズにチェックを入れるとデフォルトのポイント単位からピクセル単位に置き変わります。
高度なオプション
この部分は初心者には分かりにくいこともあるため【段落タグの保持】にだけチェックを入れておきましょう。
CSS クラスメニューの作成
この設定はfunctions.phpファイルにコードを入力したり、子テーマを作ってeditor-style.cssを追加したりと初心者には大変な面もあるのでここでは割愛します。
段落タグの保持
この機能にチェックを入れると記事を保存したときに自動的におきる改行タグや段落タグの削除を行わないようにして、ビジュアルエディタとテキストエディタの切替時に改行タグや段落タグの崩れをなくしてくれます。
画像元の貼り付けを有効にする
メディアライブラリを経由せずに画像を直接貼り付けることができ、Firefox と Safari のみに対応しているみたいです、他のブラウザでは使えない機能です。
管理
チェックを入れるところはデフォルトでチェックが入ってますのでそのままの状態でOKです。
設定のインポートとエクスポート
この項目では設定したTinyMCE Advancedのインポート、エクスポートが出来ます、複数のサイトを運営している方には便利な機能で一度設定したTinyMCE Advancedの設定をほかのサイトにも適用することが出来ます。
他のサイトに設定したTinyMCE Advancedのデータをを移行（エクスポート）するには【設定のエクスポート】をクリックします。
【TinyMCE Advanced の設定のエクスポート】画面に変わります、【すべて選択】をクリックして表示されているコードをコピーします。
次に設定をインポートしたい他のWordpressサイトの管理画面からTinyMCE Advancedの【エディター設定】⇒【管理】⇒【設定のインポート】をクリックします。
【TinyMCE Advanced の設定のインポート】画面に変わりますので上記でコピーしたコードを貼り付けて、【検証】をクリックします。
【No errors.】がでたら【インポート】をクリックして完了です。
次のエディター拡張の有効化:
TinyMCE Advancedの拡張機能を有効化したい場所にチエックを入れます、デフォルトですべての項目にチェックが入れて有りますのでそのままでOKです。
各設定が完了したら右下の【変更を保存】ボタンをクリックして下さい。
設定を初期に戻したい場合
TinyMCE Advancedの設定をデフォルトに戻したい場合はTinyMCE Advanced【エディター設定】の一番下にある【デフォルトの設定を復元】をクリックすればビジュアルエディタの初期状態に戻ります。
最期に
以上がTinyMCE Advancedのインストールから設定までの手順です、TinyMCE Advancedはデフォルトのビジュアルエディタに様々な機能を増やしてくれるプラグインです、これによってhtmlの知識のない初心者の方でもボタン一つで記事を便利に作成することが出来ます。
TinyMCE Advancedは記事作成の効率アップに役立つプラグインですので初心者の方は導入しておいてくださいね！