WordPress

WordPressのエディタのテキストモード時のクイックタグを追加/非表示させる

March 9, 2018

WordPressのエディタはデフォルトのままでも使用はできますが、使っていくとデフォルトの時にはないスタイルやクラスを追加するボタンを増やしたり、デフォルトのボタンの不必要なものを非表示にしたりしたくなることがあると思います。記事の投稿をスムーズに行うためにもカスタマイズをしてみるのはいかがでしょうか。

スタイルを追加する

style.cssなどに以下の記述を追加します。

.square { list-style-type: square; }
.circle { list-style-type: circle; }
.disc { list-style-type: disc; }
.decimal { list-style-type: decimal; }

functions.phpに記述

functions.phpに以下の記述を追加します。

function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'eg_li-s', 'ul-Square', '<ul class="square">\n  <li></li>\n' , '  <li></li>\n</ul>' ); //\n 改行コード
    QTags.addButton( 'eg_li-c', 'ul-Circle', '<ul class="circle">\n  <li></li>\n' , '  <li></li>\n</ul>' );
    QTags.addButton( 'eg_li-d', 'ul-Disc', '<ul class="disc">\n  <li></li>\n' , '  <li></li>\n</ul>' );
    QTags.addButton( 'eg_li-n', 'ul-Decimal', '<ul class="decimal">\n  <li></li>\n' , '  <li></li>\n</ul>' );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

liの前にわざと半角スペースなど入れてますので不必要でしたら削除してください。

使用方法

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

詳しい仕様はクイックタグAPIを参照してください。

使用しないボタンを非表示にする

更にfunctions.phpに以下の記述を追加し、使用しないボタンを非表示。

add_filter( 'quicktags_settings', function ( $qtInit ) {
    // $qtInit['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close';
    // 必要なボタンを残す。
    $qtInit['buttons'] = 'link,block,del,code,more';
    return $qtInit;
} );

プラグインを使用せずにエディタのクイックタグを変更
デフォルト
プラグインを使用せずにエディタのクイックタグを変更
カスタマイズ後