WordPressで見栄えの崩れや誤字脱字等がないかを確認するために使用するプレビューボタンを、エディタの上にある「メディアを追加」ボタンの横に追加する方法です。
管理画面をカスタマイズしていてプレビューボタンが離れた場所にあるとか集中執筆モードを利用している場合などにも、そこまでマウスを動かすことなくプレビューボタンを押すことができます。
上のキャプチャのように「メディアを追加」ボタンの横に新たにプレビューボタンを設置する方法です。
実装には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' );
デフォルトでエディタの上に表示されている「メディアを追加」ボタンの部分にjQueryの.append()
を使って新しくボタンを追加し、その追加したボタンをクリックするとデフォルトで用意されているプレビューボタンが動作するというものになります。
ボタンに表示されるテキストはデフォルトのプレビューボタンの文字列を取得して表示しており、新規追加時には「プレビュー」、変更時などでは「変更をプレビュー」のように、デフォルトの文字列と同様に状態によって変更されるようにしています。
もし、好きな文字列にしたいという場合は.append()
の中を変更すれば任意の文字列に変更できます。
今回は設置したいと相談された箇所だったのでエディタの上にある「メディアを追加」ボタン横に表示させましたが、同じようにすれば他の場所に設置したり、その他の機能を持つボタンを設置したりもできると思います。