WordPress 3.0でテーマに背景を設定する機能を追加する方法

WordPress 3.0から、背景色＆背景画像を管理画面上で設定する機能が追加されました。
ただし、背景色＆背景画像を設定する機能は、テーマを多少いじらなければなりません。

今までは、テーマによっては独自の設定の仕方があったり、背景色や背景画像のCSSを修正しないといけないという手間がありましたが、
今回、テーマに背景を設定する機能を追加する事によって、設定の統一化とカスタマイズの簡易化が行われたことになります。

WordPressの管理画面に【背景】の機能を追加する方法

使用しているテーマの中にある、function.phpの中に、ファンクションタグを追加します。

[php]add_custom_background();[/php]

上記のソースを追加する事により、サイドバーの外観の箇所にサブメニューとして【背景】メニューが追加されます。

外観＞背景をクリックすると、カスタム背景のページが表示されます。

背景色を変える方法

【color】の箇所の【色の選択】ボタンをクリックします。

カラーピッカーが出現するので、任意のカラーに合わせてマウスクリックします。

【色の選択】ボタンの左の入力欄に、カラーコードが表示されます。

上部の【プレビュー】部分に選択した色が反映されます。

【色の選択】ボタンを押さなくても、予め色が決まっている場合は、【色の選択】ボタンの左のカラー入力部分にカラーコードを入力すればOKです。

色の設定が終わったら、最後に【変更を保存】ボタンをクリックします。

背景色を変える事によってテーマにどう影響するのか

テーマに、下記のソースを追加する事により、wp_headアクションを使うことになります。

[php]add_custom_background();[/php]

テーマ自体への影響は、wp_headアクションを使うことにより、head間に直接CSSが書かれる状態になります。そのため、予めstyle.cssに記載していたCSSの背景色設定は無効となります。head間に記載されるCSSソースは下記の通りです。

[php] [/php]

背景色のみでも、背景画像の設定のCSSが表示されてしまうことが悩みの種。
ソースもtabスペースが入ってしまうので気になる所。
もうちょっと出力するソースをクリーンにして欲しいというのが個人的希望なのです。

背景画像を設定する方法

【参照】ボタンをクリックして、背景画像を参照します。

【アップロード】ボタンをクリックして、背景画像をアップロードします。

背景画像がアップロードされると、プレビュー部分に背景画像が表示されます。

【場所】の設定をします。これはCSSで言う、background-positionにあたります。
選択肢は、左　中央　右の3択しかありません。実際に適用されるCSSは、

[php]background-position: top left;[/php]

topは固定となります。

• 左…background-position: top left;
• 中央…background-position: top center;
• 右…background-position: top right;

【繰り返し】の設定をします。これはCSSで言う、background-repeatにあたります。

• No Repeat…background-repeat: no-repeat;
• タイル…background-repeat: repeat;
• 水平方向に繰り返し…background-repeat: repeat-x;
• 垂直方向に繰り返し…background-repeat: repeat-y;

スクロールの有無を設定します。これはCSSで言う、background-attachment:にあたります。

• スクロール…background-attachment: scroll;
• 固定…background-attachment: fixed;

全てを変更したら、【変更を保存】をクリックして、設定を保存します。

実際にhead間に表示されるCSS

[php] [/php]

背景画像を削除する方法

背景画像を削除した場合は、【Remove Background Image】をクリックすると、クリックした瞬間すぐに削除されます。

背景画像を設定する時の注意点

背景画像を設定する時に、注意したい事は、背景色を空欄にしておくことです。
背景色を入力している状態ですと、background-colorも表示されてしまうため、ソースの無駄となります。

参考記事

• A WordPress Theme Control Panel to Change the Site Logo
• Function Reference/add custom image header « WordPress Codex