Cocoonのスキン「grayish」の詳細と改善点

変更前

skin-grayish：カスタマイズ→フロントページ設定：ヘッダーの以下の項目が、ヘッダー（Cocoon設定→ヘッダー背景画像）の上に追加されます。

• メインビジュアル 白オーバーレイの不透明度調整
• メインビジュアル 白ドットのON/OFF

この際、CSSクラスheader-inの前に、grayish_topmv_whovlayとgrayish_topmv_dotとして追加しています。

<header id="header" class="header cf" itemscope="" itemtype="https://schema.org/WPHeader">
  <div class="grayish_topmv_whovlay"></div>
  <div class="grayish_topmv_dot"></div>
  <div id="header-in" class="header-in wrap cf" itemscope="" itemtype="https://schema.org/WebSite">
    <h1 class="logo logo-header logo-text">
      <a href="サイトURL" class="site-name site-name-text-link" itemprop="url">
        <span class="site-name-text" itemprop="name about">サイト名</span>
      </a>
    </h1>
...
</header>

変更後

テンプレートheader-container.phpには、ヘッダーロゴの前後に情報を出力するフックがあります。
私なら、ヘッダーロゴの前にwp_header_logo_before_open()フックを使って情報を追加します。
改善前のソースを以下に変更します。

add_action('wp_header_logo_before_open', function () {
  if (is_front_top_page()) {
    echo<<<EOF
<div class="grayish_topmv_whovlay"></div>
<div class="grayish_topmv_dot"></div>
EOF;

  }
});

結果として、追加情報はCSSクラスheader-inの中に表示されます。

<header id="header" class="header cf" itemscope="" itemtype="https://schema.org/WPHeader">
  <div id="header-in" class="header-in wrap cf" itemscope="" itemtype="https://schema.org/WebSite">
    <div class="grayish_topmv_whovlay"></div>
    <div class="grayish_topmv_dot"></div>
    <h1 class="logo logo-header logo-text">
      <a href="サイトURL" class="site-name site-name-text-link" itemprop="url">
        <span class="site-name-text" itemprop="name about">サイト名</span>
      </a>
    </h1>
...
</header>

この方法では、追加情報の幅がheader-inに制限され、画面幅いっぱいには表示されません。
このため、以下のCSSにする必要があります。

.skin-grayish.front-top-page .container .header-container .header .grayish_topmv_whovlay,
.skin-grayish.front-top-page .container .header-container .header .grayish_topmv_dot {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
}