TinyMCE Advancedとは

WordPressのビジュアルエディタの機能拡張が可能なプラグイン

TinyMCE Advancedは、Wordpressのビジュアルエディタの機能の拡張を可能とするプラグインです。

WordPressの拡張機能であるビジュアルエディタは、デフォルト状態では表の挿入や編集、YouTube動画コードの挿入、画像の周りの余白の挿入はできません。デフォルト状態でこれらの操作をするためにはHTMLでタグを直打ちしないといけなく、初心者には大変な作業となってしまいます。TinyMCE Advancedは、Wordpressに記事を投稿する際に投稿画面のボタンの種類を増やすことができるので、知識がない方でも簡単に画像の編集などの記事装飾を行うことができます。

TinyMCE Advanced導入後の編集メニューに表や画像挿入などのビジュアルエディタ拡張状態となり、必要なボタンを押すだけで簡単に編集ができるようになります。1番このプラグインを活用する利点はテーブルではないでしょうか。TinyMCE Advancedは目視で確認しながら横縦のテーブルの作れるので非常に便利です。Classic Editorなどと一緒にインストールしている人が多いです。

Classic Editorをインストールすると以前のWordPressのように記事が書けます。ブロックエディターが苦手な方はClassic Editor
Classic Editorとは Wordpressチームがメンテナンスしている公式プラグイン Classic Editorは以前のWordpr…

カスタマイズ性に優れている

インストールをすることでビジュアルエディタを拡張することができるプラグインは他にもたくさんありますが、TinyMCE Advancedの優れているところはカスタマイズ性に富んでいることです。使いたいボタンのみ並べておく事が可能であり、余計なボタンを表示させずに済みます。常に使うボタンのみの表示となるので、作業効率を高めることができます。

数多くの機能搭載により記事をより見やすくすることができる

WordPressの初期設定の中にも、記事を装飾する機能は搭載されています。しかし、それだけでは物足りない記事となってしまいます。TinyMCE Advancedを導入すると様々な機能を使えるようになり、華やかで引き付けるような記事とすることができます。フォントファミリーの指定や打消し線、下線、テキスト背景色、テーブル、動画埋め込みなどができるようになり、より見やすい記事とすることができます。

TinyMCE Advancedの使い方

WordPress画面よりインストール

WordPress画面の「ダッシュボード」の中の「プラグイン」をクリックし「新規追加」をクリックします。表示された画面の右上にある検索フォームに「TinyMCE Advanced」と入力すると検索結果が出るので、TinyMCE Advancedを見つけて「インストール」をクリックして流れに沿ってインストールを行います。インストール終了後ボタンが「有効化」となるので、有効化とします。

設定方法

「設定」をクリックし「TinyMCE Advanced」をクリックします。「エディター設定」が表示されるので「Classic Editor(TinyMCE)」にタブを切り替えます。するとTinyMCE Advancedのエディター機能の内容が表示され、以下の4列のフォームに配置されている機能が記事編集の際に利用可能な機能となっています。

下部にある「使用しないボタン」の中から使いたいボタンを4列のフォームの中にあるボタンの横にドラッグ&ドロップして追加します。エディター画面の中に不要なボタンがある場合は、「使用しないボタン」欄にドラッグ&ドロップして移動させることで表示がなくなります。設定が終わったら、下にスクロールして「変更を保存」クリックして完了です。

ビジュアルエディタに切り替える方法

WordPressの投稿や固定ページの新規追加画面を確認すると、画面右上に「ビジュアル」と「テキスト」2つのタブがあります。このタブをクリックすることで、ビジュアルエディタとテキストエディタの切り替えができます。TinyMCE Advancedはビジュアルエディタでコンテンツを作る時に使うので、「ビジュアルエディタ」のタブに切り替えて記事を作成する流れになります。テキストエディタではTinyMCE Advancedで設定した機能を使うことができませんので、注意しましょう。もし、ビジュアルエディタ画面でTinyMCE Advancedで追加した編集ボタンが表示されない場合は、編集ボタンが一列しか表示されていない場合があります。その場合は、右端にある「ツールバー切り替え」ボタンをクリックすると、編集ボタンが表示されます。

見出しやフォント・文字を変更する方法

文章をドラッグして、任意のボタンをクリックすると変更となります。見出し2を設定したい場合、変更したい箇所をドラッグ選択して、選択したまま任意のボタンを押すことで変更となります。ビジュアルエディタ上でも表示が変わり、変わったことがわかります。文字のフォントサイズ変更や太字文字、アンダーライン、色付き文字、背景色付き文字の設定も同様であり、ドラッグして選択した状態で任意のボタンをクリックすることで変更となります。

モアタグの挿入方法

WordPressの投稿機能を使って記事を書く場合、テーマによってはトップページに10個の記事の全文が表示されてしまう場合があります。この場合、トップページの縦サイズが大きくなってしまい利便性に欠ける記事となってしまいます。モアタグを使うことで、挿入した箇所に「続きを読む」を自動的にボタンが表示されるようになり、トップページの表示される記事の大きさを小さくすることができます。設定方法は、記事を書く際に任意の場所に一段分のスペースを作り、そこにカーソルを合わせた状態でモアタグのアイコンを押して挿入します。

挿入した場所に「– – – – – MORE – – – – – 」と表示され、記事には設定箇所に「続きを読む→」と表示されます。

TinyMCE Advancedのメリットとデメリット

TinyMCE Advancedの1番のメリットは、編集できる便利なボタンを簡単に増やすことができることです。また、ソースのエンコードの編集不要でSEO対策ができ、使い慣れていない方でも集客UPに繋げることができます。さらに、使いたい機能のみを選択して取り入れることができるので、使うボタンのみを並べて編集することができます。

TinyMCE Advancedのデメリット

TinyMCE Advancedのデメリットは、「ツールバーの切り替えボタン」右端に設置しないと上手く動作しないことです。気にして右端に設置することでスムーズに動作しますので、間違えなければ問題ないことといえるでしょう。

ワードプレスのプラグインはまずはこれ!ワードプレスで採用したいおすすめのプラグイン10選
これからワードプレスを使って、自社のメディアやブログを作成するのであれば、プラグインは必須です。もちろんプラグインなしでも、基本的なコンテンツ作…