平社員日記

【解決】WordPressエディタに「プレビュー」ボタンのショートカット作成

対象読者


WordPressで記事を書くのに少しずつ慣れてきたのですが、記事のデザインに凝りたい場合、下記の作業を何回も延々と繰り返す必要があります。
1.エディタでテキストを更新
2.「プレビュー」ボタンを押して見栄えを確認

この「プレビュー」ボタンを毎回押すのがとても面倒です。

ココがダメ


記事が長くなると、エディタ画面が下にスクロールし、「プレビュー」ボタンが隠れてしまいます。
その都度、画面を上にスクロールして、「プレビュー」ボタンを押す必要があります。

調べてみると、テーマを編集すると簡単にショートカットキーを割り当てる方法を発見し、まとめました。

この記事はこんな方におすすめ

  1. WordPressで記事を編集するとき、プレビューボタンを押すのが面倒なので解決したい
  2. テーマエディタを使ったことが無い初心者
  3. テーマエディタで、WordPressの仕組みを理解したい

myscript.jsの作成


作業は必ず以下の手順(myscript.jsの作成→functions.phpへの追記)通りに行ってください。
myscript.jsを作成し、アップロードします。
アップロードフォルダは「functions.php」と同じフォルダです。
筆者の環境(Affinger利用)だと以下になります。
/wp/content/themes/affinger5-child/myscript.js
それぞれの関数、コードが何を意味しているかコメントを記載しますので、WordPressの動きを理解しながら作業してください。

//nakamuraman add start 2020.01.31

//キーボードを押したとき(KeyDown)のイベントを受け取る関数を定義します。
function KeyDownFunc(e){
  //コントロールキー+Enterキーが押された場合、
  if (e.ctrlKey && e.key == 'Enter'){
      //プレビューボタンのIDを取得します。
      var pvID = document.getElementById('post-preview');
      if (pvID){
        //プレビューボタンをクリックする命令
        pvID.click();
      }
  }
}

// キーボードを押したときに実行されるイベント
document.addEventListener("keydown" , KeyDownFunc);

//nakamuraman add end 2020.01.31

 

functions.phpへの追記


次に、「functions.php」に以下のコードを追加します。
4行目までのソースは環境によって、あったり無かったりすると思いますが、5行目以降のソースを「functions.php」に追加してください。
最後にPHPのタグを閉じる「>」を追加してしまわないよう注意してください。「functions.php」では不要です。

<?php
if ( !defined( 'ABSPATH' ) ) {
exit;
}

//nakamuraman add start 2020.01.31

//自作のJavaScriptファイル(myscript.js)を管理画面に読み込むための関数を定義します。
function myadmin_script(){
  wp_enqueue_script('wpmyscript', get_stylesheet_directory_uri().'/myscript.js');
}

//上で定義した関数「myadmin_script」を管理画面のアクション「admin_enqueue_scripts」に追加します。
add_action('admin_enqueue_scripts', 'myadmin_script');

//nakamuraman add end 2020.01.31

動作確認


これで、テーマのカスタマイズは完了です。編集画面をリロードして、Ctrlキー+Enterキーを押して、プレビュー画面が開くか確認してみてください。

-平社員日記

Copyright© ナカログ , 2020 All Rights Reserved.