管理画面にCSSを適用する方法を調べたついでに、少し余計なことをしてみました。

やったこと

• 管理画面に「ページ先頭へ戻る」リンクを付ける
• ボタンぽくCSSを適用する

の2点。

プラグインを入れれば済む話ですが、管理画面をいじる練習台に。

ソース1

//管理画面にtotopを追加する
add_action ( 'admin_menu', 'add_totop' );
function add_totop(){
	add_menu_page('Top', 'Top', 'manage_options', 'link', 'link');
}
function set_totop_url() {
//urlを設定
$link_url = '#wpbody-content';
?>
<script type="text/javascript">
	jQuery( function( jQuery ) {
		jQuery("#toplevel_page_link a").attr("href","<?php echo $link_url; ?>");
	} );
</script>
<?php
}
add_action('admin_footer', 'set_totop_url');

functions.phpに追加するだけ。

ただ単に、メニューを追加して、リンクを設定してあるだけです。

「管理画面にメニューを追加」「管理画面のカスタマイズ」とかの記事でよく見かけるヤツです。

リンク先

「#wpbody-content」としてますが、これはベストアンサーじゃないです。

管理画面は、表示ページによってHTMLが結構変わります。

いくつかのプラグインの設定ページなどで試し、ページ先頭「に近いところ」に戻れるリンク先を探しました。

きっちり先頭に戻すには、jsを使うことになると思います。

ソース2

こっちが本題。

これもfunctions.phpに追加します。

<style></style>の間はただのCSSなので、好き勝手に書き換えます。

//管理画面の追加CSS
function my_admin_style() {
	echo '<style>
#adminmenu #toplevel_page_link.menu-top	{
	position: fixed;
	right: 1rem;
	bottom: 1rem;
}
#adminmenu #toplevel_page_link.menu-top a	{
	color: #FFF;
	display: block;
	padding: 0.2rem 0.6rem 0.3rem;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 0.2rem;
}
#adminmenu #toplevel_page_link.menu-top .wp-menu-name	{
	text-align: center;
	padding: 0;
}
#adminmenu #toplevel_page_link.menu-top .wp-menu-image	{
	width: auto;
	height: auto;
}
#adminmenu #toplevel_page_link.menu-top .wp-menu-image:before	{
	padding: 0;
}
#adminmenu #toplevel_page_link.menu-top a:visited, #adminmenu #toplevel_page_link.menu-top a:hover	{
	color: #FFF;
}
#adminmenu #toplevel_page_link.menu-top .dashicons-admin-generic:before {
	content: "\f343";
}
#adminmenu #toplevel_page_link.menu-top .dashicons-admin-generic:before, #adminmenu #toplevel_page_link.menu-top a:focus {
	color: #FFF;
}
	</style>'.PHP_EOL;
}
add_action('admin_print_styles', 'my_admin_style');

この例では、追加したメニューを強引に位置固定、ボタン風表示にしています。

ボタン画像は読み込むのが面倒だったので特殊文字。

とにかくココにCSSを書いていけば適用されるので、自分で作った設定画面などを整えたい場合に重宝します。