WordPress:投稿エディタの上にプレビューボタンを追加する方法

WordPress:投稿エディタの上にプレビューボタンを追加する方法

知人に実装可能か相談されてやってみたので備忘録。
WordPressで投稿を公開する際、多くの人がプレビューで見栄えの崩れや誤字脱字等がないかを確認するために表示確認をすると思いますが、そのプレビューボタンをエディタの上にある「メディアを追加」ボタンの横に追加する方法です。
管理画面をカスタマイズしていてプレビューボタンが離れた場所にあるとか集中執筆モードを利用している場合などにも、そこまでマウスを動かすことなくプレビューボタンを押すことができます。

投稿エディタの上にプレビューボタンを追加

上のキャプチャのように「メディアを追加」ボタンの横に新たにプレビューボタンを設置する方法です。
実装にはJavaScript(jQuery)を用いる形でfunctions.phpに下記のように記述します。

functions.php

function add_custom_preview_button() {
?>
<script>
  (function($) {
    $('#wp-content-media-buttons').append('<a id="custom-preview" class="button">'+ $('#post-preview').text() +'</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' );

デフォルトでエディタの上に表示されている「メディアを追加」ボタンの部分に.appendを使って新しくボタンを追加し、その追加したボタンをクリックするとデフォルトで用意されているプレビューボタンが動作するというものになります。
ボタンに表示されるテキストはデフォルトのプレビューボタンの文字列を取得して表示しており、新規追加時には「プレビュー」、変更などの時には「変更をプレビュー」というように、デフォルトの文字列と同様に状態によって変更されるようにしています。
もし、好きな文字列にしたいという時は.appendの中を変更すれば任意の文字列に変更できます。

今回は設置したいと相談された箇所だったのでエディタの上にある「メディアを追加」ボタン横に表示させましたが、同じようにすれば他の場所に設置したり、その他の機能を持つボタンを設置したりもできると思います。


WordPressで管理画面に関するその他のカスタマイズは以下にまとめているので、興味ある方はこちらもご覧ください。

Close the search window,
please press close button or esc key.