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 );
}

オリジナルメニューボタン追加

次にドロップダウン・プルダウンのメニューボタンを作ります。

テキストウィジェット:テキスト(HTML)タブ

新規に追加したオリジナルのメニューボタン

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_moremoreタグ記事を分割したい部分に挿入
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 から「画像、ビデオ、およびオーディオ」をサイドバーに追加するための専用メディアウィジェット機能が作られた為です。参考までに