カスタム背景の使い方

カスタム背景の使い方

カスタム背景機能を有効にする方法と使い方の紹介。

初期値

add_theme_support( 'custom-background', array(
	'default-color'          => '',
	'default-image'          => '',
	'default-repeat'         => 'repeat',
	'default-position-x'     => 'left',
	'default-position-y'     => 'top',
	'default-size'           => 'auto',
	'default-attachment'     => 'scroll',
	'wp-head-callback'       => '_custom_background_cb',
	'admin-head-callback'    => '',
	'admin-preview-callback' => '',
) );

有効にする

テーマセットアップで有効にする事で使えるようになります。
書き方は、テーマの基本設定を行い機能を実装します。add_theme_support()を参考に。

add_theme_support( 'custom-background' );

デフォルト値をしておくこともできますが、なにも設定しない場合テーマのCSSで設定した初期値が適用されるため、パラーメータの設定はしなくても大丈夫です。

使い方

カスタム背景の設定画面

管理画面の、外観 > カスタマイズ とすすみ、背景色の場合は色へ、背景画像の場合が背景画像へすすみます。

背景色の場合、そこで色を選択し、上部にある公開を押すと適用されます。

背景画像の場合、画像をアップロード&選択すると、オプションで設定する事ができます。
リアルタイムにプレビューで確認し、最後に上部の公開で決定します。

ここで設定した内容は、HTMLの直前にインラインCSSとして追加されるため、テーマのCSSで設定した内容を上書きします。

解除方法

背景画像を設定している場合、画像を削除。
背景色の場合、色を選択からクリアを押す事で、インラインCSSが削除され、テーマのCSSで設定された内容に戻ります。

Codex