Web Design Leaves

$defaults = array(
    'default-image' => '',　　//デフォルトヘッダー画像へのパスを指定
    'random-default' => false,　　//ランダム表示するか
    'width' => 0,　　//ヘッダー画像の幅
    'height' => 0,　　//ヘッダー画像の高さ
    'flex-height' => false,　　//高さをフレキシブルに（トリミングできるように）するか
    'flex-width' => false,　　//幅をフレキシブルに（トリミングできるように）するか
    'default-text-color' => '',　　//ヘッダーテキストの文字色の指定
    'header-text' => true,　　//ヘッダーテキスト機能のオン・オフ
    'uploads' => true,　　//他の画像をアップロードすることができるようにするかどうか
    'wp-head-callback' => '',　　// ヘッダーをスタイリングするためのコールバックを指定
    'admin-head-callback' => '',　　//管理画面でヘッダープレビューをスタイリングするためのコールバックを指定
    'admin-preview-callback' => '',　　//管理画面でヘッダープレビューを表示するために使用するコールバックを指定
);

$args = array(
  'width' => 900,
  'height' => 200,
  'default-image' => get_template_directory_uri() . '/images/header.jpg',
  'uploads' => true,　　//他の画像をアップロードすることができるようにする
  'header-text' => false,
  'flex-height' => true,  //高さをフレキシブルに（トリミングできるように）する
  'flex-width' => false,  //幅をフレキシブルに（トリミングできるように）しない
);
add_theme_support( 'custom-header', $args );

register_default_headers(array(   //デフォルトのカスタムヘッダー画像を（複数）登録して選択肢を用意
  'city' => array(
    'url' => '%s/images/city.jpg',  //ヘッダー画像のアドレス
    'thumbnail_url' => '%s/images/city_thumbnail.jpg',  //ヘッダー画像のサムネイルのアドレス
    'description' => 'シティ：高層ビル'  //ヘッダー画像の説明や日本語名など（省略可）
  ),
  'flower' => array(
    'url' =>  get_template_directory_uri() . '/images/flower.jpg',  //'%s/images/flower.jpg'と同じこと
    'thumbnail_url' =>  get_template_directory_uri() . '/images/flower_thumbnail.jpg',
    'description' => '花：紫色の花'
  )
));

<?php if(get_header_image()): ?>  //テーマがヘッダ用イメージをサポートしていれば
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
<?php endif; ?>

$args = array(
    'default-image' => get_template_directory_uri() . '/images/header.jpg',
    'width' => 800,
    'height' => 200,
    'default-text-color' => '666666',    //ヘッダー画像の左上に表示されるブログ名の文字色の指定
    'header-text' => true,    //ヘッダーテキスト機能を有効に
    'uploads' => true,    //他の画像をアップロードすることができるようにする
    'wp-head-callback' => 'header_style',    // ヘッダーをスタイリングするためのコールバック
    'admin-head-callback' => 'admin_header_style',    //管理画面でヘッダープレビューをスタイリングするためのコールバック
);
add_theme_support('custom-header', $args );

function admin_header_style(){    //管理画面でヘッダープレビューをスタイリングするためのコールバック
?>
    <style type="text/css">
    #headimg h1 {
      margin: 0;
      padding-top: 20px;
      padding-left: 30px;
      font-size: 30px;
      font-family: Arial, "Times New Roman", Times, serif;
    }
    #headimg h1 a {
      text-decoration: none;
    }
    #headimg #desc {
      padding-left: 30px;
      padding-top: 8px;
      font-size: 14px;
    }
</style>
<?php
}

function header_style(){    // ヘッダーをスタイリングするためのコールバック
?>
    <style type="text/css">
    #head {
      background-image: url(<?php header_image(); ?>);
    }
    #head h1 a, #head p {
      color: #<?php header_textcolor(); ?>;
    }
    </style>
<?php
}
&#91;/code&#93;

&#91;dlf&#93;  header_textcolor() |
カスタムヘッダーの文字色を出力する
パラメータ：なし
戻り値： なし
出力される値に「#」は付いていないので、自分で記述する必要がある。
&#91;/dlf&#93;

<h3>カスタムヘッダーにヘッダーテキストを表示する</h3>

<ul>
<li>カスタムヘッダー画像を CSS で背景に指定して、テキストを表示させる。</li>
<li>'header-text' =&gt; true　でヘッダーテキスト機能のオンにする。</li>
<li>'default-text-color' => 'ffffff' で文字色を指定。（# は付けない）</li>
<li>'wp-head-callback' でヘッダーをスタイリングするためのコールバックを指定</li>
<li>'admin-head-callback'で管理画面でヘッダープレビューをスタイリングするためのコールバックを指定</li>
<li>'admin-preview-callback'で管理画面でヘッダープレビューを表示するために使用するコールバックを指定</li>
</ul>

以下はカスタムヘッダーを表示する領域の記述。

<ul>
<li>div 要素（id="header_img" ）の背景としてカスタムヘッダーの画像を表示させる。</li>
<li>h2 要素の内容をヘッダーテキストとして表示させる。</li>
</ul>


<div id="header_img">
<h2>Blog Title</h2>
</div><!-- end of #header_img -->

$args = array(
  'width' => 900,
  'height' => 200,
  'default-image' => get_template_directory_uri() . '/images/header.jpg',
  'uploads' => true,
  'header-text' => true,　　//ヘッダーテキスト機能をオンに
  'default-text-color' => 'ffffff', 　　//ヘッダーテキストの文字色の指定
  'wp-head-callback' => 'header_style',　　// ヘッダーをスタイリングするためのコールバックを指定
  'admin-head-callback' => 'admin_header_style',　　//管理画面でヘッダープレビューをスタイリングするためのコールバックを指定
  'admin-preview-callback' => 'admin_header_image' 　　//管理画面でヘッダープレビューを表示するために使用するコールバックを指定
);
add_theme_support( 'custom-header', $args );

// ヘッダーをスタイリング（表示）するためのコールバック
function header_style(){
  ?>
    <style type="text/css">
      #header_img {
        background-image: url(<?php header_image(); ?>);
      }
      #header_img h2{
        color: #<?php header_textcolor(); ?>;
      }
    </style>
  <?php
}

//管理画面でヘッダープレビューをスタイリングするためのコールバック
function admin_header_style(){ 
  ?>
    <style type="text/css">
        #header_img {
            background-image: url(<?php header_image(); ?>);
            background-repeat: no-repeat;
            height: 200px;
        }
        #header_img h2{
            color: #<?php header_textcolor(); ?>;
        }
    </style>
  <?php
}

//管理画面でヘッダープレビューを表示するために使用するコールバック
function admin_header_image() { ?>
    <div id="header_img">
      <h2>Blog <?php echo header_textcolor(); ?></h2>
    </div><?php
}
&#91;/code&#93;

<ul>
<li>div 要素の背景として CSS で画像を表示させるが、CSS では background-image: url(&lt;?php header_image(); ?&gt;); が機能しないので、 ヘッダーをスタイリングするためのコールバックで指定する。</li>
<li>'header-text' =&gt; true　でヘッダーテキスト機能のオンにすると管理画面ではヘッダーテキストが表示されるが、実際のページでは表示されない。</li>
<li>管理画面で表示されるヘッダーテキストは「bloginfo('name')」と「bloginfo('description')」の値になっているみたいなので、これはヘッダープレビューを表示するために使用するコールバックで指定して実際の値を表示させる。</li>
<li>管理画面で表示されるヘッダーテキストの見栄えは、管理画面でヘッダープレビューをスタイリングするためのコールバックで指定する。</li>
</ul>

<dl>
<dt>ヘッダーをスタイリング（表示）するためのコールバック（header_style()）</dt>
<dd>CSS では  header_image();　や header_textcolor(); は使用できないのでこの関数で指定する。他の要素にも header_textcolor(); を適用したい場合は、それもここに記述する。</dd>
</dl>

<dl>
<dt>管理画面でヘッダープレビューをスタイリングするためのコールバック（admin_header_style()）</dt>
<dd>管理画面で表示されるカスタムヘッダーの見栄えを指定する。</dd>
</dl>

<dl>
<dt>管理画面でヘッダープレビューを表示するために使用するコールバック（admin_header_image()）</dt>
<dd>管理画面で実際のカスタムヘッダーの内容を表示させるために指定する関数。これを指定しないと、デフォルトの内容が表示されるみたい。</dd>
</dl>

その他にカスタムヘッダーのスタイルは通常の CSS に記述することができる。（ヘッダーをスタイリング（表示）するためのコールバックに記述することも可能）


#header #header_img {
  clear: both;
  margin-top: 10px;
  background-repeat: no-repeat;
  height: 200px;
}