• wordpress

テキストエディタに独自の クイックタグボタンを追加する

クイックボタンは、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 参考https://liginc.co.jp/198479  

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

 

最後に

この手の文字装飾は探せばたくさん出て来るので、それぞれのサイトに合った装飾を試してみてください。