サトリクのこだわりのモノ紹介

【超時間短縮】エディター上にプレビューボタンを配置する方法

エディター上にプレビューボタンを配置しようの画像

長い記事書いてると、プレビューボタンが毎回遠くてめんどくさい!なんとかならないのか!

オコジョ

サトリク

エディターの上にプレビューボタンをつければ、毎回毎回上にスクロールしなくても大丈夫だよ!

え!教えて!

オコジョ

完成図

 

before

 

after

今回は、エディター上にプレビューボタンを表示するやり方をご紹介します。エディターで記事を書いていると、何回もプレビューで確認しますよね。プレビューボタンがエディター上にありません。プレビューボタンを押すたびに集中執筆モードが解除されます。そんな悩みが、コピペ1回で解決できます。

エディター上にプレビューボタンを配置する手順書

STEP.1
コピーする
function add_custom_preview_button() {
?>
<script>
  (function($) {
    $('#wp-content-media-buttons').append('<a id="custom-preview" class="button">'+ "プレビュー" +'</a>');
    $(document).on('click', '#custom-preview', function(e) {
      e.preventDefault();
      $('#post-preview').click();
    });
  }(jQuery));
</script>
<?php
}
add_action( 'admin_footer-post-new.php', 'add_custom_preview_button' );
add_action( 'admin_footer-post.php', 'add_custom_preview_button' );
STEP.2
「外観>テーマエディター」を開く
編集画面で外観のテーマエディターを開きます。
STEP.3
function.phpを選択する
テーマのための関数(function.php)を選択します。
STEP.4
ペーストする

「function.phpへの追加は以下に」という記述の下にペーストしましょう。

何も書いていない場合は、一番下にペーストするのが良いでしょう。

STEP.5
コメントをつける

どのような記述かが分かるようにコメントをつけましょう。

コメント記述例

/*ここからエディター上にプレビューボタンを表示*/

〜〜処理〜〜

/*ここまでエディター上にプレビューボタンを表示*/

STEP.7
更新する

編集が終わったら、必ずファイル更新ボタンを押そう!

STEP.8
確認してみよう

ここまでのSTEPを踏んだらエディターに表示されているはずです。

サトリク

できた?

できたできた!最高の時間短縮だね!

オコジョ

まとめ

時間短縮することで、執筆のパフォーマンスを上げることはとても大切です。出来るだけ、無駄な時間を省き記事を書く時間を増やしましょう。
このブログでは、このように時間短縮術やカスタマイズなどの記事を書いていきます。記事を更新したら、Twitter(@satorikublog)でお知らせするのでフォローお願いします。

この記事のURLをコピーする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です