【WordPress】カスタムヘッダーの使い方(メインビジュアル)

WordPressでヘッダー画像を管理画面から指定するにはカスタムヘッダーという機能を使う。

自作テーマでカスタムヘッダーを使う場合のなんやかんや。

カスタムヘッダーの有効化

functions.phpに以下のコードを書く。

functions.php
add_theme_support( 'custom-header' );

これで管理画面の外観メニューに「ヘッダー」が表示される。

WordPress外観→ヘッダー

カスタムヘッダーの使い方

管理画面からヘッダー画像を登録した後、ヘッダー画像の呼び出し方サンプル。

<?php
// カスタムヘッダーが設定されていない?
if ( empty( get_header_image() ) ) {
?>
	<!-- 設定されていないときの処理 -->
<?php
} else {
?>
	<img src="<?php header_image(); ?>">
<?php
}

header_image()で画像パスが出力される。

CSSで背景画像に指定したい場合、HTML内に埋め込みの形で指定してもOK。

<div style="background-image: url(<?php header_image(); ?>);"></div>

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください