WordPress3.0から搭載された「カスタムヘッダー」と「カスタム背景」の実装について解説します。
仕組み
カスタムヘッダーやカスタム背景を設定した場合、wp_head アクションがカスタムCSSを出力します。
それによってディフォルトCSSは上書きされます。
確認
wp_head アクションがきちんと記述されていることを確認してください。
これがないと動きません。
</head> の直前に記述しておくのが良いでしょう。
> header.php
<!-- 省略 --> <?php wp_head(); ?> </head>
カスタムヘッダー
管理画面からヘッダー画像を設定できる機能です。
> functions.php
define('HEADER_TEXTCOLOR', 'ffffff'); define('HEADER_IMAGE', '%s/images/default_header.png'); define('HEADER_IMAGE_WIDTH', 900); define('HEADER_IMAGE_HEIGHT', 360); define('NO_HEADER_TEXT', true ); // ヘッダーにテキストを表示したくない場合は記述
カスタムヘッダーをテンプレート内で出力する
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
functions.php内でスタイルとして出力する
// サイト用に出力するCSS function header_style() { ?><style type="text/css"> #header { background: url(<?php header_image(); ?>); } </style><?php } // 管理画面用に出力するCSS function admin_header_style() { ?><style type="text/css"> #headimg { width: <?php echo HEADER_IMAGE_WIDTH; ?>px; height: <?php echo HEADER_IMAGE_HEIGHT; ?>px; } </style><?php } add_custom_image_header('header_style', 'admin_header_style');
add custom image header/WordPress Codex 日本語版
カスタム背景
管理画面から、背景色、背景画像を設定できる機能です。
> functions.php
add_custom_background();
Comments
[…] WordPress カスタムヘッダーとカスタム背景 の応用編。 […]