WordPressプラグイン「TinyMCE Advanced」に任意のスタイルを追加する方法

参考になればシェアしてもらえるとうれしいです

  • このエントリーをはてなブックマークに追加
  • 8
tinymce advanced

WordPressには便利なWYSIWYGエディタ(見たまま編集エディタ)が搭載されています。
標準で搭載されているエディタを拡張して、より便利にする「TinyMCE Advanced」というプラグインがあります。

このプラグインを利用して、ただのタグではない「よく使うパーツ」や「装飾」をクリックで追加出来るようにしましょう。

ここからはプラグイン「TinyMCE Advanced」がインストールされている前提で説明を行います。
インストールがまだの方は上記リンクからダウンロードしてアップロードするか、プラグインから検索してインストールしてください。

また、例として当ブログで利用しているWPテーマ「Simplicity」に搭載されている「extension.css」をTinyMCE Advancedのスタイル機能に登録し、ワンクリックで呼び出せるようにします。

スポンサーリンク

1. admin.phpに追加したいタイトル・ブロック・CSSのクラス名を定義したコードを追記する

今回はSimplicityに搭載されている「extension.css」の内容をスタイルに登録するため、上記コードを定義しています。

Simplicity 1.9.3のfunctions.phpを読む限り、設定ファイルが属性ごとにlibディレクトリに格納されていたため、そのルールに従い「lib/admin.php」の末尾に上記コードを追記しました。
普通に追加する場合は、「functions.php」の末尾に追加したら良いと思います。

2. TinyMCE Advancedでスタイルを有効にする

初期設定ではスタイルがエディタに登録されていないためスタイルを有効に変更する

tinymce

これで投稿のビジュアルタブにスタイルが追加されます。

visualeditor

これで最低限の設定は完了です。

Tips. ビジュアルエディターにもCSSが適用されるようにする

投稿管理画面のビジュアルエディターに、実際の装飾を反映させるためにfunctions.phpに設定を追記します。

詳細な設定方法は、Simplicityの作者さまのブログに紹介されておりましたので、そちらを参考に設定をしてみてください。

なお、Simplicity 1.9.3には最初から設定がされており、もともとビジュアルエディターにCSSが適用される状態になっています。

Simplicity作者のわいひら様、素敵なテーマを提供いただきましてありがとうございます。

紹介初心者でも簡単に利用できる無料WordPressテーマ「Simplicity」

スポンサーリンク

参考になればシェアしてもらえるとうれしいです

  • このエントリーをはてなブックマークに追加

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です