WordPress | 4.8 テキストウィジェットにボタンを追加する方法・PHP

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（２か所）の「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 ボタンコード

テキストウィジェットのエディタには「メディアを追加」ボタンがない理由はWordPress 4.8 から「画像、ビデオ、およびオーディオ」をサイドバーに追加するための専用メディアウィジェット機能が作られた為です。参考までに