WordPress 4.8 のテキストウィジェットをカスタマイズでビジュアルエディタに新しくツールバーに任意のボタンを追加する方法を紹介!デフォルトで太字・斜体・順序付き・無しリスト・リンク用ボタンはありますが引用・元に戻す・やり直し・取り消し線やコピーボタンがありませんがこのコードで簡単に追加挿入できます。
ページコンテンツ
ツールバーにボタンを追加方法

テキストウィジェットのビジュアルタブとツールバー
オリジナルボタン追加
下記、オリジナルボタン追加(1)のPHPコードを使用中の「テーマ」または「子テーマ」のfunction.phpなどに追加で記述して保存します。
新たにオリジナルボタンがツールバーに表示されます。そのボタンをクリックするとPHPで登録したテキストがリッチテキストエリアに入力されます

新規に追加したオリジナルのボタン
Template Files
//オリジナルボタン追加(1)
add_action( 'admin_print_scripts-widgets.php', 'wpm_custom_widgets_text_eomec_editor' );
function wpm_custom_widgets_text_eomec_editor() {
$script =<<<TEXT_EDITOR
jQuery( document ).on( 'tinymce-editor-setup', function( event, editor ) {
editor.settings.toolbar1 += ',mybutton';
editor.addButton( 'mybutton', {
text: 'オリジナルボタン', //①ボタンの名前「わかりやすい名前を自由に」
icon: false,
onclick: function () {
editor.insertContent( 'ボタンの名前「わかりやすい名前を自由に」' ); //②表示するテキスト
}
});
});
TEXT_EDITOR;
wp_add_inline_script( 'editor', $script );
}
オリジナルメニューボタン追加
次にドロップダウン・プルダウンのメニューボタンを作ります。

新規に追加したオリジナルのメニューボタン
Template Files
//オリジナルメニューボタン追加(1)
add_action( 'admin_print_scripts-widgets.php', 'wpm_custom_widgets_text_eomec_editor' );
function wpm_custom_widgets_text_eomec_editor() {
$script =<<<TEXT_EDITOR
jQuery( document ).on( 'tinymce-editor-setup', function( event, editor ) {
editor.settings.toolbar1 += ',mecbutton2';
editor.addButton( 'mecbutton2', {
type: 'menubutton',
text: 'オリジナルメニューボタン', //ボタンの名前「わかりやすい名前を自由に」
menu: [{
text: 'メニューのアイテム 1',
onclick: function() {
editor.insertContent(' <strong>これはメニューのアイテム 1</strong> '); //アイテム①
}
}, {
text: 'メニューのアイテム 2',
onclick: function() {
editor.insertContent(' <em>これはメニューのアイテム 2</em> '); //アイテム②
}
}]
});
});
TEXT_EDITOR;
wp_add_inline_script( 'editor', $script );
}
テキストエディターに出力される HTML コード
<strong>これはメニューのアイテム 1</strong>
<em>This is a menu item 2</em>
基本的なボタンの追加
次はフォーマット・見出しのセレクトボタンを作る方法(例)です。

一般的な見出しのセレクトボタンを追加
Template Files
//見出しのセレクトボタンを追加
add_action( 'admin_print_scripts-widgets.php', 'wpm_custom_widgets_text_eomec_editor' );
function wpm_custom_widgets_text_eomec_editor() {
$script =<<<TEXT_EDITOR
jQuery( document ).on( 'tinymce-editor-setup', function( event, editor ) {
if ( editor.settings.toolbar1 && -1 === editor.settings.toolbar1.indexOf( 'formatselect' ) ) { //①TinyMCE
editor.settings.toolbar1 += ',formatselect'; //①TinyMCE
}
});
TEXT_EDITOR;
wp_add_inline_script( 'editor', $script );
}
テキストエディターに出力される HTML コード
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
現在の日付を挿入するボタンの追加方法

現在の日付を表示するボタンの追加
Template Files
//現在の日付を表示するボタンの追加
add_action( 'admin_print_scripts-widgets.php', 'wpm_custom_widgets_text_eomec_editor' );
function wpm_custom_widgets_text_eomec_editor() {
$script =<<<TEXT_EDITOR
/*-------------------------現在の日付を挿入----------------------------*/
jQuery( document ).on( 'tinymce-editor-setup', function( event, editor ) {
function toTimeHtml(date) {
return '<time datetime="' + date.toString() + '">' + date.toDateString() + '</time>';
}
editor.settings.toolbar1 += ',currentdate';
editor.addButton('currentdate', {
icon: 'insertdatetime',
tooltip: "現在の日付を挿入", //ツールチップ(吹き出しで表示)
onclick: function () {
var html = toTimeHtml(new Date());
editor.insertContent(html);
}
});
});
/*-------------------------/現在の日付を挿入------------------------------*/
TEXT_EDITOR;
wp_add_inline_script( 'editor', $script );
}
テキストエディターに出力される HTML コード
<time datetime="Wed Jun 28 2017 00:00:00 GMT+0900 (東京 (標準時))">Wed Jun 28 2017</time>
一般的なボタンを複数追加する方法
PHP コードは上記のコードが基本のコードです。必要なボタンのコードを①TinyMCE(2か所)の「formatselect」の場所に追加します。

ツールバーに複数のボタンの配置(例)
下記の PHP コードは上記の画像で配置したボタンのコードです。(リンク挿入ボタン以降のボタン)
Template Files
add_action( 'admin_print_scripts-widgets.php', 'wpm_custom_widgets_text_eomec_editor' );
/*------------------一般的なボタンを複数追加------------------------*/
function wpm_custom_widgets_text_eomec_editor() {
$script =<<<TEXT_EDITOR
jQuery( document ).on( 'tinymce-editor-setup', function( event, editor ) {
if ( editor.settings.toolbar1 && -1 === editor.settings.toolbar1.indexOf( 'outdent, indent, charmap, removeformat, pastetext, forecolor, strikethrough, formatselect, wp_help' ) ) {
editor.settings.toolbar1 += ',outdent, indent, charmap, removeformat, pastetext, forecolor, strikethrough, formatselect, wp_help';
}
});
/*------------------/一般的なボタンを複数追加---------------------------*/
TEXT_EDITOR;
wp_add_inline_script( 'editor', $script );
}
現在の日付を挿入するボタンと一般的な複数のボタンをまとめて挿入する方法
Template Files
add_action( 'admin_print_scripts-widgets.php', 'wpm_custom_widgets_text_eomec_editor' );
function wpm_custom_widgets_text_eomec_editor() {
$script =<<<TEXT_EDITOR
/*------------------一般的なボタンを複数追加------------------------*/
jQuery( document ).on( 'tinymce-editor-setup', function( event, editor ) {
if ( editor.settings.toolbar1 && -1 === editor.settings.toolbar1.indexOf( 'outdent, indent, charmap, removeformat, pastetext, forecolor, strikethrough, formatselect, wp_help' ) ) {
editor.settings.toolbar1 += ',outdent, indent, charmap, removeformat, pastetext, forecolor, strikethrough, formatselect, wp_help';
}
/*------------------/一般的なボタンを複数追加 END--------------------*/
/*-------------------------現在の日付を追加--------------------------*/
function toTimeHtml(date) {
return '<time datetime="' + date.toString() + '">' + date.toDateString() + '</time>';
}
editor.settings.toolbar1 += ',currentdate';
editor.addButton('currentdate', {
icon: 'insertdatetime',
tooltip: "Insert Current Date",
onclick: function () {
var html = toTimeHtml(new Date());
editor.insertContent(html);
}
});
});
/*-------------------------/現在の日付を追加 END----------------------*/
TEXT_EDITOR;
wp_add_inline_script( 'editor', $script );
}
これでデフォルトの「テキストウィジェット用ビジュアルエディター」より独自のタグ挿入ボタンや基本的なボタンの組合せでサイト・ブログの編集作業が楽になりって使い勝手もがとても良くなったと思います。
ツールバー TinyMCE ボタンコード
TinyMCEボタンコード | コード意味 | ボタンの内容 |
---|---|---|
bold | 太字 | <strong>タグを挿入 |
italic | 斜体 | <em>タグを挿入 |
underline | 下線 | <span style=”text-decoration: underline;”>タグを挿入 |
blockquote | 引用 | <blockquote>タグを挿入 |
bullist | リスト番号なし | <ul>タグを挿入 |
numlist | リスト番号付き | <ol>タグを挿入 |
alignleft | 文字の左寄せ | <p style=”text-align: left;”>タグを挿入 |
aligncenter | 文字の中央寄せ | <p style=”text-align: center;”>タグを挿入 |
alignright | 文字の右寄せ | <p style=”text-align: right;”>タグを挿入 |
undo | 元に戻す | 取り消し |
redo | やり直し | クリア |
link | リンクの挿入 | リンクの挿入画面が表示 |
unlink | 解除 | リンクの解除したい場合 |
fullscreen | フルスクリーン | 編集画面をブラウザ表示画面に拡大 |
formatselect | フォーマットの選択 | 段落設定 |
wp_more | moreタグ | 記事を分割したい部分に挿入 |
spellchecker | スペルチェック | 記事のスペルミスを確認 |
strikethrough | 打消し線 | <span style=”text-decoration: line-through;”>タグを挿入 |
hr | 横ライン | <hr>タグを挿入 |
forecolor | テキストカラー | 文字色<span style=”color: #xxxxxx;”>タグを挿入 |
pastetext | テキストとしてペースト | プレーンテキストとして貼り付け |
removeformat | 書式のクリア | フォーマット解除・テキストの設定をクリア |
charmap | 特殊文字 | 特殊文字・記号を選択で挿入 |
outdent | インデント減らす | インデント解除 |
indent | インデント増やす | <p style="padding-left: 30px;">タグを挿入 |
wp_help | ヘルプ | ヘルプ画面 |
テキストウィジェットのエディタには「メディアを追加」ボタンがない理由はWordPress 4.8 から「画像、ビデオ、およびオーディオ」をサイドバーに追加するための専用メディアウィジェット機能が作られた為です。参考までに