WordPress カスタム背景

  Code Tips minimum Theme

作成中の「Code Tips minimum Theme」でカスタム背景を使えるようにします。

カスタム背景(Custom Background)とは、サイトの背景色や背景画像をダッシュボードの「外観」から変更できるようにする仕組みです。

作成中の「Code Tips minimum Theme」では、まだダッシュボードの「外観」の項に「背景」の設定項目は無い状態です。

 

カスタム背景の登録

カスタム背景を使えるようにするためには、【functions.php】に add_theme_support( 'custom-background', $args ) を登録します。

【functions.php】

$background_param = array(
  'default-color' => 'ffffff'
);
add_theme_support( 'custom-background', $background_param );

 

add_theme_support()

テーマやプラグインが特定のテーマ機能をサポートすることを許可します。テーマから呼ばれる場合、動作させるためにはテーマのfunctions.phpファイルの中で指定されなければなりません。アクションフックにより、プラグインからも呼び出し可能です。

WordPress Codex : 関数リファレンス/add theme support

add_theme_support( $feature, $args )

 

パラメータ
引数 説明
$feature
文字列
必須
追加する機能の名前
初期値:なし
$args 
配列
オプション
オプションの引数
初期値:true

$feature 機能リスト

  • ‘post-formats’
  • ‘post-thumbnails’
  • ‘custom-background’
  • ‘custom-header’
  • ‘automatic-feed-links’
  • ‘html5’
  • ‘title-tag’
  • ‘editor-style’ (テーマによって直接使用しない内部の登録)
  • ‘widgets’ (テーマによって直接使用しない内部の登録)
  • ‘menus’ (テーマによって直接使用しない内部の登録)

 

add_theme_support(‘custom-background’)

カスタム背景は、背景色と画像のカスタマイズを提供するテーマ機能です。

Version 3.4以降では、テーマでカスタム背景機能をサポートをするためには functions.phpファイル内に add_theme_support() 関数を使う必要があります。

WordPress Codex : カスタム背景

add_theme_support( 'custom-background', $args );
$args = array(
  'default-color' => '',
  'default-image' => '',
  'default-repeat' => '',
  'default-position-x' => '',
  'default-attachment' => '',
  'wp-head-callback' => '_custom_background_cb',
  'admin-head-callback' => '',
  'admin-preview-callback' => ''
);

 

デフォルトの背景色を #f5f5f5 に、背景画像を {WordPressのテーマのディレクトリ}/img/background.png に設定する場合

$args = array(
	'default-color' => 'f5f5f5',
	'default-image' => get_bloginfo('template_url') . '/img/background.png',
);
add_theme_support( 'custom-background', $args );

出力は

<style type="text/css" id="custom-background-css">
body.custom-background {
  background-color: #f5f5f5;
  background-image: url('{WordPressのディレクトリ}/images/background.png');
  background-repeat: repeat;
  background-position: top left;
  background-attachment: scroll;
}
</style>

となります。

 

カスタム背景を出力するためのテンプレートタグの設置

カスタム背景を出力するためのテンプレートタグを <body> タグに追加します。

【header.php】の <body> タグに body_class() を追加します。
また、<head> のなかに wp_head() があることを確認します。

【header.php】

・・・略・・・
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
・・・略・・・

 

body_class()

WordPress 2.8 から、テーマの作者がより効果的に CSS で装飾できるようにする body 要素用の新テンプレートタグ body_class が加わりました。この関数は、HTML の body 要素(通常 header.php にある)に異なる class 属性を付与し、さらに任意の class を追加することもできます。

WordPress Codex : テンプレートタグ/body class

<body <?php body_class( $class ); ?>>

 

パラメータ
引数 説明
$class
文字列
オプション
初期値のほかに追加したい class 名。複数指定するときは(半角)スペースで区切る
初期値:null

 

以上でカスタム背景の設定は完了です。
ダッシュボードの「外観」に「背景」の設定項目が追加されているので、そこで設定をして保存すると反映されます。

 

Code Tips minimum Theme

【functions.php】

<?php
// css
function register_style() {
  wp_register_style('style', get_stylesheet_uri(), array(), false, 'all');
}
function add_stylesheet() {
  register_style();
  wp_enqueue_style('style');
}
add_action('wp_enqueue_scripts', 'add_stylesheet');

// sidebar
function my_widgets_init() {
  $my_widgets_param = array(
    'name' => 'Sidebar',
    'id' => 'sidebar-1'
  );
  register_sidebar( $my_widgets_param );
}
add_action( 'widgets_init', 'my_widgets_init' );

// custom menu
function register_my_menu() {
  register_nav_menu('primary', 'Primary Menu');
}
add_action('after_setup_theme', 'register_my_menu');

// search-form >> html5
add_theme_support('html5', array('search-form'));

// custom background
$background_param = array(
  'default-color' => 'ffffff'
);
add_theme_support( 'custom-background', $background_param );
?>

 

【header.php】

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
  <h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
  <?php wp_nav_menu(); ?>