管理画面に「画面上部へ戻る」ボタンを追加する方法

WordPressに限らず、そのページの上部へ移動するには「マウスのスクロールホイールをひたすらグリグリする」「スクロールバーをつかんで上へ移動させる」「キーボードのHOMEボタンを押す」といった方法があり、最後の方法が一番手っ取り早いもののあまり知らない方も多いのではないでしょうか。

私自身WordPressの管理画面で何かを操作しているとき、結構画面の上へ戻りたい機会が多いのですが、ついついHOMEボタンの存在を忘れてマウスをガリガリ．．でホイールが壊れるという体験を結構繰り返してきました。

そこで管理画面の右下に、よくサイトの閲覧画面側で見かける「ページの上部へ戻る」ボタンを追加したら地味に使いやすくなるのでは？と考え、実装したコードを公開しておきます。

管理画面へ「画面上部へ戻る」ボタンを追加するコード

リンクターゲットとなるDIVタグを追加する

機構としては内部リンクへの移動ボタンを設置して、クリックされたらそこへ移動するというものなのですが、管理画面の一番上の部分にリンクターゲットがないため、以下のコードを使ってbodyタグのすぐ下に「pwcn-admin-page-head」というIDを持つDIVタグを出力します。

/* ターゲットとなるIDを持つdivタグを出力 */
function pwcn_add_page_head_div_to_admin_body() {
	if ( is_admin() ) {
		$custom_div_html = '<div id="pwcn-admin-page-head"></div>';
        
		?>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$('body').prepend('<?php echo wp_kses_post($custom_div_html); ?>');
			});
		</script>
		<?php
	}
}
add_action( 'admin_footer', 'pwcn_add_page_head_div_to_admin_body' );

ボタンの表示とスタイル

前項でリンクターゲットができたので、後はそこに向けてリンクさせるボタンを追加するだけです。

以下のコードを追加すると、各管理画面の右下に背景が黒で矢印が白のボタンが表示されるようになります。

/* ボタンを表示 */
/* ブロックエディター・サイトエディターでは不要なので非表示 */
function pwcn_admin_top_scroll_content_init(){
?>
<button class="pwcn-admin-to-scroll-button">
	<a href="#pwcn-admin-page-head"><span class="dashicons dashicons-arrow-up-alt"></span></a>
</button>
<style>
button.pwcn-admin-to-scroll-button {
	position: fixed;
	right: 0px;
	bottom: 0px;
	color: #fff;
	background: #000;
	border: 1px solid #fff;
	padding:8px;
}
	
	body.post-php button.pwcn-admin-to-scroll-button,
	body.site-editor-php button.pwcn-admin-to-scroll-button,
	body.post-new-php  button.pwcn-admin-to-scroll-button{
		display:none;
	}

	button.pwcn-admin-to-scroll-button a{
		color:#fff;
		text-decoration:none;
	}

	button.pwcn-admin-to-scroll-button a:hover{
		filter: brightness(0.7);
	}

	html{
		scroll-behavior: smooth;
	}

</style>
<?php
}
add_action('admin_footer','pwcn_admin_top_scroll_content_init');

両方のコードを追加したら、ダッシュボードなどを開いてボタンが表示されるか、ある程度下へスクロールさせた後でボタンをクリックしたら画面上部に移動するかを確認してください。

機能しない場合はブラウザキャッシュのクリア「Ctrl+F5」をしてみてください