ビジュアルエディタを拡張するプラグインTinyMCE Advanced

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設定

 

 

ツールバーの設定

エディター設定の画面に変わります、上部は現在使用中のビジュアルエディターです、使用したいボタンを下から選択して上のビジュアルエディターにドラッグ&ドロップします、不要なボタンがあれば下にドラッグ&ドロップすればいいだけです。

【エディターメニューを有効化する。】にチェックを入れるとツールバーの上部に【ファイル】【編集】【挿入】【表示】【フォーマット】【テーブル】【ツール】のメニューが表示されます、このメニューからTinyMCE Advancedの全ての機能を呼び出せるのでチェックを入れて表示させておきましょう。

TinyMCE Advancedエディター設定

 

 

各ツールボタンの機能

ここではTinyMCE Advancedの各ツールボタンの機能の説明をします。

スマホの方は横にスクロール。

ボタン名称機能
段落見出しh1~h6の見出しタグを挿入
フォントファミリーフォントファミリーテキストのフォントを変更する
フォントサイズフォントサイズテキストのサイズを変更する
フォントスタイルフォントスタイルテキストのスタイルを変更する
太字太字テキストを太字にする
イタリックイタリック テキストを斜体にする
引用引用 引用文を挿入するときに使います
番号なしリスト番号なしリスト箇条書きのテキストを 番号なしのリスト形式にする
番号付きリスト番号付きリスト 箇条書きのテキストを番号付きのリスト形式にする
左寄せ左寄せテキストを左寄せにする
中央揃え 中央揃えテキストを中央に揃える
右寄せ右寄せテキストを右寄せにする
両端揃え両端揃え テキストの両端を揃える
リンクの挿入リンクの挿入/編集テキストにリンクを設定する
リンクの削除リンクの削除 設定したリンクを削除して 元のテキストに戻す
取り消し取り消し 作業を取り消して一つ前の状態に戻す
やり直しやり直し 取り消した作業を元に戻す
ツールバーの切り替えツールバー切り替えツールバー一段から 複数段への切り替え(一段目右側へ設置する)
インデントを減らすインデントを減らすテキストのインデント(字下げ)を削除する
インデントを増やすインデントを増やすテキストをインデント(字下げ)する
テキストとしてペーストテキストとしてペースト外部から文章をコピペする時にこのボタンをクリックするとフォーマットが削除されます
書式設定をクリア書式設定をクリア 適用されている書式設定を消去して元の状態に戻す

特殊文字 

特殊文字 クリックして特殊文字一覧から挿入
続きを読む「続きを読む 」タグを挿入文中に「続きを読む」タグを入れて記事を分割する
テーブルテーブル記事内に表を挿入する
テキスト色テキスト色  テキストの色を変える
背景色背景色 テキストの背景色を変える 
画像の挿入/編集 画像の挿入や編集をする
動画の挿入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は記事作成の効率アップに役立つプラグインですので初心者の方は導入しておいてくださいね!

 

コメントを残す

*

CAPTCHA