WordPressのエディタで指定範囲の文字色・背景色を変更する方法を紹介しています。

プラグイン「TinyMCE Advanced」で対応する

「TinyMCE Advanced」は目的の部分的な文字色・背景色・サイズを変更を追加できる機能を持ったWordPressプラグインです。

Advanced Editor Tools (previously TinyMCE Advanced) – WordPress プラグイン | WordPress.org 日本語

インストール・有効化すると、エディタのブロックメニューにブロック編集でのインライン文字の色・背景色の変更できる機能が追加され、「Text Color」という項目が追加されます。

この機能でテキスト色を指定した場合、以下のHTMLコードが書き出されます。

<span style="color:#ff6900" class="tadv-color">テキスト</span>

span styleで色コードが指定され、class名にTinyMCE Advancedの独自クラス「tadv-color」が入ります。
「tadv-color」はTinyMCE Advancedが有効化状態でも特にCSSでは定義されていません。

また、旧エディタでも人気だったエディタ拡張プラグイン「TinyMCE Advanced」もGutenbergに対応してきております。

プラグイン「Advanced Rich Text Tools for Gutenberg」で対応する

「Advanced Rich Text Tools for Gutenberg」というプラグインでも同機能に対応可能となっております。

Advanced Rich Text Tools for Gutenberg – WordPress plugin | WordPress.org

「Advanced Rich Text」をインストール・有効化するとエディタのブロックメニューに「inline Text Colour」と「inline BackgroundColour」項目が追加されます

インライン文字の色を変更すると、以下のHTMLが入ります

<span style="color:#ff6900" class="color">テキスト</span>

span styleで色コードが指定され、クラス名に「color」が入ります。
このクラス名「color」もデフォルトではCSSで定義されていないクラス名です。

使うならどちらのプラグインが良いのか

現状ブロック単位<p>タグでの色指定しかできませんが、パレットに指定されている色指定の場合は各色毎に定義されたCSSクラス名が入ります。

<p class="has-luminous-vivid-orange-color">テキスト</p>

カラーピッカーから色を選択した場合はspan styleで色コードが指定されます。

<p style="color:#368cb1" class="has-text-color">テキスト</p>

結局はstyle属性でカラーコード指定となるなら「TinyMCE Advanced」も「Advanced Rich Text Tools for Gutenberg」も生成されるHTMLは似た感じです。

どちらのプラグインも、後にプラグインを停止・削除しても、記事を編集する必要はありません。

「TinyMCE Advanced」は「tadv-color」というプラグイン固有のクラス名が残るのは、ちょっと気になるかもしれません。

個人的には、「TinyMCE Advanced」はクラシックエディタからの機能が多く搭載されていますが、クラシックエディタモードを使わないのであれば、完全に機能過多感があります。
「Gutenberg」エディタのアップデートを待ちつつ「Advanced Rich Text Tools for Gutenberg」を使っていこうかなという感じです。