【AFFINGER】ヘッダースペースにドロップダウンメニューを作る

投稿日:2017年4月11日 更新日:

どうも『ぽよまる』です。

今回はアフィンガーにデフォルトでついているメニューの位置が気に入らないので変更するついでに、自分で管理しやすいように自作してみようと思います。

自作と言ってもすることは少ないんので、場所を変えたいんだけどなーと思っている人は参考にしてみてください。

スポンサーリンク

レスポンシブに対応したドロップダウンメニューを作る

せっかくレスポンシブ対応のアフィンガーですし、それを利用しないのは MOTTAINAI ! ということで、レスポンシブに対応した形で作っていこうと思います。

“functions.php” への追加

まず最初にやるのは “functions.php” への追加です。
“functions.php” を弄るのでバックアップは確実に取り、失敗したときに元の状態に戻せるようにしておいてください。

//新しいウィジェットの定義
register_sidebar( array(
    'id' => 'sidebar-30',
    'name' => 'ヘッダーグローバルナビ',
    'description' => 'ヘッダーに表示されるコンテンツです',
    'before_widget' => '<div id="w2-header-nav" class="w2-header-r">',
    'after_widget' => '</div>',
) );

これを追加してやることによって、ウィジェットに『ヘッダーグローバルナビ』という項目が新しく追加されます。

 

'id' => 'sidebar-30', この部分を30としているのは親テーマで使っているのが23までであり、後のアップデート等で幾つか追加されたとしても対応できるように20番代から30番代に変えているだけなので、23以降の数字であればなんでも構いません。

ヘッダー部分に<div>要素を追加する

私はドメインがw2libraryなので、その頭文字を取って “w2-” なんちゃらという記述の方法を取っていますが、親テーマと被りさえしなければなんでも良いです。

ですので、出て来るID名やclass名は自分で好きなように設定してください。

<div id="headbox-bg">
    <div class="clearfix" id="headbox">
                              
        <?php get_template_part( 'st-accordion-menu' ); //アコーディオンメニュー ?>                                  
             <div class="w2-wrap-header">
                              
                <div id="header-l">
                    <?php get_template_part( 'st-header-logo' ); //サイト名とディスクリプション ?>                                          
                </div><!-- /#header-l -->
                                
                <?php if ( !is_mobile() ) : ?><?php dynamic_sidebar(30); ?><?php endif; ?>
                              
            </div><!-- /.w2-wrap-header -->
    </div><!-- /#headbox-bg -->
</div><!-- /#headbox clearfix -->
<div class="w2-header-bottom"></div><!-- ヘッダー下ライン -->

ここで追加したのは “w2-wrap-header” というクラスと、先程 “functions.php” で追加したウィジェットを挿入するためのものです。

“w2-wrap-header” これが何の役割をしているかというと、“header-l” とウィジェットを同じボックス内で表示するため。“headbox”で代用してもかまわないのですが、アコーディオンメニューと分けておきたかったのでこのような記述の仕方をしています。

追加したウィジェットにカスタムメニューを追加する。

ドロップダウンさせたいメニューを追加してみてください。

完全に表示がおかしいのが分かると思います。
これはCSSを定義していないからなので、次はCSSを定義していきましょう。

追加したIDやclassのCSSを定義する

まず最初に定義するのは “w2-wrap-header” です。

    .w2-wrap-header{
          display: flex;
          justify-content:space-between;
        align-items: flex-end;
    }

これで “header-l” とウィジェットで表示しているボックスが左右に別れます。

“display: flex;” についてはこちらのサイト『CSS3のFlexboxを基本から理解して、使い倒そう!』を参考にしていただければわかると思いますので、ここで詳しくは説明しません。

次に追加するのが下記の記述。

    #header-l {
        padding-top: 0;
    }
    .w2-header-r{
          flex-shrink:100%;
          list-style-type: none
    }
    .w2-header-r ul{
          display: flex;
          list-style-type: none;
    }
    .w2-header-r ul li{
          width: 120px;
          line-height: 30px;
          text-align: center;
          position: relative;
    }
    .w2-header-r ul li a{
          margin: 1px;
          background: #60B99A;
         color: #FFF;
          display: block;
          text-decoration: none;
    }

これで画面はこんな感じになります。

少しだけナビっぽくなりましたが、まだ足りません。
ですので、ドロップダウン形式になるようさらに記述を追加します。

/*--------------------------------
ナビゲーションメニュー
---------------------------------*/
    .w2-header-r ul li ul{
          width: 120px;
          line-height: 30px;
          display: flex;
        flex-direction:column;
          position: absolute;
          z-index: 9999;
          top: 100%;
    }

    #w2-header-nav li ul{
          display: none;
    }

    #w2-header-nav li:hover ul{
          display: block;
    }

これで確認するとこのようになります。

しっかりとナビゲーションメニューになり、ドロップダウンもするようになっています。

※AdSenseの広告にドロップダウンメニューが覆いかぶさるのはポリシー違反になるので、サイドバー上部に広告を貼っている人はナビの位置を変更するなどして対応しましょう。

タブレットやカテゴリーが増えても表示が崩れないようにする

今のままですと、600px~960pxで表示したときやタブレットで表示した時にデザインが崩れます。

そればかりか、表示させる親カテゴリー数の数が増えるに連れてデザインが狂ってしまうので、そこに対応できるようさらに改変を行います。

	.w2-header-r{
  		width: 600px;
  		flex-shrink:100%;
  		list-style-type: none
	}
	.w2-header-r ul{
  		display: flex;
  		flex-wrap:wrap;
  		list-style-type: none;
  		font-size:14px;
	}
	.w2-header-r ul li{
  		width: 20%;
  		line-height: 30px;
  		margin-top: 1px;
  		text-align: center;
  		position: relative;
    	box-sizing:border-box;
	}
	.w2-header-r ul li a{
  		margin-left: 1px;
  		background: #333;
 		color: #FFF;
  		display: block;
  		text-decoration: none;
	}
	.w2-header-r ul li a:hover {
  		background: #555;
		color: #fff; }
/*--------------------------------
ナビゲーションメニュー
---------------------------------*/
	.w2-header-r ul li ul{
  		width: 120%;
  		line-height: 30px;
  		display: flex;
		flex-direction:column;
  		position: absolute;
  		z-index: 9999;
  		top: 100%;
	}
	.w2-header-r ul li ul li{
	  	border-top: 1px dotted #333;
  		box-sizing:border-box;
	    width: 100%;
		margin:0;
	  	padding:0;
	}
	.w2-header-r ul li ul li a{
		margin-left: 1px;
  		background: #333;
 		color: #FFF;
  		display: block;
  		text-decoration: none;
	  	padding:0;
	}

最初の記述と比べると幾つかコードが変わっていると思います。

この状態でサイトを表示するとこんな感じになります。

ナビゲーションの色が黒系になり、ロールオーバーした時に色が変わってわかりやすくなっていますね。

これでPC用の設定はOKですので、次にタブレット用のコードを記述しましょう。

  	.w2-wrap-header{
  		display: flex;
		flex-direction:column;
	  	justify-content:center;
	}
  	#header-l {
		margin:0 auto;
	}
	.w2-header-r{
		width: 100%;
  		margin: 0 auto;
  		flex-shrink:100%;
  		list-style-type: none
	}
	.w2-header-r ul li{
  		width: 20%;
	}
	.w2-header-r ul li a{
  		margin-top: 1px;
	}
	.w2-header-r ul li ul{
  		width: 100%;
	}
	.w2-header-r ul li ul li{
	    width: 100%;
	}

これでタブレットサイズでもデザインが崩れることなく表示されるようになります。

このようなデザインになり、表示しているメニューの数が5つを超えると二列になって左下から新しく追加されていきます。

これでヘッダー部分のデザインは完了です。

スポンサーリンク

-AFFINGER
-, , , ,

Copyright© ビブリオテーク , 2017 All Rights Reserved.