【WordPress】 「太字」などのテキスト装飾にショートカットキーを設定する

こんにちは、さち です。

今回は、WordPress の記事エディターで「太字」などのテキスト装飾に、任意のショートカットキーを設定する方法について書いていきます。

「ショートカットキー」でテキストを装飾したい

1. テキストを「選択」します。
   
2. ツールバーの「スタイル」→「インライン」→「太字」と進みます。
   
3. テキストを「太字」にできました。ただ、記事を書いていると「太字」にしたいことは多いので、毎回この操作をするのは地味に面倒なんですよね……。
   

ちなみに、Ctrl + B キーでもテキストを「太字（ボールド）」にできますが、この方法だとタグが <strong> になるので多用はしたくありません。

読みやすいようにしたいだけなので、やりたいことは上記のような <span style="font-weight: bold;"> でテキストを囲むことです。

解決方法

例では、テキストの「太字」をショートカットキーでできるようにしますが、他のテキスト装飾をする場合でも手順はだいたい同じです。

1. エディターで「太字」にした部分の HTML ソースを確認します。タグ名は span でクラス名は bold になっていますね。この情報は後で使います。
   
2. 管理画面の「外観」→「テーマファイルエディター」と進みます。
   
3. Theme Functions と書かれている「functions.php」を開きます。（子テーマを使うテーマの場合は、子テーマの「functions.php」を開く）
   
4. functions.php に下記の内容を追加して、「ファイルを更新（保存）」します。ついでなので「太字」以外に「赤太字」も追加しておきました。

   function add_tinymce_shortcuts($init) {
     $init['init_instance_callback'] = 'function(editor) {
       // 指定したタグ・クラス名でテキストを囲む処理
       function wrapText(tag, classes) {
         let text = editor.selection.getContent();
         let replace = `<${tag} class="${classes}">${text}</${tag}>`;
         editor.execCommand("mceInsertContent", false, replace);
       }
   
       // 太字
       editor.addShortcut(
         "ctrl + alt + b",// ショートカットキー
         "Insert bold",// 説明
         ()=> {wrapText("span", "bold");}// タグ・クラス名を指定して処理
       );
   
       // 赤太字
       editor.addShortcut("ctrl + alt + r", "Insert red bold", ()=> {
         wrapText("span", "bold red");
       });
     }';
     return $init;
   }
   add_filter('tiny_mce_before_init', 'add_tinymce_shortcuts', 100);

5. これで、テキストを「選択」してショートカットキー（ Ctrl + Alt + B ）を押すだけで……
   
6. テキストを「太字（ボールド）」にできました。
   

【重要】 ショートカットキーは上書きされる

前述のコードの最終行 add_filter('tiny_mce_before_init', 'add_tinymce_shortcuts', 100); で末尾に 100 を付けているのは、この処理の優先度を上げるためです。

実は、このブログで使ってるテーマ「Cocoon」でも、前述と同じようなショートカットキーの追加処理が行われています。テーマの方よりも自作の方を優先させることで、自作のショートカットキーを有効にしています。

逆に言えば、テーマのデフォルトのショートカットキーは無効になってしまいます。必要な場合は自分で追加し直しましょう。Cocoon のデフォルトのショートカットキーは次のとおりです。

参考にさせて頂いたサイト

クラシックエディタで使えるように黄色マーカーなどのショートカット追加して頂きたいです - Cocoon フォーラム

クラシックエディターのマーカースタイルにショートカットキーを設定 - GitHub