クイックタグを追加することで、書式の追加の効率が良くなり、記事作成が速くなる。
読者に読みやすい、見やすいコンテンツを作るうえで、適度の装飾は必要です。
HTMLやCSSに慣れている人であれば、テキストエディタモードで、ガンガン記述すればいいですが、一般の人はそうははいきません。
HTMLやCSSに精通していなくても、簡単に書式を追加できるのがクイックタグの機能。
追加の仕方は2つある。
- プラグインを使う
- テーマテンプレートに埋め込む
プラグインを使う
AddQuicktag というプラグインを使えば、簡単にクイックタグを追加することが可能です。
使い方は別の記事で。
テンプレートに埋め込む
ビジュアルエディタにクイックタグメニューを追加する
WordPress標準のビジュアルエディタ（TinyMCE）のメニュー部分に、プルダウン式のクイックタグを追加することにする。
ます、テーマテンプレート直下に「js」フォルダを作って、以下のscriptを「mce-button.js」として保存。
|
0 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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
(function() { // ビジュアルエディタにプルダウンメニューの追加 tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton( 'my_mce_button', { text: 'クイックタグ', icon: false, type: 'menubutton', menu: [ { text: 'マーカー黄色', onclick: function() { var selected_text = editor.selection.getContent(); var return_text = ''; return_text = '<strong class="marker marker-yellow">' + selected_text + '</strong>'; editor.insertContent(return_text); } }, { text: 'マーカーピンク', onclick: function() { var selected_text = editor.selection.getContent(); var return_text = ''; return_text = '<strong class="marker marker-pink">' + selected_text + '</strong>'; editor.insertContent(return_text); } }, { text: 'マーカーオレンジ', onclick: function() { var selected_text = editor.selection.getContent(); var return_text = ''; return_text = '<strong class="marker marker-orange">' + selected_text + '</strong>'; editor.insertContent(return_text); } }, { text: 'H3見出し', onclick: function() { var selected_text = editor.selection.getContent(); var return_text = ''; if(selected_text.length > 0){ return_text = '<h3 class="dmn_h3">' + selected_text + '</h3>'; }else{ return_text = '<h3 class="dmn_h3">H3見出し</h3>'; } editor.insertContent(return_text); } }, { text: 'H4見出し', onclick: function() { var selected_text = editor.selection.getContent(); var return_text = ''; if(selected_text.length > 0){ return_text = '<h4 class="dmn_h4">' + selected_text + '</h4>'; }else{ return_text = '<h4 class="dmn_h4">H4見出し</h4>'; } editor.insertContent(return_text); } }, { text: 'H5見出し', onclick: function() { var selected_text = editor.selection.getContent(); var return_text = ''; if(selected_text.length > 0){ return_text = '<h5 class="dmn_h5">' + selected_text + '</h5>'; }else{ return_text = '<h5 class="dmn_h5">H5見出しa</h5>'; } editor.insertContent(return_text); } } ] }); }); })(); |
TinyMCEのオプションの editor.addButton でツールバーに「クイックタグ」のメニューボタン（プルダウンメニュー）を追加します。
プルダウンに表示されるのは、menuの配列に記述しもの。ここに追加すれば、好きな書式を追加できます。
TinyMCE自体のカスタマイズは、本家のリファレンスをご覧ください。
次に、functions.php に先ほどのscriptを読み込むように記述する。
|
0 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 |
//テーマテンプレートのfunctions.phpに追記 //ビジュアルテキストエディタにクイックタグを追加する function my_add_mce_button() { // ユーザー権限を確認 if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) { return; } // リッチテキストエディタを使えるか if ( 'true' == get_user_option( 'rich_editing' ) ) { add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' ); add_filter( 'mce_buttons', 'my_register_mce_button' ); } } add_action('admin_head', 'my_add_mce_button'); // プラグインを追加 function my_add_tinymce_plugin( $plugin_array ) { $plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/mce-button.js'; //子テーマの場合は get_stylesheet_directory_uri()を使う return $plugin_array; } // リッチテキストエディタにボタンを追加する function my_register_mce_button( $buttons ) { array_push( $buttons, 'my_mce_button' ); return $buttons; } |
テキストエディタにクイックタグを設置する。
次に、テキストエディタモードの時にクイックタグボタンを表示させるようにする。
下記コードを、おなじみの functions.php に追記
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//テーマテンプレートのfunctions.phpに追記 //テキストエディタにクイックタグボタンを設置 function appthemes_add_quicktags() { if (wp_script_is('quicktags')){ ?> <script type="text/javascript"> QTags.addButton('marker-yellow', 'マーカー黄', '<strong class="marker marker-yellow">', '</strong>'); QTags.addButton('marker-pink', 'マーカーピンク', '<strong class="marker marker-pink">', '</strong>'); QTags.addButton('marker-orange', 'マーカーピンク', '<strong class="marker marker-orange">', '</strong>'); QTags.addButton('dmn_h3', 'H3見出し', '<h3 class="dmn_h3">', '</h3>'); QTags.addButton('dmn_h4', 'H4見出し', '<h4 class="dmn_h4">', '</h4>'); QTags.addButton('dmn_h5', 'H5見出し', '<h5 class="dmn_h5">', '</h5>'); </script> <?php } } add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' ); |
QTags.addButton で書式を追加すれば、いくらでも追加できる。
予定では、これでビジュアルエディタでもテキストエディタでもクイックタグが使えるようになるはず。
