こんにちは、久川和人です。

今回は、TinyMCE Advancedのインストール・設定・使い方について説明していきます。

【TinyMCE Advanced】は、ワードプレスの投稿記事や固定ページを書く時の画面(Gutenberg、ビジュアルエディター)の編集ボタンを自由に増やすことができます。
編集ボタンとは、下図の赤枠部分です。
TinyMCE-Advancedの編集ボタン

TinyMCE Advancedを設定することで、無料ブログやMicrosoft Wordのような感じで、文字装飾をすることができます。

TinyMCE Advancedのインストール方法

TinyMCE Advancedのインストールを行います。

ワードプレスの管理画面にアクセスします。

管理画面の左メニューの【プラグイン】⇒【新規追加】をクリックします。
プラグイン導入

 

①右上のキーワードに【TinyMCE Advanced】(または、tinymce)と入力、
②TinyMCE Advancedを確認し、【今すぐインストール】をクリックします。
TinyMCE-Advanced検索

 

有効化】をクリックします。
TinyMCE-Advanced有効化

 

プラグイン一覧の画面に切り替わり、【プラグインを有効化しました。】と表示されます。
Akismet有効化

TinyMCE Advancedがインストールされ、有効化されました。

TinyMCE Advancedの設定方法

TinyMCE Advancedを有効化したら、初期設定を行います。

管理画面の左メニューの【設定】⇒【TinyMCE Advanced】をクリックします。
TinyMCEAdvanced

 

エディター設定画面が表示されます。エディター設定画面では、Classic Editor(ビジュアルエディター)とWordPress5.0以降で変更されたGutenbergのそれぞれの設定を行います。

Classic Editor(ビジュアルエディター)の設定

まずは、Classic Editor(ビジュアルエディター)の設定を行います。WordPressのバージョンによって、以下の違いがあります。

  • WordPress5.0以上の場合は、Classic Editorプラグインをインストールしている場合
  • WordPress4.9以下の場合は、ビジュアルエディターを利用する場合

①Toolbars for the Classic Editor (TinyMCE)の下にある【エディターメニューを有効化する。】にチェックを入れます。
②追加したいボタンをドラック&ドロップします。
ClassicEditor設定

Gutenbergの設定

つぎに、Gutenbergの設定を行います。GutenbergはWordPress5.0以上か、WordPress4.9以下でGutenbergプラグインをインストールしている場合に利用します。

①画面を下にスクロールして、Toolbars for the Classic Blocks in the Block Editor (Gutenberg)の下にある【Enable the editor menu (recommended). 】にチェックを入れます。
②追加したいボタンをドラック&ドロップします。
Gutenberg設定

 

共通設定

画面を下にスクロールすると、「設定」および「高度なオプション」があります。
以下にチェックを入れることをおすすめします。
TinyMCE設定
③Append all buttons to the top toolbar in the Classic and Classic Paragraph blocks.
Gutenbergのすべてのクラッシックブロックに、TimeMCEで設定したツールバーを一番上に表示させます。

④リストスタイルオプション
順序付きリストの先頭記号に英大文字や小文字、順序なしリストの先頭番号に黒丸や四角を使用できます。

⑤フォントサイズ
フォントサイズをピクセル(px)表示させます。

高度な設定
⑥Hybrid Block Editor Mode
TinyMCEと連携するプラグインがGutenbergでも利用することが可能になります。

⑦段落タグの保持
チェックを入れると、ビジュアルモードとテキストモードとを切り替えた際に、不要なタグを付けないようにします。

さらに画面を下にスクロールすると「管理」があります。
TinyMCE管理
⑧設定した内容を保存(エクスポート)や以前設定した内容を反映(インポート)させることができます。
⑨どのエディターで有効化させるか設定します。すべてチェックをします。
⑩【デフォルトの設定を復元】をクリックすると、初期の状態に戻すことができます。

 

変更が終わったら、【変更を保存】をクリックします。
設定を保存

TinyMCE Advancedのエクスポート、インポート

TinyMCE Advancedの設定した内容を保存(エクスポート)したり、以前設定した内容を反映(インポート)させることができます。

TinyMCE Advancedのエクスポート

TinyMCE Advancedのエクスポートをする場合は、【設定のエクスポート】をクリックします。
設定のエクスポート

 

TinyMCE Advancedの設定のエクスポート画面が表示されます。
①の内容をコピーして保存します。
②の【すべて選択】をクリックすると、①の内容がすべて選択されます。
TinyMCE-Advancedの設定のエクスポート

 

TinyMCE Advancedのインポート

TinyMCE Advancedのインポートをする場合は、【設定のインポート】をクリックします。
設定のインポート

 

TinyMCE Advancedの設定のインポート画面が表示されます。
①にエクスポートした内容を張り付けます。
②【検証】をクリックして、①の内容が問題ないかどうか確認します。
③【インポート】をクリックして、設定を反映させます。
TinyMCE-Advancedの設定のインポート

まとめ

TinyMCE Advancedのインストール方法と設定方法について説明しました。

TinyMCE Advancedを導入しないと、ビジュアルエディターで文字装飾などができず、テキストエディターに切り替えて文字装飾する必要があります。

そのため、ブログの記事をビジュアルエディターで作成する場合には非常に便利な機能になりますので、ぜひ導入してみてくださいね。

もし、このブログを読んで、興味を持った。質問がある。感想がある。などがありましたら、お気軽にお問い合わせにてご連絡くださいね。
久川に問い合わせてみる。

最後まで読んでいただきありがとうございました。

プレゼント付き!メルマガ登録はこちら♪

メルマガ登録

久川和人のうつ病克服への日記を別のブログで書いています。読んでもいいよって方は、以下をクリックしてみてくださいね♪
日記
好きなことを仕事にできるブログライティングが身に付く教科書”ドリームライティング”
ドリームライティング

趣味ブログから始めて、
あなたの好きな場所で、好きな時間に、好きなことを仕事にできるブログライティングを身に付けてみませんか?
そんな夢が叶う教科書が”ドリームライティング”です。
今なら僕の特典も付いています。

Twitterでフォローしよう

おすすめの記事