自作テーマを開発する際に、Webサイト全体の背景を設定できるオプションを実装したい時があります。そんな時に便利なのがWordPressの「カスタム背景」機能です。
当記事では、カスタム背景の実装方法についてご紹介します。
カスタム背景とは？
Webサイト全体の背景画像を自由に設定できるWordPressの機能です。カスタム背景を有効化すると、以下の設定項目がカスタマイザーに表示されるようになります。
ここで設定した画像が、Webサイトの背景に反映されるようになります。
なお、背景には画像だけではなく、色を設定することもできるので、サクッと実装したい方に非常にオススメです。
カスタム背景の使い方
カスタム背景を利用するためには、テーマのfunctions.phpに有効化の記述を追加する必要があります。具体的な使い方を順番にご紹介します。
- カスタム背景の有効化
- 背景画像の設定
- 背景色の設定
カスタム背景の有効化
カスタム背景は、有効化するだけで設定〜表示までを実装できます。functions.phpに以下を追記してください。
add_action( 'after_setup_theme', function(){
add_theme_support( 'custom-background' );
} );追記後に外観 > カスタマイズを確認すると「背景画像」の設定が表示されます。ここから画像を設定するだけで簡単に反映できるんですね。
また、第二引数にはいくつかオプションを指定できますので、気になる方は以下をご覧ください。
実装するために必要な手順はこれで以上です。設定方法について順番にご紹介します。
背景画像の設定方法
背景画像の設定は、外観 > カスタマイズの「背景画像」から設定できます。画像アップローダーに画像を設定してみてください。
Webサイトの背景にその画像が反映され、画像アップローダーの下にいくつかのオプションが表示されます。
このプリセットを選択することで、様々な表現を実現できます。以下が各プリセットの仕様です。
| デフォルト | 画面を埋め尽くすように画像を繰り返し表示 |
| フルスクリーン | 画面全体を覆うような形で画像を表示 |
| 画面に合わせる | 画面サイズにフィットするような形で画像を表示 |
| 繰り返し | 画面を埋め尽くすように画像を繰り返し表示 |
| カスタム | 全てのオプションを使って自由に設定可能 |
なお、画像の位置や画面に固定するか等、様々な設定も用意されています。組み合わせて自分好みに設定してみましょう。
背景色の設定
カスタム背景は、背景色も設定できます。カスタム背景を有効化すると以下の「色」設定が自動で追加されます。
この中のカラーピッカーを変更するだけでWebサイトの背景色を自由に設定できるんですね。（以下は背景色を水色に設定したサンプルです。）
なお、背景画像をセットしたままだと背景色は反映されないので、ご注意ください。
まとめ
今回は、カスタム背景の使い方についてご紹介しました。設定フィールドを自分で用意しなくても簡単に実装できるのは非常に便利ですね。
このようにWordPressに組み込まれている機能は他にもいくつか存在します。以下は、ロゴやヘッダー画像を簡単に設定できる機能ですので、サクッと実装したい方はぜひこちらも参考にしてください。
最近のWebサイトでよく見かけるのが、トップページのファーストビューに大きな画像を表示するデザインですよね。 WordPressには、このようにメイン画像を管理画面から設定できるカスタムヘッダー機能が備わっています。当記事では、この機能の使い方についてご紹介していきます。 カスタムヘッダーと...
自作テーマ開発時に、管理画面からロゴを設定できる機能をサクッと実装したいな〜って時ありますよね。 実はWordPressには、テーマカスタマイザーからロゴ画像を設定できる「カスタムロゴ」機能が備わっています。当記事では、このカスタムロゴ機能の使い方についてご紹介していきます。 WordPre...
素晴らしい！