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つ。

  • theme_location: テーマの中で使われる位置
  • menu_class: メニューを構成する ul 要素に適用するCSS クラス名
  • container: ulをdiv、navでラップするか指定する

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

[footer.php]

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

まとめ

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

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*