wordpressの「更新」ボタンにショートカットキーを割り当てる方法

Question

お世話になっております。

件名の通り、wordpressで「更新」ボタンにショートカットキー（「ctrl+s」など）を割り当てる方法を教えていただけますと幸いです。

プラグインはできれば使いたくありませんが、難しそうならプラグインでもOKです。

よろしくお願いします。

Answer 1

下記URLを参考に
https://retu27.com/wordpress_preview_shortcutkey.html

1.『キーを検知して、「ctrl+s」を押したら、「更新」のクリックイベントを発火させる』というJSを作成
2.管理画面で、指定のJSソースを読み込ませる処理を追加

でできると思います。

---追記---
1番で
・「Ctrl+Enter」から「Ctrl+S」に変更
・プレビューボタンのIDから更新ボタンのIDに変更
これらを対応したものが、下記ソースです。

「更新」ボタンのID名が、バージョンによって変わることはないような気もしますが、念のためIDを調べておいてください。
（ちなみに、自分が確認したWPのバージョンは4.8.5です。）

管理画面のアクションなので、少しこわいですね。
プレビューボタンだからできない、というぐらいなら、まずはJSを勉強して、web上に落ちてるコードを理解できるようになってくださいね。
ここを見てみて実装してみたけど、できなかったので他の方法を探しています、でもいいのですが……。

function KeyDownFunc(e){
  if (e.ctrlKey && e.keyCode==83){/* S:83 */
      var elm3 = document.getElementById('publish');/* publish:更新ボタンのID(4.8.5) */
      if (elm3){
        elm3.click();
      }
  }
}
// イベントリスナーに対応している
if(document.addEventListener){
  // キーボードを押したときに実行されるイベント
  document.addEventListener(“keydown” , KeyDownFunc);
// アタッチイベントに対応している
}else if(document.attachEvent){
  // キーボードを押したときに実行されるイベント
  document.attachEvent(“onkeydown” , KeyDownFunc);
}

また、

var elm3 = document.getElementById('publish');/* publish:更新ボタンのID */
if (elm3){
	elm3.click();
}

の部分は、jQueryで実装するなら

if($('#publish').length > 0){
	$('#publish').trigger('click');
}

でもいいです。

Comments

[bah91929]

ありがとうございます。
ただ、そのJSが作成できません^^;
リンク先の記事はプレビューボタンを押すものでして。。

[bah91929]

他の方、解決方法をご存知でしたら教えてくださると幸いです。

[bah91929]

なるほど、実装して動きを見てみます。
ありがとうございました。