WordPressテーマの作り方 » カスタム背景を設置する

1. カスタム背景とは？

カスタム背景（カスタムバックグラウンド、Custom Background）とは、サイトの背景色や背景画像をダッシュボードから自由に変更できるようにする仕組みです。

サイト運営者≠テンプレート編集者の場合に便利な機能です。

カスタム背景で背景画像を変更したサイト

2. カスタム背景を設置する

カスタム背景を動作させることができるように、テーマをカスタマイズします。

デフォルト背景画像を用意する

デフォルトの背景画像を用意します。画像ファイル（wall-pic.png）を、テーマフォルダにアップロードします。ここでは、下記フォルダに入れました。

/{theme-folder}/img/wall-pic.png

補足：デフォルトの背景画像は、不要なら用意しなくてもOK。

functions.phpを編集する

カスタム背景の機能を有効にし、背景色や画像のデフォルト値を指定します。

functions.php

$custom_background_defaults = array(
        'default-color' => 'eef5ee',
        'default-image' => get_bloginfo('template_url') . '/img/wall-pic.png',
);
add_theme_support( 'custom-background', $custom_background_defaults );

前回記事（カスタムヘッダーを設置する）と同じように、add_theme_support関数を使って、カスタム背景の機能をONにします。

add_theme_support( 'custom-background' );

カスタム背景の動作を決める方法も、カスタムヘッダーと同様の方法になります。第２引数に、各オプション値を指定した連想配列を渡します。今回は、下記２点を指定します。

背景色のデフォルト値

RGB16進数で指定します。シャープ（#）は不要です。

デフォルトの背景画像へのファイルパス

先ほど、テーマフォルダ内に用意した画像へのファイルパスを指定します。ファイルパスは、テーマフォルダのURLをget_blog関数で取得して、テーマフォルダから画像ファイルへの相対パスを繋げて指定します。

get_bloginfo('template_url') . '/img/wall-pic.png'

header.phpを編集する

WordPressのヘッダー情報を出力するようにします。

header.php

<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
・・・

カスタム背景を反映させるために、wp_head()関数と、body_class()関数を挿入しました。

wp_head()関数

HTMLのヘッダー部（<head>〜</head>）に挿入するコードを出力するための、WordPress関数です。metaタグや、linkタグ、styleタグなどを出力します。カスタム背景の機能がONになっている場合、背景のスタイル情報を自動的に出力してくれます。

出力例

<style type="text/css" id="custom-background-css">
body.custom-background {
background-color: #eef5ee;
background-image: url('http://localtest.net/wp-content/themes/training02-09/img/wall-pic.png');
background-repeat: repeat;
background-position: top left;
background-attachment: fixed;
}
</style>

body.custom-backgroundを指定して出力されます。

body_class()関数

表示ページについてclass属性を出力するWordPress関数で、通常bodyタグに挿入して使います。例えば、トップページに「最新の投稿を表示する」を設定した上で、トップページを実行すると、

<body class="home blog">

というclass属性が出力されます。

カスタム背景が有効になっていると、

<body class="home blog custom-background">

となり、先ほどのstyleタグ出力に合わせたclass属性を自動的に出力してくれます。

3. 動作を確認する

ダッシュボードを開き、外観＞背景メニューを選択します。

カスタム背景_ダッシュボード編集

#1 画像を削除して、背景色を指定する

「背景画像を削除」を押し、「変更を保存」を押します。

カスタム背景_画像を削除

プレビューが変わりました。サイト実行すると、プレビューの通りの背景で表示されます。

#2 背景画像を変更する

「ファイルを選択」ボタンを押して、画像ファイルを選択、「アップロード」ボタンを押します。サイト実行すると、

カスタム背景_花柄画像を指定

背景画像が置き換わりました。

ソースコードを確認すると、背景画像へのパスが変更されています。

<!DOCTYPE html>
<html>
<head>
・・・省略・・・
<style type="text/css" id="custom-background-css">
body.custom-background {
background-color: #eef5ee;
background-image: url('http://localtest.net/wp-content/uploads/2013/04/flower.png');
background-repeat: repeat;
background-position: top left;
background-attachment: fixed;
}
</style>
</head>
<body class="home blog logged-in custom-background">
・・・

4. まとめ

複数の関数がお互いに関連して動く

カスタム背景の関数＆ファイルの役割分担は、次の図のようになります。

各ファイルの役割分担

add_theme_support()関数で、カスタム背景がONになると、body_class()で出力されるclass属性に、”custom-background”が追加されます。同時に、ダッシュボードに「背景」メニューが表示されるようになり、そのメニューでの設定内容が、wp_head()関数の出力に反映されるようになります。

次の記事：index.phpをカスタマイズするー第１１回カスタム投稿タイプを作成する
前の記事：index.phpをカスタマイズするー第９回カスタムヘッダーを設置する

カスタム背景を設置する

目次