【作業効率化】ワードプレスのプレビューボタン押すのめんどくさくない？

この記事はこんな人におすすめです。

ワードプレスを使っている。
デザイン確認はPCでやる
プレビューボタン押すのめんどくさい人

ワードプレスのプレビューボタンをもう押したくない
プレビューボタンのショートカットキーはない
プレビューボタンにショートカットキーを割り当てたい
プレビューにショートカットキーを割り当て

手順1.javascriptファイル作成
手順2.javascriptファイルをサーバに配置
手順3.functions.phpに追記
手順4.動作確認をする
実装するうえで参考にさせていただいたサイト

プレビューボタン押さなくていいのめっちゃ楽です。

ワードプレスのプレビューボタンをもう押したくない

タイトルの通りなんだけど、
ワードプレスでプレビュー押すの

めんどくさくないですか？

レイアウト確認を細かくするタイプの方ならわかってくれると思うんだけど

ぼくはとてもめんどくさいです。

自分の場合は、
スマホから読みやすいように改行をいれてるときや
デザインを整えているときにプレビューで確認しまくります。

下の画像のような感じでやっています。

プレビューボタン押すの

めっちゃめんどくさくない！？

プレビューボタンを押すためだけに、
エディタから画面を上までスクロールする。

上にスクロールして、
プレビューボタンを押したら
直前にどこの文章を編集・修正していたか分からなくなる。

直前の編集・修正していた箇所を探す？

クソめんどくさない！？？

伝わりやすいように箇条書きにしてみる。

エディタで改行部分を修正
一番上までスクロールする
プレビューボタンを押す
プレビューでレイアウト確認
脳内(もう少し改行位置ずらそう)
下にスクロールしながら修正部分探す
あれ？どこいった？ってなる。

クッソめんどくさくない？

3～5は仕方ないけど、

2と6のスクロールと

7の探す時間は無駄でしかない。

時間がもったいないよ俺。

一つ前の記事かいてるときにずっと
プレビュー押すためのスクロールがだるい！

って思ってたけども！

毎回、編集箇所わかんなくなってたら、
時間もかかるし集中力も途切れるよね。

プレビューボタンのショートカットキーはない

記事の保存は「Ctrl + s」でやってくれるみたいだから

きっとプレビューのショートカットもあるだろうと思ったけど

ないみたいです！

プレビューボタンにショートカットキーを割り当てたい

一つ前の記事で何回押したかわかんないので、なんとかしてプレビューボタンをショートカットキーで押せるようにしたいと思いました。

しかし自分は、フロント系(画面周り)の
エンジニアではないので、
javascriptとかphpは苦手なのです。

って思いながらグーグル検索していたら、
わかりやすいサイトがありました！

参考にして実装させてもらおう。

プレビューにショートカットキーを割り当て

ぼくの場合はjavascriptとphpの経験がほぼないのと、
最初に参考にしたサイトの情報のみだと上手くいかなかったので、
めちゃくちゃ時間がかかりましたが

この後の手順みていただければ、
ぼくと同じ環境だと1時間程でできると思います。

つめまるの環境

・ブラウザ：google chrome
・サーバー：エックスサーバー
・テーマ　：JIN（の子テーマ）

手順1.javascriptファイル作成

デスクトップ画面で右クリックして、新しいテキストを作成する。

下記のコードをコピーして貼り付けてください。

ファイル名：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);

名前を付けて保存しましょう。
文字化けが怖いので、自分は文字コードは「UTF-8」にしています。

手順2.javascriptファイルをサーバに配置

エックスサーバーの画面で説明します。
※他のサーバーをお使いの方すみません。

エックスサーバーのインフォパネルにログインして「ファイル管理」を開いてください。

「自分のサイト名」⇒「public_html」⇒「wp-content」⇒「themes」⇒「jin-child」まで移動。

javascriptファイルをサーバにアップロードしましょう。

※配置場所は今回の説明での例です。別の場所でもかまいません。

今回の配置場所：
https:/自分のサイト名/public_html/wp-content/themes/jin-child/keyevent.js

※念のため、正しく配置できているかをブラウザでアクセスして確認しましょう。
https:/自分のサイト名/wp-content/themes/jin-child/keyevent.js

あれ？「public_html」なくなった？

って思うかもしれませんがそういうものみたいです。

このようになっていればjavascriptファイルの配置はOKです。

つめまる

ぼくがやったときは「public_html」いらないのにしばらく気づかなくて、表示されなくてつらかったです。

※1 ここではわかりやすいようにエックスサーバーの
ファイル管理画面で説明していますが、
FTPツールを導入済みの方はそちらからでも可能です。

※2 パスでみると「public_html」がなくなりますが、ワードプレスがそういう仕様？みたいです。
正：https:/自分のサイト名/wp-content/themes/jin-child/keyevent.js
誤：https:/自分のサイト名/public_html/wp-content/themes/jin-child/keyevent.js

手順3.functions.phpに追記

以下のコードを、テーマのための関数 (functions.php)に追加しましょう。

/**
 * javascriptファイルの読み込み設定を追加する。
 */
function myadmin_script(){
global $hook_suffix;

// 記事編集以外の画面では読み込まないようにする
if ('post.php' != $hook_suffix && 'post-new.php' != $hook_suffix ) {
return;
}

// 配置したjsファイルのURLをqueueに追加する
wp_enqueue_script('wpmyscript', 'https://自分のサイト名/wp-content/themes/jin-child/keyevent.js');
}
add_action('admin_enqueue_scripts', 'myadmin_script');