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





Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/dotlab/webmake.info/public_html/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

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

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

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

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




目次

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

/**
 * TinyMCEに渡す配列を作成する
 * @param array $initList
 * @return array
 */
function origin_tinymce($initList) {
  $formats = array(
    array(
     'title' => '囲みブロック(濃青)',
     'block' => 'div',
     'classes' => 'sp-primary'
    ),
    array(
     'title' => '囲みブロック(薄緑)',
     'block' => 'div',
     'classes' => 'sp-success'
    ),
    array(
     'title' => '囲みブロック(薄青)',
     'block' => 'div',
     'classes' => 'sp-info'
    ),
    array(
     'title' => '囲みブロック(薄黄)',
     'block' => 'div',
     'classes' => 'sp-warning'
    ),
    array(
     'title' => '囲みブロック(薄赤)',
     'block' => 'div',
     'classes' => 'sp-danger'
    ),
    array(
     'title' => '吹き出し(→)',
     'block' => 'div',
     'classes' => 'left-balloon'
    ),
    array(
     'title' => '吹き出し(←)',
     'block' => 'div',
     'classes' => 'right-balloon'
    ),
    array(
     'title' => '吹き出し割り込み解除',
     'block' => 'span',
     'classes' => 'clear-balloon'
    ),
    array(
     'title' => 'LINEっぽい背景',
     'block' => 'div',
     'classes' => 'line-back'
    ),
    array(
     'title' => '太字',
     'inline' => 'span',
     'classes' => 'bold'
    ),
    array(
     'title' => '赤字',
     'inline' => 'span',
     'classes' => 'red'
    ),
    array(
     'title' => 'マーカー書き',
     'inline' => 'span',
     'classes' => 'marker'
    ),
    array(
     'title' => '打ち消し線',
     'inline' => 'span',
     'classes' => 'strike'
    ),
    array(
     'title' => 'キーボードキー',
     'inline' => 'span',
     'classes' => '.keyboard-key'
    ),
    array(
     'title' => '参考',
     'inline' => 'span',
     'classes' => 'ref'
    ),
  );
  $initList['style_formats'] = json_encode($formats);
  return $initList;
}
//TinyMCE Advancedより後に実行されるように、フック番号を明示指定する
add_filter('tiny_mce_before_init', 'origin_tinymce', 30000);

今回は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」

スポンサーリンク
スポンサーリンク




スポンサーリンク




シェアする

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

フォローする

スポンサーリンク
スポンサーリンク