プレビューボタンを押すのがめんどくさい
記事を書いているとどんどん下に伸びていきますね。プレビューするときには一度上までスクロールして、プレビューボタンを押し、確認して、また下までスクロールします。率直に言って面倒くさい。
プレビューボタンを画面下部に追加するプラグインなどもありましたが、それだけのためにプラグインを追加するのは気が進まない。
そこで、編集画面で「Ctrl+Enter」を押すとプレビュー画面が更新されるようにしてみました。そのうえでウィンドウを横並びにしておけばかなり効率よく記事作成を進めることができます。
実装
以下2ステップでOKです。
- キーイベントを受け付けるJavascriptファイルを任意の場所に設置
- 設置したJavascriptファイルをロードする処理をfunction.phpに追加
Javascriptファイルの配置
ファイルの配置先はどこでも構いません。
レンタルサーバでもDropBoxでも、インターネット上で読み込める場所ならなんでもOKです。WordPressと別のサーバにあってもOK。
jsファイルの内容は以下。
// keyevent.js
function keyDown(e) {
if(e.ctrlKey && e.key == 'Enter') { // ←ココがポイント！
preview_button = document.getElementById('post-preview');
if (preview_button){
preview_button.click();
}
}
}
document.addEventListener("keydown", keyDown);
3行目の判定式がポイントです。
今回は「Ctrl+Enter」で記事プレビューを行いたかったので、
e.ctrlKey && e.key == 'Enter'
としています。
他のキーでプレビューを行いたい場合、以下のように条件式の内容を編集してください。
ちなみに、keyCodeプロパティは2019年1月時点ですでにdeprecatedなので、使わないようにしましょう。
// alt+Enterにしたい
e.altKey && e.key == 'Enter'
// Ctrl+Pキーにしたい
e.ctrlKey && e.key == 'p'
// Ctrl+Shift+Pキーにしたい
e.ctrlKey && e.key == 'P'
functions.phpの編集
下記の内容を、functions.phpに追記します。
functions.phpは、ダッシュボードメニューから、「外観」→「テーマの編集」で開く画面から編集できます。
// functions.php(テーマのための関数)
function myadmin_script(){
// 記事編集以外の画面では読み込まないようにする
if ( 'post.php' != $hook && 'post-new.php' != $hook ) {
return;
}
// 配置したjsファイルのURLをqueueに追加する
wp_enqueue_script('wpmyscript', 'https://example.com/shortcut.js');
}
add_action('admin_enqueue_scripts', 'myadmin_script');
動作確認
記事の編集、新規作成、固定ページの編集のそれぞれでショートカットが動けば成功です。
動かない場合、jsファイルがキャッシュされている等が考えられます。動作確認・デバッグ中は、こまめにキャッシュクリアしましょう。
課題
プレビュー画面がわのスクロールが一番上まで戻ってしまいます。長い記事の終盤を編集しているとき、やや面倒です。
解決できたら追記予定です。
