少しだけ良い生活

ex-life

Web制作

TinyMCE Advancedのスタイルメニューに階層(親子)を付ける【WordPress】

WordPressのエディター「TinyMCE Advanced」に独自にカスタマイズした「スタイル」メニューを設定することができます。これ自体は色々なところで説明されていますが、メニューを用途ごとにカテゴライズした階層(親子)を付ける方法の説明が見つからなかったので、メモしておきます。

記事を書いているときのバージョン、インストール状況を基準に書くので、この記事を読んでいる時点では異なっている場合があります。

手順は、最初の普通に「スタイル」メニューを設定するところから書いておきます。

手順1.インストールなど準備作業

「TinyMCE Advanced」プラグインをインストール

普通にプラグインを追加し、有効にします。

プラグインの設定変更

「TinyMCE Advanced」プラグインの「設定項目」へ移動し、「Classic Editor (TinyMCE)」タブへ切り替える。

「使用しないボタン」の中にある「スタイル」を、ドラッグアンドドロップで適当な位置に配置する。

画面下の方の「高度なオプション」の中にある「CSSクラスメニューの作成」にチェックを入れ、「変更を保存」ボタンを押す。

手順2.テーマファイルの追加・編集

「editor-style.css」の追加

テーマディレクトリの中に「editor-style.css」ファイルを作る。これは管理画面のビジュアルエディタに適用されるスタイルで、フロント用CSSと同様のスタイル設定をしておく物の様です。「style.css」などのフロント用CSSファイルに記述した内容と同様に「editor-style.css」に記述します。記述する内容は、管理画面のビジュアルエディタで反映させたいものだけで十分だと思います。

オリジナルスタイルメニューのスタイルを作る

オリジナルのスタイルをワンタッチで反映させるためのメニュー作りですが、メニューに設置したいスタイルを先に作っておきます。

例として、ありがちな蛍光ペン風アンダーライン風マーカーのスタイルを作ってみます。管理画面用の「editor-style.css」とフロント用の「style.css」に下記のスタイルを追加してみます。

太字で4色のアンダーラインを引くスタイルです。サイズとかの数字は適当です。

「functions.php」の編集

テーマディレクトリの中にある「functions.php」ファイルを編集します。

「functions.php」ファイルの末尾(※「?>」よりは前)に、下記コードを追記します。

手順3.「スタイル」メニューの中身を作る

ここからが、TinyMCE Advancedで表示させるオリジナルの「スタイル」メニューの中身を作る作業です。「スタイル」メニューの中に「マーカー」という親メニューを作って、その中に4色のマーカーを入れます。

「functions.php」の中に、下記のように追記します。

これで設定は終わりのはずです!

簡単に言うと、親の階層の配列を作って、その中のitemsに実際のメニューを入れていく感じです。

手順4.確認

上手くいっていれば、下図のようにTinyMCE Advancedの「スタイル」メニューが変わっているはずです。

「スタイル」メニューを使うと、簡単に文字装飾ができるので、たくさん登録すると記事が書きやすくなりますが、あまり多いとメニューが選びづらくなるので、カテゴライズできると使いやすいです。

ついでに作ったボックススタイルはこんな感じで適当に作りました。こっちもサイズなどの数字は適当です。

補足

作っているとたまに、「スタイル」メニューの中身が「functions.php」の記述と一致しなくなることがありますが、何故発生するのかわかりません。

その場合、CSSの中身の編集以外すべてを「TinyMCE Advanced」プラグインをインストールした状態に戻してやり直したら改善できています。

-Web制作

Copyright© ex-life , 2020 All Rights Reserved.