WordPressの自作テーマの各ページの上にある32pxに悩まされた

2015年7月16日

※2015/07/17に訂正があります。

概要

WordPressの自作テーマを作成してログインすると、各ページの最上位に32pxの隙間が開いてしまう。

 

環境

WordPress バージョン 4.2.2

 

理由

今から考えると「ログイン」してる時、というのがポイントでした。
デフォルトテーマの「twentyfifteen」だとログインしてる時に出てくるじゃないですか、

管理メニューバーが!!!(ドーン

この32pxって、メニューのheightと一緒じゃないですか!
さて何故管理メニューが出てこないのか・・・

/wp-includes/admin-bar.php
/wp-includes/class-wp-admin-bar.php

 

この2つのファイルが怪しいクサイです。

 

調査

まずは

/wp-includes/admin-bar.php
// 864行
function wp_admin_bar_header() { ?>
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<?php
}
// 874行
function _admin_bar_bump_cb() { ?>
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
html body { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
html body { margin-top: 46px !important; }
}
</style>
<?php
}

 

はい、居ました。
32pxの原因達が居ました。
でもこのファイルには、出力する方法が書いてないですね~

てな訳で、次のファイル

/wp-includes/class-wp-admin-bar.php
// 47行
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' =&gt; '__return_false' ) );
*/
$admin_bar_args = get_theme_support( 'admin-bar' );
$header_callback = $admin_bar_args[0]['callback'];
}

ん~、見つけましたね。

 

current_theme_supports( 'admin-bar' ) 

これが出力するか判断してるっぽいですね。

 

解決

そもそも下の関数が何をやっているかというと

current_theme_supports() 

与えられたテーマ機能のテーマのサポートがあるかどうかを確認します。

Wordress codex 参照

 

という訳なので、下記の関数を使います。

add_theme_support( ) 

テーマやプラグインが特定のテーマ機能をサポートすることを許可します。
テーマから呼ばれる場合、動作させるためにはテーマのfunctions.phpファイルの中で指定されなければなりません。

Wordress codex 参照

という訳で function.php に下記の設定を行います。

add_theme_support('admin-bar');

そしてテーマファイルに下記のものを記載します。

get_footer(); // 管理メニューのHTMLが出力されます。

 

これで管理メニューが表示されるはずです。

ちなみに

そもそも管理メニューを表示したくないよっていう場合は、
下記の設定を function.php に試して下さい。

add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) );
add_filter( 'show_admin_bar', '__return_false' );// 管理バーのHTMLを非表示

最後にひとこと

32pxがうらめしい

 

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-WordPress