【WordPress】エディタをカスタマイズして自分専用にしよう！【プラグインなし】

WordPressでブログ記事などを作成するときにはエディタを使います。HTMLコードを直接編集できる「コードエディタ」と呼ばれるものも存在しますが、ほとんどの人は直感で編集できる「ブロックエディタ」を使っているでしょう。

そしてエディタのブロックのうち、文章を書くときに活躍するのが「クラシック（TinyMCE）」というブロックです。

このブロックにはいくつかボタンがあり様々な機能が使えるのですが、さらにボタンを追加して自分専用の機能を作れたらとても便利かと思います。

今回はその方法を紹介していきます。

クラシックブロックとは

WordPressでブログ運営をしている人なら恐らく一度は使ったことがあると思うのですが、そもそもクラシックブロックとは何なのか説明します。

WordPressの古いエディタ

クラシックという名前からもわかるように、このクラシックブロックはWordPressの古いエディタと同じ機能を備えています。WordPressはかつては以下のように、まるでMicrosoft Wordのようなビジュアルエディタとテキストエディタを備えていました。

Wordに似ているので直感的に操作ができ、とても使いやすかったのですが、2018年にリリースされたWordPress 5.0から「gurtenberg」という、いわゆる「ブロックエディタ」が採用されるようになりました。

https://wordpress.org/gutenberg/

上のリンクから、Gurtenbergブロックエディタを体験することができますね。このブロックエディタではあらゆる機能を持った「ブロック」を組み合わせることで文章を完成させていく感じで、Wordのような操作感は薄れたものの、プラグインなどが提供する機能を文章中に入れやすいなどの利点があります。

一方で古いビジュアルエディタを好む人も結構いるようで、クラシックエディタに戻すためのプラグインなんかも流行りましたね。

良いとこ取りなクラシックブロック

以上より、文章を作る上ではクラシックエディタの方が優れている（個人的に）　と思うのですが、プラグインなどの機能を投稿中に盛り込む際にはブロックエディタがかなり有用です。

この二つを叶えてくれるのが「クラシック」というGurtenbergのブロックです。ブロックエディタのブロックでありながら、クラシックビジュアルエディタと同じ機能を備えているので、好きなところにこだわった文章を挿入することができ、非常に便利です。

このブロックに文章を入力して、太字にしたい部分だけを選択して上の「B」というボタンを押すだけで簡単に太字ができたりと、まるでWordのようで非常に使い勝手が良いです。

ちなみにこのこの機能ですが、「TinyMCE」というJavaScriptのライブラリが実体です。WordPress専用というわけではなく、ブラウザ上でWordのようにデザインに凝った文章を作れるエディタとして、様々なプラットフォームで採用されていたりします。

クラシックブロックにボタンを追加する方法

とりあえずこのクラシックブロックが素晴らしいものであることは紹介できたと思うのですが、素晴らしいとは言っても標準では最低限の機能しか備えていません。

そこで、プラグインやテーマを導入することでこのブロックに機能を増やすことができたりします。

しかし究極を言えばそういったプラグインなどは自分のサイトのために作られたものではなく、いろいろなサイトで使えるような汎用性の高い機能しか備えてなかったりします。　となると、自分のサイトに特化した機能をつけるためには自分でカスタマイズする必要がありますよね。

ということで、プラグインなしで簡単に実装できる、クラシックブロックのカスタマイズ方法を紹介します。

今回は、この黄色い蛍光ペンを一瞬でひけるようなボタンを試しに作ってみます。

PHPコードを記述

TinyMCEはJavaScriptで機能しているライブラリなのでJSファイルをちょっと作るだけでカスタマイズできるかと思ったのですが、WordPressでは専用の関数を使わないと機能が追加できないようです。

といっても記述量はそこまで多くはありません。　function.phpなどのWordPressの関数が使えるPHPファイルで、以下のような記述をするだけです。

add_filter( 'mce_external_plugins', 'tiny_add_button' );
add_filter( 'mce_buttons', 'tiny_register_buttons' );

if ( ! function_exists( 'tiny_add_button' ) ) {
  function tiny_add_button( $plugin_array ) {
      $plugin_array['mymarker'] = 'JSファイルのURL';
      return $plugin_array;
  }
}
if ( ! function_exists( 'tiny_register_buttons' ) ) {
  function tiny_register_buttons( $buttons ) {
      array_push( $buttons, 'mymarker' );
      return $buttons;
  }
}

あら簡単ですね。WordPressのフィルターフックを使って、TinyMCEが読み込まれるタイミングでTinyMCEの機能を追加するといった感じです。

上の関数では機能を記述したJSファイルを参照しつつ、下の関数ではその機能を使うためのボタンを追加しています。

JavaScriptファイルを作る

上のコードの「JSファイルのURL」と書いてある所には、自分の好きなURLを入力しましょう。そしてそのURLの場所に新しくJavaScriptファイル（ここではtiny_marker.js）を作成し、以下のような記述をします。

(function() {
    tinymce.PluginManager.add( 'mymarker', function( editor, url ) {
        editor.addButton('mymarker', {
            title: '蛍光ペン',
            cmd: 'mymarker',
            image: 'ボタンの画像URL',
        });
        editor.addCommand('mymarker', function() {
            var selected_text = editor.selection.getContent({
                'format': 'html'
            });
            if ( selected_text.length === 0 ) {
                alert( 'テキストを選択してください' );
                return;
            }
            var open_column = '<span style="background: linear-gradient(transparent 75%, #ffff0057 25%);">';
            var close_column = '</span>';
            var return_text = '';
            return_text = open_column + selected_text + close_column;
            editor.execCommand('mceReplaceContent', false, return_text);
            return;
        });
    });
})();

WordPressで自作ブロックを作る方法で紹介したようなJavaScriptのコードに似ていますね。editorというTinyMCEのオブジェクト？のaddButtonメソッドでボタンを追加します。PHPでもボタンの定義を行う必要があり、JS側でも行う必要があるみたいで、WordPressは面白いですね。

そしてボタンの名前（カーソルを合わせたときに出てくる）とボタンを押したときに実行されるTinyコマンド、そしてボタンの画像URLを指定しています。

そしてaddCommandメソッドで具体的な機能の処理を追加しています。ここではテキストにマーカーを引くだけなので非常にシンプルな処理となっています。

エディタ上のテキストをHTMLコードとして取得しつつ、その前後にspanタグを付与、そしてspanタグ自体のstyleプロパティを直接操作することで、エディタ画面でも反映されつつ、投稿画面でもしっかりと反映されていることが確認できるでしょう。

リアルタイムでエディタ画面で反映されているのを見ることができるのがこのTinyMCEの良いところですね。

ちなみにspanタグに任意のクラスを付与して、そのクラスに関する記述を追加のstyle.cssなどで行えばしっかり投稿画面でスタイルが反映されるのですが、その場合はエディタ画面では反映されませんのでご注意ください。

エディタ画面で反映させるためにはeditor-style.cssなどをいじる必要がありますね。

クラシックブロックのボタンを消す方法

ボタンを追加する方法について紹介したところで、ついでにボタンを消す方法についても紹介したいと思います。　既存のボタンを消すときは、PHPで以下のような記述をするだけでOKです。

add_filter( 'mce_buttons', 'tiny_register_buttons' );
add_filter('mce_buttons_2','tiny_register_buttons_2');

if ( ! function_exists( 'tiny_register_buttons' ) ) {
  function tiny_register_buttons( $buttons ) {
      $unneed_buttons = array('alignleft','aligncenter','alignright','wp_more','link', 'unlink','italic','bold','wp_adv');

      //要らないボタンは消す
      foreach($buttons as $button_key => $button_value){
        if(in_array($button_value,$unneed_buttons)){
            unset($buttons[$button_key]);
        }
      }
      return $buttons;
  }
}
if ( ! function_exists( 'tiny_register_buttons_2' ) ) {
    function tiny_register_buttons_2( $buttons ) {
        $unneed_buttons = array('removeformat','charmap','outdent','indent','wp_help');
  
        //要らないボタンは消す
        foreach($buttons as $button_key => $button_value){
          if(in_array($button_value,$unneed_buttons)){
              unset($buttons[$button_key]);
          }
        }
        return $buttons;
    }
  }

先ほどボタンを追加するときに、フィルターフックでボタン配列を取得して配列に要素を追加して、そのまま返すことで追加していましたが、削除するときは逆に配列から要素を取り除いて返すことで実現できます。

$unneed_buttonsという配列が要らないボタンのリストです。alignleftは左揃えのボタンですね。

そしてmce_button_2というフィルターフックでエディターの二行目のボタンの配列を操作することができます。

今回はとてもシンプルな機能を追加しましたが、こんな感じでカスタマイズしていけば自分専用の、機能的なエディターを作れますね。そして記事作成効率もぐんと上がることでしょう。

是非活用してみてください。　無駄にプラグインを使っていないので、サイトが重たくなる心配もそこまではいりません。