WordPressのテキストエディターでクイックタグボタンのカスタマイズ ボタンの追加と色付け Simplicity2編
みなさん、Wordpressはビジュアルエディター派ですか？テキストエディター派ですか？
普通のブロガーだったりすると大体ビジュアルエディターでの編集が多く僕も元々はビジュアルエディター派でカスタマイズを施していました。
しかしながら、ビジュアルエディターとプレビューの表示の違いがおかしかったり、はたまた自動修正機能で表示がめちゃめちゃだったりしてくるので、Wordpressに慣れてくるとビジュアルエディターに嫌気がさしてくるものです。
こうしていくと、ビジュアルエディターを使いやすくカスタマイズするのかテキストエディターに変更するのかということになってくるのですが、やっぱりテキストエディターのほうが癖もなくそのまま記述できるので楽なのです。
そこで今回はテキストエディターにてWordpressをWEBから編集する際にクイックタグを使えるように、そしてボタンのデザインを見やすく使いやすくするためのカスタマイズを紹介します。
多分、テキストエディターを活用する人ってタグも自分で全部打てる人だと思うので、今回のカスタマイズは打つのが面倒だったり好みのタグをボタンで追加するカスタマイズなので需要があるようなないような感じで（笑
独自タグとかショートコードに流用してもよさそうですね。
使用環境
* WordPressをブラウザで使っている人
* Simplicityを使っている人（使ってなくても一部流用可能）
カスタマイズの方法
AddQuickTagを使わずfunction.phpを編集します。
Simplicityを使っているときにfunction.phpに記述しても動かなかったのでfunction.phpにはボタンのデザインについて記述、
標準ボタンの削除を記述しボタンの追加については
simplicity2/lib/qtags.php
を編集しました。
デフォルトのクイックボタン削除
|
1 2 3 4 5 |
// テキストエディタから不要なボタンを削除 add_filter( 'quicktags_settings', function ( $qtInit ) { $qtInit['buttons'] = ','; return $qtInit; |
削除したいボタンのIDをここにカンマ区切りで記入します。
$qtInit['buttons'] = 'ここに削除しないIDを記述 ';
クイックタグを自分好みに追加する
ファイルの位置：Simplicity2: Editing simplicity2/lib/qtags.php
WordPressの標準クイックタグのコードも好きじゃないのでついでにボタン全部書き換えました。
strongやemなどはMarkdownに書き換え。<b>などでもよかったのですが、使ってみてどっちにするかは決めようと思います。
また使わないボタンもあるのでコンパクトに。ボタンの文字数も調節して見やすくカスタマイズを施します。
あとは、HタグとSimplicityの拡張クラスを配置、見た目はかなり使いやすくなったと思います。
不要なところは// でコメントアウトしてます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
// テキストエディタにクイックタグボタン追加 // http://webtukuru.com/web/wordpress-quicktag/ // https://wpdocs.osdn.jp/%E3%82%AF%E3%82%A4%E3%83%83%E3%82%AF%E3%82%BF%E3%82%B0API if ( !function_exists( 'add_quicktags_to_text_editor' ) ): function add_quicktags_to_text_editor() { //スクリプトキューにquicktagsが保存されているかチェック if (wp_script_is('quicktags')){?> <script> QTags.addButton( 'b', 'B', ' **', '**' ); QTags.addButton( 'i', 'i', ' *', '*' ); QTags.addButton( 's', '-', '<s>', '</s>' ); QTags.addButton( 'q', '引用', '>>>', '' ); QTags.addButton( 'l', 'URL', '', '' ); QTags.addButton( 'h3', 'H2', '## ', '' ); QTags.addButton( 'h4', 'H3', '### ', '' ); QTags.addButton( 'h5', 'H4', '#### ', '' ); QTags.addButton( 'h5', 'H5', '##### ', '' ); QTags.addButton('qt-pre','pre','<pre>','</pre>'); QTags.addButton('code','code','<code>','</code>'); // QTags.addButton('qt-bold','<?php _e( '太字', 'simplicity2' ) ?>','<span class="bold">','</span>'); QTags.addButton('qt-red','<?php _e( '赤字', 'simplicity2' ); ?>','<span class="red">','</span>'); QTags.addButton('qt-xxr','<?php _e( '太赤', 'simplicity2' ); ?>','<span class="xxr">','</span>'); // QTags.addButton( 'blue', '青字', '<span class="blue">', '</span>'); // QTags.addButton( 'bold-blue', '太青', '<span class="bold-blue">', '</span>'); QTags.addButton('qt-ur','<?php _e( '赤下線', 'simplicity2' ); ?>','<span class="ur">','</span>'); QTags.addButton('qt-my','<?php _e( '黄マ', 'simplicity2' ); ?>','<span class="my">','</span>'); QTags.addButton('qt-umy','<?php _e( '黄下マ', 'simplicity2' ); ?>','<span class="umy">','</span>'); // QTags.addButton('qt-strike','<?php _e( '打消線', 'simplicity2' ); ?>','<span class="strike">','</span>'); QTags.addButton('qt-ref','<?php _e( 'バッジ', 'simplicity2' ); ?>','<span class="ref">','</span>'); // QTags.addButton('qt-keyboard-key','<?php _e( 'キーボード', 'simplicity2' ); ?>','<span class="keyboard-key">','</span>'); QTags.addButton('qt-information','<?php _e( '補i(i)', 'simplicity2' ); ?>','<div class="information" markdown ="1">','</div>'); QTags.addButton('qt-question','<?php _e( '補Q(?)', 'simplicity2' ); ?>','<div class="question" markdown ="1">','</div>'); QTags.addButton('qt-alert','<?php _e( '補a(!)', 'simplicity2' ); ?>','<div class="alert" markdown ="1">','</div>'); QTags.addButton('qt-sp-primary','<?php _e( 'BS青', 'simplicity2' ); ?>','<div class="sp-primary" markdown ="1">','</div>'); QTags.addButton('qt-sp-success','<?php _e( 'BS緑', 'simplicity2' ); ?>','<div class="sp-success" markdown ="1">','</div>'); QTags.addButton('qt-sp-info','BS水色','<div class="sp-info" markdown ="1">','</div>'); QTags.addButton('qt-sp-warning','<?php _e( 'BS黄', 'simplicity2' ); ?>','<div class="sp-warning" markdown ="1">','</div>'); QTags.addButton('qt-sp-danger','<?php _e( 'BS赤', 'simplicity2' ); ?>','<div class="sp-danger" markdown ="1">','</div>'); QTags.addButton( 'left-balloon', 'LINE左', '<p class="left-balloon">', '</p>' ); QTags.addButton( 'right-balloon', 'LINE右', '<p class="right-balloon">', '</p>' ); QTags.addButton( 'clear-balloon', 'LINEクリア', '<div class="clear-balloon">', '</div>' ); QTags.addButton( 'line-back', 'LINE背景', '<div class="line-back">', '</div>' ); </script> <?php } } endif; |
ボタンの文字とかは短くするのに名前を変更しています。
また、自分で追加したタグのIDはほぼ適当です（笑
そして次にボタンを色分けとかして見やすくするCSSを書きます。
追加するのは子テーマのfunction.phpに書き込みます。
クイックタグのボタン色変更
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
// クイックタグのボタン色変更 function add_my_quicktag() { ?> <style> /* WordPressデフォルトのタグ */ #qt_content_b {font-weight: bold;} /*bold*/ #qt_content_i {font-style: italic;} /*ins*/ #qt_content_s {text-decoration: line-through;} /*stlipe*/ #qt_content_h2 {font-weight: bold;} /*h2*/ #qt_content_h3 {font-weight: bold;} /*h3*/ #qt_content_h4 {font-weight: bold;} /*h4*/ #qt_content_h5 {font-weight: bold;} /*h5*/ /* Simplicity2標準装備のタグ */ /*赤字*/ #qt_content_qt-red {color: #ff0000;} /*太赤*/ #qt_content_qt-xxr {font-weight: bold; color: #ff0000;} /*赤下線*/ #qt_content_qt-ur {border-bottom: solid 3px #E50202;} /*黄色マーカー*/ #qt_content_qt-my {background: #ffff66;} /*黄色アンダーマーカー*/ #qt_content_qt-umy {background: linear-gradient(transparent 50%, #ffff66 50%);} /*バッジ*/ #qt_content_qt-ref {color: white; background: #fc7a22;} /*補(i)*/ #qt_content_qt-information {background: #F4F3EB;} /*補(?)*/ #qt_content_qt-question {background: #F4F3EB;} /*補(a)*/ #qt_content_qt-alert {background: #fdeff2;} /*BS青*/ #qt_content_qt-sp-primary {background: #428BCA;} /*BS緑*/ #qt_content_qt-sp-success {background: #D6E9C6;} /*BS水色*/ #qt_content_qt-sp-info {background: #D9EDF7;} /*BS黄色*/ #qt_content_qt-sp-warning { background: #FCF8E3;} /*BS赤色*/ #qt_content_qt-sp-danger {background: #F2DEDE;} /*Line左*/ #qt_content_left-balloon {background: #1dcd00c4;} /*Line右*/ #qt_content_right-balloon {background: #1dcd00c4;} /*Lineクリア*/ #qt_content_clear-balloon {background: #1dcd00c4;} /*Line背景*/ #qt_content_line-back {background: #1dcd00c4;} </style> <?php } add_action('admin_print_footer_scripts','add_my_quicktag'); |
CSSの記述で書くとその通りになるので自由に変更できます。
これでWEBからの投稿編集も楽しく書ける！
といいな（笑）