管理者としてログインしているときに印刷モードでレンダリングを表示すると、上部に余白がついているのがきになりました。
この余白は、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)](https://api.qrserver.com/v1/create-qr-code/?data=?size=200x200&data=https%3A%2F%2Fchiilabo.com%2F2023-07%2Fwordpress-remove-admin-bar-print-margin%2F)