【WordPress 作業効率化】ショートカットキーでプレビュー/更新ボタンを押せるようにする方法

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

という方のお悩みを解決します！

ショートカットキーを自作する

プレビューボタンと更新ボタンをショートカットキーで押せるようにするには、

以上、2点のカスタマイズが必要となります！

記事を編集する上でプレビューボタンを頻繁に使用する方と更新ボタンを多用する方がいらっしゃると思うのでそれぞれ紹介させていただきます。

なお、ショートカットキー設定のスクリプトを記述するJSファイルを読み込むコードは共通なので以下を参考になさってくださいまし。

function myadmin_shortcut(){
  // 記事編集以外の画面では読み込まないようにする
  global $hook_suffix;
  if ( 'post.php' != $hook_suffix && 'post-new.php' != $hook_suffix ) {
    return;
  }
  wp_enqueue_script('wpmyscript', 'JSファイルのパス URL');
}
add_action('admin_enqueue_scripts', 'myadmin_shortcut');

JSファイルのパスは、例えばお使いのテーマがSANGOの場合、以下のようになるかと思います。

wp_enqueue_script('wpmyscript', 'https://ドメイン名/wp-content/themes/sango-child/JSファイル名');
}

プレビューボタンを押すショートカットキー

「control + Enter」でプレビューボタンを押すようにするスクリプトは以下となります！

＊shortcut-preview.jsのような名前でファイルを作成し、themes/子テーマ名/直下に配置してあげましょう。

function keyDown(e) {
  if(e.ctrlKey && e.key == 'Enter') {
    preview_button = document.getElementById('preview');
    if (preview_button){
      preview_button.click();
    }
  }
}
document.addEventListener("keydown", keyDown);

重要ポイントは、ここ！

e.ctrlKey && e.key == 'Enter'

上記の左辺が「control + Enter」を意味しているのです！

そんでもって、ここも大事なポイント。

preview_button = document.getElementById('preview')

この記述でIDがpreviewの要素を取得して変数に代入！

＊Google Chromeのデベロッパーツールで記事編集画面のプレビューボタンや更新ボタンの要素についているIDを確認することができます。

そして以下で「その要素をクリックさせる」というイベントを発火しています！

preview_button.click();

更新ボタンを押すショートカットキー

「control + Enter」で更新ボタンを押すようにするスクリプトは以下となります！

＊shortcut-update.jsのような名前でファイルを作成し、themes/子テーマ名/直下に配置してあげましょう。

function keyDown(e) {
  if(e.ctrlKey && e.key == 'Enter') {
    publish_button = document.getElementById('publish');
    if (publish_button){
      publish_button.click();
    }
  }
}
document.addEventListener("keydown", keyDown);

上述したプレビューボタンとほぼ一緒です！

異なる点はgetElementByIdで取得する要素が「publish」つまり更新ボタンであることのみ！

お世話になった記事

大変お世話になりやした！！

神記事ありがとうございました(^o^)//

まとめ

うまくカスタマイズできたでしょうか？

僕と同じ様にブログと毎日向き合っている方は何度も何度もプレビューボタンと更新ボタンを押すと思います。

その毎回繰り返すルーティーンを0.5秒でも縮められたら長い目で見るとものすごい効率化に繋がると思うのでぜひ今回の記事で紹介した方法でオリジナルのショートカットキーを作って快適なWordPressライフを送ってくださいまし〜！

「もっともっとWordPressをカスタマイズして自分色に染め上げたい！」

という方は以下の記事も目を通してみてください〜

【WordPress】管理画面の配色を自分オリジナルにカスタマイズする方法

【SANGOカスタマイズ】highlight.jsでソースコード表示をかっこよくする方法