WordPressのテキストエディタを便利にする「クイックタグ」とは？（カスタマイズ方法有）

クイックタグのカスタマイズ方法

まずは、標準で用意されてはいるものの、使わないタグを削除する方法です。

不要なタグを削除する方法

functions.php などに以下のフィルターフックを記述します。

add_filter( 'quicktags_settings', function ( $qtInit ) {
	// $qtInit['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,fullscreen';
	// 上記文字列から不要なタグを取り除く
	$qtInit['buttons'] = 'strong,link,block,ul,ol,li,code,more,close,fullscreen';
	return $qtInit;
} );

前述のとおり、エディタに表示されているボタンのマークと挿入されるタグが違うことがありややこしいですが、挿入されるタグを目安に不要なタグを取り除きます。

新しいタグを追加する方法

次に新しいタグを追加します。通常のタグと任意のタグを設定できます。

通常のタグの場合

ここでは、Quicktags API を利用します。functions.php などに以下のアクションフックを記述します。

function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    // QTags.addButton( 任意のID, ボタンへの表示, 挿入されるタグ（開始）, 挿入されるタグ（終了）, false, '', 任意の表示順 );
    // 例えば、水平線を挿入するボタンを追加
    QTags.addButton( 任意のID, '水平線', '<hr>', '', false, '', 任意の表示順 

    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

また、この方法でショートコードなどを挿入するボタンを追加することもできます。
例えば、ページ分割用のタグを挿入するボタンを追加するには、下記のようなコードになります。

// ページ分割用のタグを挿入するボタンを追加
QTags.addButton( 任意のID, 'Page break', '<!--nextpage-->', '', false, '', 任意の表示順 );

任意の処理を実行する場合

また、任意の関数を実行するボタンを追加することもできます。下記のようなコードになります。

// 任意の関数を実行するボタンを追加
QTags.addButton( 任意のID, '関数実行', function () { alert( '任意の関数実行' ); } );

タグとは別に、独自の関数で特別な処理をしたい場合などに便利です。

まとめ

いかがでしたか。クイックタグ、便利ですよね。

1つのサイトに対してブログ記事を複数人で投稿する場合、投稿者によってHTMLの書き方が変わってしまうことが起きるかと思います。ですが、クイックタグをあらかじめ用意しておくことでこの問題を解決できるかもしれません。

また、純粋にタグの挿入が簡単になるので、導入していない人はこの機会にぜひ使ってみてはいかがでしょうか。

それでは。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。