カスタムヘッダー機能を利用する

wordpress

カスタムヘッダーとは

カスタムヘッダーとはサイトヘッダーを管理画面から自由に変更できる機能です。 あらかじめ有効になっていないテーマもありますが、functions.phpを修正することで機能が使えるようになります。

サイトのテーマを直接弄ることが出来るなら無用の機能ですが、そうでない場合もあります。 そんな時にサイトの顔とも言えるヘッダーをコード知識なしで変更できる機能なのです。

カスタムヘッダー機能を有効化する

function.phpに以下の記述をすることでカスタムヘッダー機能が有効になります。

引数なしver(デフォルト設定を使用)

add_theme_support( 'custom-header');

引数ありver

$args = array(
  'default-image'          => '',
  'random-default'         => false,
  'height'                 => 0,
  'width'                  => 0,
  'flex-height'            => false,
  'flex-width'             => false,
  'default-text-color'     => '',
  'header-text'            => true,
  'uploads'                => true,
);
add_theme_support( 'custom-header', $args);
引数意味指定例
default-imageデフォルト画像のパスget_bloginfo(‘template_url’).’/image/header.jpg’
random-defaultヘッダー画像をランダム表示true
height画像の高さ960px
width画像の横幅200px
flex-heightアップロード画像高さがheightと違う場合トリムするtrue
flex-widthアップロード画像幅がheightと違う場合トリムするtrue
default-text-colorヘッダーのテキストカラー#000000
header-text画像上にテキストを入れるtrue
uploadsファイルのアップロード許可true

記述すると管理画面の[外観]に[ヘッダー]の項目が追加されます。 ここからカスタムヘッダー画面に入ります。それではヘッダー画像をアップロードしましょう。

アップロードしたヘッダー画像を表示する

<?php if(get_header_image()): ?>
  <a href="<?php echo home_url('/'); ?>">
  <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="header">
  </a>
<?php else: ?>
  <a href="<?php echo home_url('/'); ?>">
    <?php bloginfo('name'); ?>
  </a>
<?php endif; ?>

アマルウェブ HOME