1. MetaSliderプラグインをインストール&設定
2. wp-content/themes/cocoon-child-master/tmp/single-contents.phpを作成
<?php
if (!defined('ABSPATH')) exit; ?>
<div id="header-container" class="header-container">
<div id="header-container-in" class="header-container-in<?php echo get_additional_header_container_classes(); ?>">
<div id="header" class="header cf" itemscope="" itemtype="https://schema.org/WPHeader">
<header id="header-in" class="header-in wrap cf" itemscope="" itemtype="https://schema.org/WebSite">
<?php echo do_shortcode('[metaslider id="6685"]'); ?>
<?php get_template_part('tmp/navi'); ?>
</header>
</div>
</div>
</div>
<div id="elementsOverSlider">
<?php get_template_part('tmp/header-tagline'); ?>
<?php generate_the_site_logo_tag(); ?>
</div>
※ [metaslider id="6685"]の部分はMetaSliderで生成されたショートコード
3. 外観⇒カスタマイズ⇒追加CSS、でCSSを調整
以下は一例だが、どのように表示するかによってCSSの内容は変わる。
#header {
background-image: none;
width: 100%;
}
#header-in {
width: 100%;
}
#elementsOverSlider {
position: absolute;
top: 40px ;
z-index: 0;
width: 100%;
margin-top: 3%;
}
@media screen and (max-width:1024px) {
.tagline {
font-size: 14px;
padding-top: 5%;
margin: 1% 0 0 0;
}
.logo-text {
padding-top: 3%;
}
.site-name-text {
font-size: 20px;
}
#header-in {
min-height: 200px;
}
}