[WordPress]Cocoonテーマのヘッダ画像を複数（スライダー）にする方法

1. MetaSliderプラグインをインストール&設定
2. wp-content/themes/cocoon-child-master/tmp/single-contents.phpを作成
3. 外観⇒カスタマイズ⇒追加CSS、でCSSを調整

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;
}
}