WordPressのメニューをおもしろくしてみた | | Webサービス一覧のひとりごと

トグルメニュー

トグルメニュー（アコーディオンメニュー）の準備

WordPressのテーマに子テーマを作って、

そこで変更や追加をした方が安心安全なので以下の作業は子テーマを使って行いたいと思います。

functions.phpでオリジナルのメニューを作れるようにする

以下を子テーマの『functions.php』に書き込む

『functions.php』はあらかじめ作成しておきます。

//オリジナルメニュー
register_nav_menus( array(
'sub_menu' => 'カスタムサブメニュー',
'slide_menu' => 'カスタムスライドメニュー'
) );

一応、二つ作ってみました。

カスタムスライドメニュー用のファイルを作成

別途ファイルを作成しなくてもできますが、今回はわかりやすくファイルを作ってみました。

子テーマに『slide-menu.php』というファイルを作ってアップロードします。

アップロード方法は、『Adobe Dreamweaver』や『サーバーのFTP』を利用することで簡単にできます。

それでは、以下を記述して保存します。（全く同じじゃなくてもOKです）

<!-- スライドメニュー -->

<div class="suma">

<div class="nav-toggle">
<span class="nav-toggle-icon"></span>
<span class="nav-toggle-icon"></span>
<span class="nav-toggle-icon"></span>
</div>

<div class="slide-container">
<?php

$custom_slide_menu = array(
'container' => 'nav',
'container_class' => 'slidemenu',
'theme_location' => 'slide_menu',
'link_before' => '<span>',
'link_after' => '</span>'
);

if ( has_nav_menu( 'slide_menu' ) ) : ?>
<div id="menubox">
<?php wp_nav_menu( $custom_slide_menu ); ?>
</div>

<?php endif; ?>
</div>
</div>

カスタムスライドメニューファイルの呼び出し

上記で作った『slide-menu.php』を『header.php』で読み込みたいと思います。

以下を読み込みたい場所に記述してください。

<?php get_template_part( 'slide-menu' ); //スライドメニュー ?>

メニューを作成

WordPress管理メニューの『外観』→『メニュー』を開くと以下のような画面になると思います。

『メニュー項目を追加』から自分が作った固定ページなどを選択してメニューに追加します。

メニュー名は、slide_menu

メニュー設定は、カスタムスライドメニュー

最後に保存してください。

カスタムスライドメニュー

以上で、オリジナルのメニューが設置されました。

あとは、『css』と『js』で見え方や動き方を設定していきます。

格安ドメイン名取得サービス『エックスドメイン』

スタイルシート (style.css)

以下を子テーマのcssファイルに記述します。

こちらは、好みで色を変えたり、配置を変えたりしてください。

参考までに、作ってみました。

.suma{
display:inline-block;
width:100%;
}
.nav-toggle{
z-index:9999;
margin:0;
cursor:pointer;
position:fixed;
top:0;
right:0;
padding:10px;
background-color:#111;
}
.nav-toggle:hover{
opacity:0.7;
}
.nav-toggle-icon {
position: relative;
display: block;
height: 2px;
width: 30px;
background: #fcfcfc;
-webkit-transition: ease .5s;
-moz-transition: ease .5s;
-o-transition: ease .5s;
transition: ease .5s;
}
.nav-toggle-icon:nth-child(1) {
top: 0;
}
.nav-toggle-icon:nth-child(2) {
margin: 8px 0;
}
.nav-toggle-icon:nth-child(3) {
top: 0;
}
/*OPEN時の動き*/
.nav-toggle.open .nav-toggle-icon:nth-child(1) {
top: 10px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-toggle.open .nav-toggle-icon:nth-child(2) {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 0;
}
.nav-toggle.open .nav-toggle-icon:nth-child(3) {
top: -10px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.slide-container{
-webkit-transform: translate(-100%,-50%);
-moz-transform: translate(-100%,-50%);
-ms-transform: translate(-100%,-50%);
-o-transform: translate(-100%,-50%);
transform: translate(-100%,-50%);
-webkit-transition:ease .7s;
-moz-transition: ease .7s;
-o-transition: ease .7s;
transition:ease .7s;
z-index:1000;
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flex;
displau:-moz-box;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
-webkit-align-items:center;
-moz-box-align:center;
-ms-grid-row-align:center;
align-items:center;
height:150vh;
text-align:left;
width:80%;
background:rgba(0,0,0,0.8);
position:fixed;
top:50%;
border-radius:0 50% 50% 0;
}
/*OPEN時の動き*/
.slide-container.open {
height:150vh;
width:80%;
z-index:8888;
background:rgba(0,0,0,0.8);
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flex;
displau:-moz-box;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
-webkit-align-items:center;
-moz-box-align:center;
-ms-grid-row-align:center;
align-items:center;
text-align:left;
position:fixed;
-moz-transform:translate3d(0,-50%,0);
transform:translate3d(0,-50%,0);
-webkit-transform:translate3d(0,-50%,0);
-ms-transform:translate3d(0,-50%,0);
overflow-y:auto;
top:50%;
border-radius:0 50% 50% 0;
}

#menubox{
width:100%;
}

.slidemenu .menu{
display:block;
padding:0 5% 0 15%;
}

.slidemenu ul li{
list-style:none;
}
.slidemenu ul li a{
color:#fff;
font-size:16px;
display:inline-block;
padding:30px 30px;
width:auto;
text-decoration:none;
}
.slidemenu ul li a:hover{
color: #111;
}

jsファイル

以下を子テーマのjsファイルに記述します。

$(function() {
 $('.nav-toggle').on('click', function () {
  $(this).toggleClass('open');
  $('.slide-container').toggleClass('open');
	  });

 $('#menu-slide_menu a').on('click', function () {
  $('.nav-toggle').removeClass('open');
  $('.slide-container').removeClass('open');
	  });
 });

これで完成！！！

デモも一応作ってみました。

See the Pen
wvMgrqQ by show-be (@show-be)
on CodePen.