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

ショートカットキーで更新/プレビューボタンを押せるようにするカスタマイズ方法

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • WordPressで記事執筆中、いちいちプレビューボタンや更新ボタンをクリックするのがめんどくさい
  • プレビューボタンや更新ボタンをショートカットキーで押せるようにしたい
  • WordPressでの記事作成作業を効率化させてストレスネスで生産性の高いWordPressライフを送りたい

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

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

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

  • ショートカットキーを設定するスクリプトの作成
  • そのファイルを子テーマのfunctions.phpで読み込む

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

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

ショートカットキーについて
この記事では、「control + Enter」というショートカットキーでそれぞれボタンをクリックさせられるようにカスタマイズしていきます。

 

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

子テーマのfunctions.php
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の場合、以下のようになるかと思います。

子テーマのfunctions.php
wp_enqueue_script('wpmyscript', 'https://ドメイン名/wp-content/themes/sango-child/JSファイル名');
}

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

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

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

ショートカットキー設定のJavascript
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/子テーマ名/直下に配置してあげましょう。

ショートカットキー設定のJavascript
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の管理画面の配色を自分オリジナルにカスタマイズ【WordPress】管理画面の配色を自分オリジナルにカスタマイズする方法 【SANGOカスタマイズ】highlight.jsを導入する方法【SANGOカスタマイズ】highlight.jsでソースコード表示をかっこよくする方法

1 Comment

現在コメントは受け付けておりません。