ウェブログ

WordPressのプラグインTinyMCE Advancedの属性に独自のClassを追加する方法


WordPressでよく使われるプラグイン、TinyMCE Advanced。
基本の設定でclass名やid名を追加できる属性アイコンがあるんですが、そこに独自のclass名やid名を追加する方法です。
この設定をすると記事を書く方は決まったclass名等を選択すればいいだけなのでHTMLのタグやclass属性を書かなくていいのでクライアントワークとして使うのが一般的でしょう。

TinyMCE Advancedの設定方法

editor-style.cssを作成

style.css等をおいているテーマフォルダに「editor-style.css」という名前のCSSファイルを作成します。
※元々のテーマに既にある場合も有り。その場合は新しく作る必要はありません

tiny-mce_editor_style_css_101513_011118_PM

editor-style.cssを読み込むため管理画面から設定

管理画面の設定→TinyMCE Advancedから下の図の部分「Import editor-style.css」にチェックをいれる。保存忘れずに。

tiny-mce_import_css_101513_011307_PM

プルダウンに表示される

投稿画面に戻り、アイコン「属性の挿入/削除」をクリック

tiny-mce_button_101513_011921_PM

すると、ウィンドウが開き、「クラス」セクションのプルダウンメニューの中に先ほど作ったeditor-style.cssに書いたクラス名が出現しました。

tiny-mce_attribs_101513_011809_PM

クラス名を選択し「挿入」をクリック。プレビューでcssが適用されています。(今回はfont-size: 40px;としてみた)

tiny-mce_hoge_101513_014406_PM

保存して確認してみる

保存してちゃんとCSSが適用されているか確認してみましょう。記事をプレビューします。以下の図のように作成したCSSが適用されました。

tiny-mce_ok_101513_014607_PM

まとめ

クライアントワークでいちいちclass名をクライアント側で打つというのは知識がない限り難しいので、こういうツールを使ってだれでもできるようにしてあげるというのは更新の壁を低くするという点で使えますね。
作ったら終わり…ではなく更新する人の立場やスキルに合わせてカスタマイズする気持ちが大事なのでは、、、と思います。

この記事を書いた人

池田祐太郎

池田祐太郎

WordPress好きの池田です。Webの仕事の前はライブハウスでブッキングや音響をしてました。PHP, JavaScriptを自由に操りたいと思いつつ、つい訪れたサイトのソースコードを見てしまいます。


CONTACTお問い合わせ / お見積もり