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

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

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

add_custom_background();

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

WordPress 3.0で背景を設定する箇所

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

背景色を変える方法

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

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

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

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

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

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

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

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

add_custom_background();

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

<style type="text/css">
body {
		background-color: #dd83b3;	background-repeat: repeat;	background-position: top left;	background-attachment: fixed;}
</style>

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

背景画像を設定する方法

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

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

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

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

background-position: top left;

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

<style type="text/css">
body {
	background-image: url('http://wp.eternal-tears.com/wp-content/uploads/2010/06/wordpress3-background-4.png');		background-repeat: repeat;	background-position: top left;	background-attachment: fixed;}
</style>