配信とインテリアの実話映画
WordPressを簡単に
Morning&Lunch
PCとスマホとゲーム
配信とインテリアの実話映画
配信とインテリアの実話映画

Style Note

WordPressを簡単に
WordPressを簡単に

WordPress

Morning&Lunch
Morning&Lunch

モーニング&ランチ

PCとスマホとゲーム
PCとスマホとゲーム

webNote

previous arrow
next arrow
 
Shadow

【書庫】TinyMCE Advanced の設定方法と使い方

wordpress WordPressの書庫
wordpress

TinyMCE AdvancedはWordPressが「Block Editor」に変更になって、TinyMCE Advanced も大きく変更になっています。

https://wordpress.vogue.tokyo/gutenberg-tinymce
https://wordpress.vogue.tokyo/classic-paragraph

プラグインはどうインストールして、どんな設定をするのか

WordPressにはプラグインをインストールした方が簡単だとわかったところで、インストールから設定までを説明します。たくさんのプラグインがある中で、一番必要であろうTinyMCE Advancedを例に説明します。

プラグインはとても簡単で便利ですけど、時折不具合を起こすこともあります。プラグイン間で問題を起こしたり、サーバーとの相性が悪かったりします。プラグインの利用しすぎにも注意してください。インストール前にバックアップしておいて下さい。プラグイン間の問題でアクセス不能になり、バックアップより復元したことがあります。

TinyMCE Advancedの機能

WordPressをインストールしただけでは、ビジュアルエディッタの機能が少なく、ボタン(アイコン)が無い作業はHTMLで書かなくてはなりません。それは知識も必要だし、時間もかかってしまいます。しかし、TinyMCE Advancedをインストールすることで、フォントのサイズを変えたり、表を作ったりがボタン1つでできるようになります。記事作成に有り難いプラグインTinyMCE Advancedは必須です。

下は、WordPressをインストールしただけのビジュアルエディッタです。

TinyMCE Advanced
TinyMCE Advanced

見出しのボタンもありません。表を作るためにはHTMLの知識が必要です。

TinyMCE Advancedをインストールするとビジュアルエディッタの機能が増えます。(下がTinyMCE Advancedをインストールした後のエディッタです。

TinyMCE Advanced
TinyMCE Advanced

TinyMCE Advancedは、ビジュアルエディッタの機能を増やし、HTMLの知識がなくても、エディッタのボタン(アイコン)を押せば作表できたり、文字の大きさを変えたりできるのです。

TinyMCE Advancedをインストール

TinyMCE Advancedを検索してインストールします。

  1. ダッシュボードのプラグインという項目から新規追加をクリックします。
  2. プラグインの検索窓に「TinyMCE Advanced」を入れ検索します。
  3. 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の英文での設定について

TinyMCE Advanced
TinyMCE Advanced

(上の図は拡大できます)

上から2つ目は、記事作成時の不具合を抑えるということなので、チェックを入れてます。上から3つ目は、フォントのサイズの表示をpxに変えるのでチェックを入れます。