トップページの画像（スライダーなど）の下にメニューを配置したい

トップページのヘッダーに画像やスライダーや動画などを配置したい！！！

メニューをその下に配置したい！！

…というときのカスタマイズです。

賢威8用となっております。

メインビジュアルの下のメニューを配置する方法

まず、賢威8の子テーマを利用します。
子テーマのご利用はこちらの記事をご覧ください。

賢威8 のカスタマイズは 子テーマを利用して行おう！

まず header.php を子テーマにコピーして入れよう！

子テーマにコピーした header.php に下記の変更を加えます。

デフォルトで下記になっている部分があります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php if( has_nav_menu( 'gnav' ) && is_keni_layout_front_navigation() ) { ?>
<!--▼▼ グローバルナビ ▼▼-->
<div class="keni-gnav_wrap">
  <div class="keni-gnav_outer">
    <nav class="keni-gnav">
      <div class="keni-gnav_inner">
 
        <ul id="menu" class="keni-gnav_cont">
        <?php
          wp_nav_menu( array(
            'theme_location'  => 'gnav',
            'menu_id'      => 'gnav',
            'menu_class'    => 'gnav',
            'container'      => '',
            'items_wrap'    => '%3$s',
          ) );
        ?>
        <li class="menu-search"><?php get_search_form(); ?></li>
        </ul>
      </div>
      <div class="keni-gnav_btn_wrap">
        <div class="keni-gnav_btn"><span class="keni-gnav_btn_icon-open"></span></div>
      </div>
    </nav>
  </div>
</div>
<?php } ?>
 
<?php
  // Main visual
  if( is_front_page() && is_home() || is_front_page() ) {
    get_template_part( 'keni-html-parts/keni', 'main_visual' );
  }
?>
 

こちらを下記のように変更します。

変更後のソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
  // Main visual
  if( is_front_page() && is_home() || is_front_page() ) {
    get_template_part( 'keni-html-parts/keni', 'main_visual' );
  }
?>
 
<?php if( has_nav_menu( 'gnav' ) && is_keni_layout_front_navigation() ) { ?>
<!--▼▼ グローバルナビ ▼▼-->
<div class="keni-gnav_wrap">
  <div class="keni-gnav_outer">
    <nav class="keni-gnav">
      <div class="keni-gnav_inner">
 
        <ul id="menu" class="keni-gnav_cont">
        <?php
          wp_nav_menu( array(
            'theme_location'  => 'gnav',
            'menu_id'      => 'gnav',
            'menu_class'    => 'gnav',
            'container'      => '',
            'items_wrap'    => '%3$s',
          ) );
        ?>
        <li class="menu-search"><?php get_search_form(); ?></li>
        </ul>
      </div>
      <div class="keni-gnav_btn_wrap">
        <div class="keni-gnav_btn"><span class="keni-gnav_btn_icon-open"></span></div>
      </div>
    </nav>
  </div>
</div>
<?php } ?>

// Main visual の部分を上に上げた感じになります。

お試しください！