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

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

概要

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

環境

WordPress バージョン 4.2.2

理由

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

管理メニューバーが！！！（ﾄﾞｰﾝ

この32ｐｘって、メニューの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
}

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

てな訳で、次のファイル

/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' => '__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を非表示

最後にひとこと

32ｐｘがうらめしい