WordPressの投稿画面のツールバー・ショートカットキーをカスタマイズする|スマホでも快適に記事編集したい

関連記事

WordPressテーマUnderstrapのカスタマイズ例

プラグインを使わずにWordPressのショートコードで広告を管理する方法

基本的に使いやすいWordPressの管理画面

投稿記事エディターにTinyMCEを採用し、使いやすいショートカットキーで生産性の高いWordPressの投稿画面。

クラシック投稿に限る。

この記事ではWordPressの投稿画面をより使いやすくするためのカスタマイズ方法を紹介します。

WordPress 6.3でクラシック投稿画面が大改悪されてかなり使い物にならなくなりましたが、

この記事のカスタマイズ自体には影響がありません。

改悪は大問題だけど…。

ツールバーのカスタマイズ

WordPressのツールバーから不要なボタンを削除し、好きなボタンを追加します。

出先でスマートフォンから記事を編集する時にツールバーの中身に余計なものが多く不満を感じたので。

• functions.php

add_filter('mce_buttons', function ($buttons) {
    // 削除したいボタン
    $removes = ['alignleft', 'aligncenter', 'alignright', 'wp_adv', 'wp_more'];
    $buttons = array_diff($buttons, $removes);
    $buttons[] = 'undo';
    $buttons[] = 'redo';
    $buttons[] = 'strikethrough';
    $buttons[] = 'styleselect';
    $buttons[] = 'wp_adv';
    return $buttons;
});

$removesに削除したいボタンを記載。
その後で表示したいボタンだけを改めて追加しました。
登録できるボタンの名称一覧はclass-wp-editor.phpに記載されているのでGithubなどを参照してください。
wordpress-develop/class-wp-editor.php at 6.1 · WordPress/wordpress-develop · GitHub:

なんとなく名前を見れば分かるようになっています。

$mce_buttons = array(
    'formatselect',
    'bold',
    'italic',
    'bullist',
    'numlist',
    'blockquote',
    'alignleft',
    'aligncenter',
    'alignright',
    'link',
    'wp_more',
    'spellchecker',
);
$mce_buttons_2 = array(
    'strikethrough',
    'hr',
    'forecolor',
    'pastetext',
    'removeformat',
    'charmap',
    'outdent',
    'indent',
    'undo',
    'redo',
);

ショートカットキーの追加

運用上『小文字に変換』をどうしても追加したかったのでこれだけ。

TinyMCEにsmallのフォーマット機能を追加してからショートカットキー『Alt+S』に割り当てています。

管理画面は読み込むファイルが多いためか、loadイベントに設定すると失敗することが多いので読み込んでから2秒後に実行。

• functions.php

add_action('admin_print_scripts', function () {
    echo <<<EOS
                <script>
addEventListener('load', () => {
  setTimeout(() => {
    tinymce.activeEditor.formatter.register('small', { inline: 'small'});
    tinymce.activeEditor.shortcuts.add('Alt+S', false, () => {
       tinymce.activeEditor.execCommand('mceToggleFormat', false, 'small');
     });
  } , 2000);
});
                </script>
EOS;
});

どの機能も基本的にこんな感じでショートカットキーを割り当てられます。

WordPress6.3以降は初期状態ではTinyMCEが画面にいないので↓に修正。

        add_action('admin_print_scripts', function () {
            echo <<<EOS
                <script>
                addEventListener('load', () => {
            let timerId = setInterval(() => {
            if (tinymce.activeEditor) {
            tinymce.activeEditor.formatter.register('small', { inline: 'small'});
            tinymce.activeEditor.shortcuts.add('Alt+S', false, () => {
            tinymce.activeEditor.execCommand('mceToggleFormat', false, 'small');
        });
        }
        }, 2000);
            if (tinymce.activeEditor && tinymce.activeEditor.formatter.get('small')) {
            clearInterval(timerId);
        }
        });
            </script>
EOS;
        });

WordPress記事一覧

---

• WordPressテーマUnderStrapのカスタマイズ例
• WordPressのメディアや記事全文の文字を置換して日付も更新するSQL
• プラグインを使わずにWordPressのショートコードで広告を管理する
• WordPressの絵文字やEasy Table of Contents関係のファイルの読み込みを止める
• WordPressの投稿画面のツールバー・ショートカットキーをカスタマイズする

関連記事

WordPressテーマUnderstrapのカスタマイズ例

プラグインを使わずにWordPressのショートコードで広告を管理する方法