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

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

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

Sponsored Link

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

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

add_custom_background();

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

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

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

カスタム背景ページ

背景色を変える方法

背景色を設定する方法

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

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

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

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

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

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

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

テーマに、下記のソースを追加する事により、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スペースが入ってしまうので気になる所。
もうちょっと出力するソースをクリーンにして欲しいというのが個人的希望なのです。

背景画像を設定する方法

カスタム背景画像を設定する

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

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

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

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

background-position: top left;

topは固定となります。

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

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

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

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

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

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

実際に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>

背景画像を削除する方法

背景画像を削除する手順

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

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

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

参考記事

Sponsored Link