- wordpress
テキストエディタに独自の クイックタグボタンを追加する
最終更新日:2017/06/25
クイックボタンは、worepressで制作したブログやwebサイトに一度設定してしまうと
あまり変更する機会がないので、ついついどうやって実装したか忘れがちです(私だけかもしれません…)。
というわけで、クイックボタンの設定や、付け足したい時に参考になるようにまとめました。
最後にwebメディアで使えそうな文字装飾も幾つか作成しました。
クイックタグボタンとは?
そもそも、クイックタグボタンとはwordpress内の記事投稿画面にある、
テキストエディタ上にあるボタンのことです。
このボタンを押すことで、それに応じたcssが挿入されます。
デフォルトでは太字にする「b(bold)」や斜体にできる「i(italic)」などがあります。
今回はここに独自のボタンを設定していきたいと思います。
更に、中にはこれ使わないなーと思うボタンもありますよね。
そんなボタンを非表示にする方法もご紹介します。
クイックボタンを設定する
Quicktags API を利用して、下記のタグをfunctions.phpに追加します。
</>php
//テキストエディタにクイックタグボタン追加
if ( !function_exists( 'add_quicktags_to_text_editor' ) ):
function add_quicktags_to_text_editor() {
if (wp_script_is('quicktags')){?>
<script>
QTags.addButton('element','css','<span class="element">','</span>');
QTags.addButton('underline','アンダーライン','<span class="under_line">','</span>');
</script>
<?php
}
}
endif;
add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_editor' );
以下の一文の()内をそれぞれ変更し、クラスを足していく感じです。
</>java script
QTags.addButton('element','css','<span class="element">','</span>');
</>java script
QTags.addButton('任意のID','ボタンに表示させるテキスト',開始タグ','終了タグ');
このようにして使用します。ボタンに表示させるテキストは日本語OKです。
cssを設定する
クイックタグで使用するcssをstyle.css等に記載してください。
今回は、文章中にcssを記述する用のスタイルと、アンダーライン風のcssを追加しました。
css表記用
See the Pen wordpress_text_css by maikatou (@logequal) on CodePen.0
アンダーライン
See the Pen KqXzmV by maikatou (@logequal) on CodePen.0
これだけで簡単にクイックボタンを設定することができました。
記事作成が捗りますね。
不要なタグを取り除く
デフォルトで表示されているタグの中で、これは使用しないかな?というタグを非表示にすることができます。
下記をfunctions.phpに追加します。
</>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,em,css,link,tablel,block,del,img,ul,ol,li,close';
return $qtInit;
} );
以下の一文に表示させたいボタンを入れてください。私は先程のクイックボタンの下に記述しています。
</>java script
$qtInit['buttons'] = 'strong,em,css,link,tablel,block,del,img,ul,ol,li,close’;
今回以下の記事を参考にさせていただきました。
参考https://nelog.jp/add-quicktags-to-wordpress-text-editor
webメディアで使えそうな文字装飾
では、当ブログでも使用している文字装飾をご紹介します。カラーやサイズを変えて使用してみてください。
細い下線、点線
シンプルな下線。ポイントは文字と線の間に隙間を入れるためにpaddingの設定をしている点でしょうか。
See the Pen wordpres_text_underline_light by maikatou (@logequal) on CodePen.0
蛍光ペン風
グラデーションを付けるためのcss、linear-gradientを使用して、蛍光ペンを弾いたようなデザインにすることができます。%の数値を変更することで、太さの変更ができます。
See the Pen wordpres_text_underline_pen by maikatou (@logequal) on CodePen.0
ストライプのアンダーライン
こちらもlinear-gradientを使用しています。
See the Pen wordpres_text_underline_stripe by maikatou (@logequal) on CodePen.0
最後に
この手の文字装飾は探せばたくさん出て来るので、それぞれのサイトに合った装飾を試してみてください。