どうも、笹塚神之介(@shin_sasasa)です。

ここではワードプレスの固定ページ・投稿ページなどの編集が格段にやりやすくなるプラグインである「TinyMCE Advanced」を紹介します。

個人的には完全に必須プラグインになっているものですので、一度試してみてはいかがでしょうか。



TinyMCE Advancedの初期設定

まずはインストールから初期設定方法を紹介します。

TinyMCE Advancedのインストール

プラグインの新規追加のページの検索枠に「TinyMCE Advanced」と入力します。

TinyMCE Advancedが表示されますので、「今すぐインストール」をクリックします。

インストールされると「有効化」のボタンに変わりますので、クリックします。

TinyMCE Advancedの初期設定

インストール済みのプラグインのページのTinyMCE Advancedの「設定項目」クリックします。

以下の設定ページが開きます。

「使用しないボタン」の一覧から上部の領域にドラッグ&ドロップすることでビジュアルエディタに機能を追加することができます。
もちろんいらない機能は削ることが可能です。

「設定」では各種設定を行えます。
特にこだわりがなければデフォルトのままで良いでしょう。

  • リストスタイルオプション
    箇条書きリストや番号付きリストを作るときに、先頭に点や数字が挿入されます。
  • コンテキストメニュー
    編集画面で右クリックを押すとリンクやテーブルを挿入できるようになりますが、機能が少ないので特に必要ないかと感じます。
  • 代替リンクダイアログ
    リンク設定のボタンでTinyMCE Advancedのリンク設定画面が開きます。ページ内リンクが設定できますので、目次の作成時に便利です。
    リンクを設定したあとならWordPressのリンク設定画面を開けます。
  • フォントサイズ
    pxでのフォントサイズを設定できるようになります。ただし基本的には%で指定した方が汎用性が高いのでおすすめです。

↓高度なオプションでは「段落タグの保持」にチェックを入れておくことで、ビジュアルエディターとテキストエディターの切り替え時に起こる自動補完を防げます。切り替えることがあるという人は必須ですね。

設定が完了したら「変更を保存」をクリックして終了します。

TinyMCE Advancedの使い方

WordPressのデフォルトの状態だと以下のようなビジュアルエディターです。

「TinyMCE Advanced」を有効化することで機能が豊富になっていることがわかりますね。

「TinyMCE Advanced」を使ってテキストサイズを大きくしてみます。
機能を使う場合、先にテキストを入力しておいた方が使いやすいです。

適用するテキストをドラッグします。

ptの選択をクリックし、指定するサイズを選択します。

大きいサイズになります。

次はテキストのカラーを変えてみます。
テキストを選択し、カラータブの矢印をクリックします。

青を選択したら青色に変化しましたね。

青くしたテキストは上掛けのように文字を太くすることもできます。
さらにドラックして太字ボタンをクリックします。

青い太字に変化しました。
以上が「TinyMCE Advanced」の使い方です。


旧エディター(Classic Editor)を使う方法

WordPress5.0から新エディターである「Gutenberg」がリリースされました。

Gutenbergは機能性にとても優れたエディターなのですが、旧エディター利用者にとっては使いにくさを感じる場面が結構あると思います。私もその一人でした。

「旧エディターを使いたい!」という場合には、クラシックエディターをプラグインでインストールする必要があります。その方法についても解説しておきます。

WordPressの「Classic Editor」をインストール

「プラグイン」>「新規追加」

WordPressの管理画面から「プラグイン」>「新規追加」と進んでください。

「Classic Editor」をインストール

「Classic Editor」と検索しましょう。見つかったらインストールして有効化します。

旧エディターを復元完了!

これで旧エディター(Classic Editor)を使うことができるようになりました。

Gutenbergは12月7日に正式リリースされたばかりということもあり、まだまだ使いにくい部分もあるエディターだと感じます。機能面はなかなか素晴らしいんですけどね。

しばらくは旧エディターでの執筆の方がおすすめです。Gutenbergに移行するのはアップデートが進んで、もっと使いやすくなってからでも良いでしょう。


最後

今回は記事を作成する際の編集画面のプラグインについてと、新しい記事作成エディターのGutenbergを旧エディターに戻す方法を解説しました。

個人的に旧エディターが使いやすいのでこちらの状態にしておいたほうが記事作成がやりやすいのでおすすめです。

また、これ以外にお勧めのプラグインをまとめているので気になる方は↓をご覧ください。