こんばんは！

プライム・ストラテジー株式会社の森下です。

今回はクイックタグについて説明していきたいと思います。

１.クイックタグとは

ご存知の通りクイックタグとはWordPressを普段使用している方であればよくお世話になっているエディター上部のボタンのことです。

ただし、実際に記事を書いている際に上部以外のタグボタンがあれば便利だなぁーと思ったことはありませんか。例えば文字を強調させる際に文字を太く赤くしたい場合毎回文字色をビジュアルエディターでテキストの色を変更して太字にするという手間が発生します。このように複数の作業を１つのボタンで補いたい場合、もしくは標準クイックタグでは見た目を作成できないような見た目をボタン１つで作成したい場合、オリジナルのクイックタグを追加することができます。

2.テキストエディタにクイックタグを追加する場合

WordPressにはテキストエディターとビジュアルエディターの２つのエディターが存在します。ビジュアルエディターはいわゆるWYSIWYGエディタと呼ばれるもので、HTMLを知らなくてもWordのように記事を書くことが出来て直感的に操作できるエディターのことです。対してテキストエディターは直接HTMLを編集することが出来るエディターのことです。

まずはテキストエディターに独自のクイックタグを追加する方法を説明します。

テキストエディターに独自のボタンを追加するためにはQuicktags API を使用する必要があります。

QTags.addButton('任意で一意のID', 'ラベル', '開始タグ', '終了タグ');

※指定出来るパラメーターは８つありますが通常上記の４つで問題ないかと思います。詳細についてはCodexをご参照下さい。

このスクリプトをwordpressの管理画面に作成したページのフッターに挿入するために以下のアクションフックを使用することでjsコードを挿入することが可能になります。

admin_print_footer_scripts

上記を利用した上で下記の内容をfunctions.phpに記述してみましょう。

function add_original_buttons() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'eg_paragraph', 'p', '<p class="gradient">', '</p>');
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'add_original_buttons' );

※wp_script_is関数を使用して参照エラーを避けるために ‘quicktags’ スクリプトが使用中かどうかチェックしています。

上記のように挿入するタグにclass属性を付与することで見た目をカスタマイズすることも出来ます。

また、下記のように記述することでボタンを挿入するだけでなくボタンをクリックすることで任意のjsの関数を実行することも可能です。

function add_original_buttons() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'js_button', 'JS', 'test_button');
    function test_button(){
    //処理内容
    }
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'add_original_buttons' );

3.ビジュアルエディタにクイックタグを追加する場合

個人的にはこちらのエディターを使用する方の割合の方が多いのではないかと思います。フォントサイズやテーブル等一般的なボタンであれば「TinyMCE Advanced」を使用すれば補えるかと思いますが、それでも補えない場合は「TinyMCE」のフィルターフックを使用してボタンを追加する必要があります。

下記のフィルターフックを使用することでエディターの初期設定の配列を変更することが出来ます。

tiny_mce_before_init

下記のスクリプトをfunctions.phpに記述してみて下さい。

function _my_tinymce($initArray) {
     $style_formats = array(
          array(
               'title' => 'スタイル1',
               'block' => 'div',
               'classes' => 'style1'
          ),
          array(
               'title' => 'スタイル2',
               'block' => 'p',
               'classes' => 'style2'
          ),
     );
     $initArray['style_formats'] = json_encode($style_formats);
          return $initArray;
}
add_filter('tiny_mce_before_init', '_my_tinymce', 10000);

上記だけではエディターに表示されないので、mce_buttonsというフックを利用してTinyMCEにスタイルセレクトボックスを追加する必要があるため下記のスクリプトを上記のスクリプトの下に記述して下さい。

ちなみにフィルターフックをmce_buttons_2とするとセレクトボックスは２段目に表示され、4まで指定することが出来ます。

詳細はCodexを参照下さい。

if ( !function_exists( 'add_styles_to_tinymce_buttons' ) ):
          function add_styles_to_tinymce_buttons($buttons) {
          //見出しなどが入っているセレクトボックスを取り出す
          $temp = array_shift($buttons);
          //先頭にスタイルセレクトボックスを追加
          array_unshift($buttons, 'styleselect');
          //先頭に見出しのセレクトボックスを追加
          array_unshift($buttons, $temp);
          return $buttons;
     }
endif;
add_filter('mce_buttons','add_styles_to_tinymce_buttons');

そうするとビジュアルエディターのクイックタグの１行目にスタイルというセレクトボックスが表示され、上記で記述したスタイル１、スタイル２が選択できます。

そしてstyle1、style2用のCSSを書けば見た目をカスタマイズすることが出来ます。

上記のような設定を行うことビジュアルエディターでの作業がかなり捗るかと思います。

4.オススメのエディタープラグイン

上記のようにタグではなく、決まった雛形をいつでも呼び出したいという方もいるかと思います。

そういった時にまとまったテンプレートをいつでも呼び出せる「TinyMCE Templates」をオススメします。

このプラグインを使用すれば雛形をいくつも用意しておけますので、非常に作業が捗ります。また雛形にあわせてCSSを書いておけば色々使い方の幅は広がるかと思いますので、良かったら是非試して下さい。

今回はいかがでしたでしょうか。

今後新規サイト構築やサーバの引っ越しを考えられている方がいらっしゃいましたら、是非日本に大規模なデータセンターを構え、手厚いサービスをしてくれることで定評のある鈴与シンワートの「S-Port」クラウドを導入してみてください。

ご興味がある方は以下をご参照ください。