【WordPress】Ctrl+Sで投稿を保存できるようにするプラグイン

問題

最近のWordPressでは、ビジュアルエディタのときならCtrl+Sで保存ができるようになっていてびっくりしたのだが、私は普段テキストエディタの方を使用しており、こちらはCtrl+Sで投稿の保存ができない。

テキストエディタでも、Ctrl+Sで投稿の保存ができるようにしたい。

答え

プラグインを使え。例えば http://wordpress.org/extend/plugins/ctrl-s/ など。

...

というのでも解決するが、中がどうなっているか知りたいので、プログラムを書く。

functions.php などに、コピー&ペーストできる形で書いてみる。

admin_print_scriptsというフックに引っ掛けて、管理画面のscriptタグを出力するところにJavaScriptを追加する。

JavaScriptで、キー押下イベントを監視して、投稿の保存の処理をする。

class My_Ctrl_S
{
    function __construct()
    {
        // ここでは準備まで
        // いろいろ始めるのは、plugins_loadedの後にする（簡単な処理はここに書いても動くけど）
        add_action('plugins_loaded', array($this, 'plugins_loaded'));
    }

    function plugins_loaded()
    {
        // 管理画面のscriptタグを出力するところにフックを仕掛ける
        // デフォルトのscriptタグ類は優先度20で入っているので、それより優先度を下げた
        // jqueryは読み込んでおいて欲しい（admin_enqueue_scripts使えといわれそうなところだが）
        add_action('admin_print_scripts',array($this, 'admin_print_scripts'), 100);
    }

    // scriptタグをechoする
    function admin_print_scripts()
    {
?>
<script>
jQuery(function($){
    //（公開前の）下書き保存か（公開済みの）更新ボタンを探す
    var b = $('input[type="submit"]#save-post, input[type="submit"]#publish').first();
    //ボタンがあれば、キーイベントを監視する
    if (b.length) {
        $(document).on('keydown', function(e) {
            //Ctrl+Sがtextareaかinput要素で押されたら、保存ボタンクリック
            if ((e.ctrlKey || e.metaKey) && e.which == 83
                        && (e.target.nodeName == 'TEXTAREA' || e.target.nodeName == 'INPUT')) {
                b.click();
                return false;
            }
        });
    }
});
</script>
<?php
    }
}
new My_Ctrl_S();

参考

Ctrl+S したい場合以外にも、同じような方法で管理画面にJavaScriptを追加できる。