【スポンサーリンク】

[WordPress] 印刷時に管理者バー分の余白があるのが気になる(admin-bar)

追記予定の注意書き

この項目は、随時追記します。なにかのヒントになれば嬉しいです。

管理者としてログインしているときに印刷モードでレンダリングを表示すると、上部に余白がついているのがきになりました。

この余白は、html タグについているようです。
どうも、管理者バーの分だけ画面全体を下にずらすのが目的のようです。

WordPressのソースコードを検索すると、この余白が _admin_bar_bump_cb で設定されていることがわかりました。

function _admin_bar_bump_cb() {
	$type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
	?>
<style<?php echo $type_attr; ?> media="screen">
	html { margin-top: 32px !important; }
	@media screen and ( max-width: 782px ) {
		html { margin-top: 46px !important; }
	}
</style>
	<?php
}

この コールバック関数は、admin-barの初期化処理で呼ばれます。

	public function initialize() {
		$this->user = new stdClass();

                // (中略…)


		if ( current_theme_supports( 'admin-bar' ) ) {
			/**
			 * To remove the default padding styles from WordPress for the Toolbar, use the following code:
			 * add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) );
			 */
			$admin_bar_args  = get_theme_support( 'admin-bar' );
			$header_callback = $admin_bar_args[0]['callback'];
		}

		if ( empty( $header_callback ) ) {
			$header_callback = '_admin_bar_bump_cb';
		}

		add_action( 'wp_head', $header_callback );

		wp_enqueue_script( 'admin-bar' );
		wp_enqueue_style( 'admin-bar' );

		do_action( 'admin_bar_init' );
	}

しかし、コメントをみると変更できそうです。

To remove the default padding styles from WordPress for the Toolbar, use the following code:
WordPress からツールバーのデフォルトのパディングスタイルを削除するには、次のコードを使用します。
add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) );

実際に、コールバック関数を設定して、管理者バーを下に移動している情報がありました。

//アドミンバーの表示スペース確保の為のコールバック関数削除
add_theme_support('admin-bar', array('callback' => '__return_false'));

//アドミンバーを下に配置
function mv_admin_bar() {
  echo '

  body {
    padding-bottom: 30px;
  }
  body.admin-bar #wphead {
    padding-top: 0;
  }
  body.admin-bar #footer {
    padding-bottom: 30px;
  }
  #wpadminbar {
    top: auto !important;
    bottom: 0;
    position: fixed;
  }
  #wpadminbar .quicklinks .menupop ul {
    bottom: 30px;
    position: fixed;
  }
  ';
}
add_action('admin_head', 'mv_admin_bar');
add_action('wp_head', 'mv_admin_bar');

自分の場合は、html の margin-top だけを @media screen に明示的に限定しました。

/** 印刷時に管理者バー分の余白があるのが気になる 2023-07-19*/
add_theme_support('admin-bar', array('callback' => '__return_false'));

function remove_admin_bar_margin() {
	$type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
	?>
<style<?php echo $type_attr; ?> media="screen">
        @media screen {
	    html { margin-top: 32px !important; }
        }
	@media screen and ( max-width: 782px ) {
		html { margin-top: 46px !important; }
	}
</style>
	<?php
}
add_action('admin_head', 'remove_admin_bar_margin');
add_action('wp_head', 'remove_admin_bar_margin');

ところが、これだと管理バーがない時にも余白がついてしまいました。
管理者権限でログインしているかどうか判断せず、コールバック関数がセットされてしまっているのです。

if( is_admin_bar_showing()) {
	add_theme_support( 'admin-bar', array( 'callback' => 'my_adminbar_css' ) );
}
function pmgarman_adminbar_css() { ?>
	html {
		margin-top: 60px !important;
	}
	
	* html body {
		margin-top: 60px !important;
	}
	
	@media screen and ( max-width: 782px ) {
		html {
			margin-top: 74px !important;
		}
		
		* html body {
			margin-top: 74px !important;
		}
	}
<?php }

ただし、is_admin_bar_showingは、functions.phpでは反応しません。
initのタイミングでチェックしました。

/** 印刷時に管理者バー分の余白があるのが気になる 2023-07-19*/
add_action( 'init', function() {
	if( is_admin_bar_showing()) {
   	add_theme_support('admin-bar', array('callback' => 'remove_admin_bar_margin'));
	}	
});

function remove_admin_bar_margin() {
	$type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
	?>
<style<?php echo $type_attr; ?> media="screen">
@media screen {
	html { margin-top: 32px !important; }}
	@media screen and ( max-width: 782px ) {
		html { margin-top: 46px !important; }
	}
</style>
	<?php
}

こちらもどうぞ。

QRコードを読み込むと、関連記事を確認できます。

[WordPress] 印刷時に管理者バー分の余白があるのが気になる(admin-bar)
【スポンサーリンク】
タイトルとURLをコピーしました