wordpress

WordPressのメニューをおもしろくしてみた

投稿日:

トグルメニュー

 

 

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

 

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.


 

-wordpress
-, ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

選手登録メンバー登録

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた④

  1.アイキャッチ画像をカスタマイズ   テーマによっては、変更しなくてもきれいに表示されることもあります。 メンバー紹介などの個人個人のページでは、300px×400pxの画像 …

ワードプレス

WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた③

9.メンバー登録 上図のような画面になって、投稿ができるようになります。 では、さっそく1人目を登録します。 ①「ここにタイトルを入力」のところに「日本 太郎」としてみます。 ②アイキャッチ画像のとこ …

vegasスマホとPC

スマホとPCの条件分岐でVEGASを切り替える方法

  スマホとPCの条件分岐でVEGASを切り替える方法   表示したいところに以下を記述します。 <div class="img-movie"> & …

vegas2

WordPressで画像をかっこよく見せるVEGAS

  WordPressで画像をかっこよく見せる ワードプレスを使っていて画像を扱うことも多いと思いますが、サイトをかっこよくおしゃれに見せる方法の一つとして、画像に手を加えてインパクトを与え …

wordpressプラグイン

WordPressプラグインおすすめ10選【2017年度】

  1.セキュリティー Akismet Anti-Spam 自動的にすべてのコメントをチェックし、スパムのように見えるものをフィルターします。   2.バックアップと復元 Updr …