WordPress 3.0から追加された機能のひとつにカスタム背景というサイトの背景を管理画面から変更するための機能がある。
この機能を有効にした際に表示される背景の設定画面はとてもよくできていて、background-position や background-repeat も簡単なチェックボックスで設定できるので、ぜひ有効にしたい。
使い方
使い方は非常に簡単。
- デフォルトのページの背景を style.css 等で body 要素に定義しておく。
- テーマファイルの functions.php に、add_custom_background(); という行を追加しておく。
以上で、以下のような管理画面が表示され、背景の設定が可能になる。
body 要素以外に適用するには？
今回、私たちが作成中のサイトでは、ページの上部にバーが表示されるため body 要素に背景を指定するには不都合が色々とあった。
そんな場合には、以下のようにコールバック関数を定義して、コールバック関数側で指定する要素を変えてやればいい。
add_custom_background('custom_background_callback');
上記の例では、custom_background_callback というのがコールバック関数の関数名になる。
あとは、以下のようにコールバック関数を用意して、そちらで任意の要素（以下の例では #wrap）に対して背景のスタイルを指定する。
function custom_background_callback() {
$background = get_background_image();
$color = get_background_color();
if ( ! $background && ! $color )
return;
$style = $color ? "background-color: #$color;" : '';
if ( $background ) {
$image = " background-image: url('$background');";
$repeat = get_theme_mod( 'background_repeat', 'repeat' );
$bg_repeat = array('no-repeat', 'repeat-x', 'repeat-y', 'repeat');
if (!in_array($repeat, $bg_repeat))
$repeat = 'repeat';
$repeat = " background-repeat: $repeat;";
$position = get_theme_mod( 'background_position_x', 'left' );
if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
$position = 'left';
$position = " background-position: top $position;";
$attachment = get_theme_mod( 'background_attachment', 'scroll' );
if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
$attachment = 'scroll';
$attachment = " background-attachment: $attachment;";
$style .= $image . $repeat . $position . $attachment;
}
echo "<style type=\"text/css\">\n";
echo "#wrap {\n";
echo trim( $style )."\n";
echo "}\n";
echo "</style>\n";
}
ちなみに、この関数のソースの元ネタは wp-includes/theme.php にある _custom_background_cb() という関数。
参考
- Function Reference/add custom background « WordPress Codex
- WordPress カスタム背景の使い方[WP3.0以降] |WordPressの使い方・インストールガイド
- WordPress 3.0でテーマに背景を設定する機能を追加する方法 | Lovelog+*