カスタム背景を使うと管理画面から背景を変更可能に【WordPress】

カスタム背景(Custom Background)を使うと管理画面から背景画像や背景色を設定できます。設定内容は <body> に対して CSS を適用する形で反映されます。カスタム背景を利用することで、テーマ開発者ではないユーザーでも手軽に背景を変更できるようになります。

カスタム背景を使えるようにする設定

カスタム背景はWordPressが元々持っている機能ですが、利用するためにはfunctions.phpとテンプレートファイルでの設定が必要です。

functions.php で設定する

add_theme_support()はWordPressが持つテーマ機能を使うことを許可する関数です。
カスタム背景の機能を許可するには次のように記述します。

add_theme_support( 'custom-background' );

オプションの2つ目のパラメータを配列で指定することでデフォルト値を設定することも可能です。

$defaults = array(
	'default-color'          => '',
	'default-image'          => '',
	'default-repeat'         => '',
	'default-position-x'     => '',
	'default-attachment'     => '',
	'wp-head-callback'       => '',
	'admin-head-callback'    => '',
	'admin-preview-callback' => '',
);
add_theme_support( 'custom-background', $defaults );

functions.phpで設定するとWP管理画面のメニュー「外観」の中に「背景」が追加されます。
これで管理画面からの設定が可能になりました。

テンプレートファイルの確認

設定内容が出力されるテンプレートファイルもカスタム背景が使える状態になっている必要があります。
ヘッダー部分(header.php)にwp_head()body_class()が書かれていることを確認してください。
書かれていれば設定内容が実際のサイトに反映されます。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

カスタム背景のしくみ

管理画面(ダッシュボード)の「外観 > 背景」の設定を行う(もしくはデフォルト値が指定されている)と、wp_head()によってbody.custom-backgroundというセレクターでCSSが出力されます。

同時にbody_class()関数がcustom-backgroundというクラス名を付与するため前述のスタイルが参照され、カスタム背景が適用されます。

参考リンク

WordPress Codex
カスタム背景 / add_theme_support()

タイトルとURLをコピーしました