//custom-header
add_theme_support( 'custom-header' );
//functions.php
// ヘッダー画像
add_theme_support( 'custom-header', array(
'width' => 1000,
'height' => 300,
'header-text' => false,
'uploads' => true,
) );
//header.php
<?php if( get_header_image() ): ?>
<div class="hero">
<div class="hero-img" style="background-image: url(<?php header_image(); ?>)"></div>
<div class="hero-text">Wordpress Test</div>
</div>
<?php endif; ?>
css
/* ヘッダー画像 */
.hero {position: relative}
.hero-img {width: 100%;
height: 300px;
margin: 20px 0 10px;
background-color: #dddddd;
background-size: cover;
background-position: 50% 50%}
.hero-text {position: absolute;
top: 120px;
right: 30px;
color: #ffffff;
font-size: 30px;
font-family: 'Montserrat', sans-serif;
text-shadow: 0 0 10px #000000}
@media (max-width: 599px) {
.hero-img {height: 200px}
.hero-text {top: 100px;
right: 10px;
font-size: 18px;
text-align: center}
}
////////////////////////////////////////////
$args = array(
'width' => 980,
'height' => 60,
'default-image' => get_template_directory_uri() . '/images/header.jpg',
);
add_theme_support( 'custom-header', $args );
<?php if(get_header_image()): ?>
<p id="image"><img src="<?php header_image(); ?>" alt="" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>"></p>
<?php endif; ?>
//////////////////////////////////////////
カスタムヘッダーの画像を読み込み
関数「get_uploaded_header_images」でカスタムヘッダーの画像の配列を取得し、foreachで配列から必要な画像のアドレスを取得して、imgタグを作成します。
<?php $header_images = get_uploaded_header_images();
if ($header_images) {
echo '<div class="flex slider">';
echo '<ul class="slides">';
foreach ($header_images as $header_image) {
echo '<li><img src="' . $header_image['url'] . '" /></li>';
}
echo '</ul>';
echo '</div>';
}
?>
コメントを残す