今年の4月頃に書いた記事ですが、ソースコードのハイライト表示を面倒がって、下書きに埋めてました。
今頃ですが紹介します。
タグを挿入するクイックボタンを作る覚え書きです。table一式がうまく出せて良かったのです。
基本のコード
子テーマのファイル functions.php にコードを書きます。
使わせていただいたのは、simplicity作者さんの記事で紹介されていたコードです。（参考URLのメモも一緒にコピってます）
//テキストエディタにクイックタグボタン追加
//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('qt-bold','太字','<span class="bold">','</span>');
QTags.addButton('qt-red','赤字','<span class="red">','</span>');
</script>
<?php
}
}
endif;
add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_editor' );
クイックボタンのコードを、好みのものに書き換える
”QTags.addButton”という行ひとつにつき、ひとつのクイックボタンが出来ます。
QTags.addButton('qt-bold','太字','<span class="bold">','</span>');
書いてあるのはこんな内容です。
QTags.addButton(ID, ラベル, 開始タグ, 終了タグ);
改行を含んだタグ一式を出力したい時は、改行コード「\n」を使います。（バックスラッシュまたは日本円の記号、フォントによって見た目が違う）
私が作ったtableボタンだと、こんな感じです。一度に一式出力するため、終了タグが存在しないので、終了タグは空欄です。
QTags.addButton( 'table', 'table一式', '<table>\n <tr>\n <td></td>\n </tr>\n</table>',);
ボタンごとの設定項目は、最大8個ある
参考までに、最大で以下のことが設定できます。
QTags.addButton(ID, ラベル, 開始タグ, 終了タグ, アクセスキー, タイトル, プロパティ, インスタンス);
それぞれは以下のような役割があります。（simplicity作者さんの記事から引用したリストを編集させていただきました）
- ID：ボタンのID（必須）（かぶらないように）
- ラベル：テキストエディタ上でボタンに表示される名前（必須）
- 開始タグ：ボタンを押したときに最初に挿入するタグ
- 終了タグ：開始タグ挿入後にタグを閉じるために挿入するタグ（いらない場合は書かない）
- アクセスキー：ボタンのショートカットアクセスキー（IEでないと動かないって誰かが書いてた気がするけど忘れちゃった・・・！）
- タイトル：マウスオーバー時のツールチップ（ボタンにカーソルを合わせると出てくる文言、のこと）
- プロパティ：ツールバーのボタンの希望する順番を表す数値（行ごと入れ替えれば済む気もする）
- インスタンス：Quicktagsの特定のインスタンスにあるボタンを制限し、 存在しない場合はすべてのインスタンスに追加（よく分かってないけど、そうそう使わないっぽい）
引用・参照元
最後に、参考にさせていただいたページの紹介です。
参考 プラグイン不要！WordPressのテキストエディタにタグ挿入クイックタグボタンを追加する方法-寝ログ
simplicity作者さんの記事です。「cssをいじって、特定の書式のタグを出力する方法」も分かります。
参考 WordPressの投稿画面にプラグインを使わずに自作のクイックタグを追加する方法
「リストを出力する方法」を参考にさせていただきました。
参考 クイックタグAPI – WordPress Codex 日本語版
公式です。が、上記の記事だけでも十分導入できました。詳しい仕様や、デフォルトのクイックタグの設定が書いてあるので、そこは参考になります。
コメント