wordpress初心者でもできる!メニューのカスタマイズ

テンプレートを0から作るのは面倒くさい。だけど、周りとも被りたくない。そんな時にオススメなのが、ナビゲーションメニューのカスタマイズです!ナビゲーションメニューを変えるだけで、印象を大幅に変えることができます。

カスタマイズするテンプレートは、バズ部さんのXeory Base。(SEO対策がされており、とても優秀なテンプレートです!)

Javascriptのプラグインとして、Drawerも使用します。

それでは、実際にカスタマイズしていきましょう。

カスタマイズ後のナビゲーションバー

「実装例はいいから、結果どんな風に変わるん??」そんな声が聞こえてきそうなので、カスタマイズ前後の画像を先にお見せします。

カスタマイズ後

drawerを使用したナビゲーショj

どうでしょうか?結構変わったと思いません?

「お!いい感じじゃん!」、「参考にしてみたいかも!」という方だけ、以降の実装方法を読んで下さい。

そうで無い方は、今回の記事は役に立たないため、無視して下さい!

まずは、Drawerプラグインの導入

必要なCSS、Javascriptのプラグインを読み込みます。(今回は、CDN形式)

header.php

<!-- drawer.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<!-- jquery & iScroll -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<!-- drawer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>

いざ、カスタマイズ

1.以下のようにHTMLの修正を行う。

<!-- body_class() に引数として「drawer drawer--top drawer--navbarTopGutter」を渡します。 -->
<body id="#top" <?php body_class('drawer drawer--top drawer--navbarTopGutter');?> itemschope="itemscope" itemtype="http://schema.org/WebPage">

<!-- headerのclassに「rawer-navbar drawer-navbar--fixed」を指定します。 -->
<header class="drawer-navbar drawer-navbar--fixed" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader" style="border-bottom: none;">

  <!-- 「<div class="drawer-container">」を追加する -->
  <div class="drawer-container">
    <?php
      $logo_image = get_option('logo_image');
      $logo_text = get_option('logo_text');
      if( !empty($logo_image) && get_option('toppage_logo_type') == 'logo_image') :
        $logo_inner = '<img src="'. get_option('logo_image') .'" alt="'.get_bloginfo('name').'" />';
      else:
        if (!empty($logo_text) && get_option('toppage_logo_type') == 'logo_text') :
          $logo_inner = get_option('logo_text');
        else:
          $logo_inner = get_bloginfo('name');
        endif;
      endif;
      $logo_wrap = ( is_front_page() || is_home() ) ? 'h1' : 'p' ;
    ?>

    <!-- Drawerでナビゲーションを作成する。 -->
    <div class="drawer-navbar-header">
      <<?php echo $logo_wrap; ?> id="logo" itemprop="headline">
        <a class="drawer-brand" href="<?php echo home_url(); ?>"><?php echo $logo_inner; ?></a>
      </<?php echo $logo_wrap; ?>>
      <button type="button" class="drawer-toggle drawer-hamburger">
        <span class="sr-only">toggle navigation</span>
        <span class="drawer-hamburger-icon"></span>
      </button>
    </div>
    <nav class="drawer-nav" role="navigation">
      <?php
        wp_nav_menu(
          array(
            'theme_location'  => 'global_nav',
            'menu_class'      => 'drawer-menu',
            'container'       => 'false',
          )
        );
      ?>
    </nav>

  </div>
</header>

wp_nav_menuは、wordpressのテンプレートタグ。ナビゲーションメニューを表示することができます。オプションがいろいろとありますが、今回使用するオプションは以下の3つ。

<ul style="border: 2px skyblue dashed;">
  <li>
    theme_location: テーマの中で使われる位置
  </li>
  <li>
    menu_class: メニューを構成する ul 要素に適用するCSS クラス名
  </li>
  <li>
    container: ulをdiv、navでラップするか指定する
  </li>
</ul>

2.Drawerの呼び出し

「footer.php」でDrawerを呼び出します。

footer.php

<script>
$(document).ready(function() {
  $('.drawer').drawer();
});
</script>

まとめ

いかがだったでしょうか?簡単にナビゲーションメニューをカスタマイズすることができたと思います。無料のテンプレートにひと手間加えることで、より便利で使いやすいサイトを作成することができます。是非参考にしてみて下さい。

arrow_back

Previous

【rails】DeviseでTwitter認証を実現!

Next

【postgresql】CentOS7にPostgreSQL10をインストールする方法
arrow_forward