WordPressのメニューとサイドバーをスマホ用に横からスライドイン表示させるカスタマイズ方法

2015/3/20 Wordpressカスタマイズ 12

WordPressテーマのスマホ表示は、結構頭を悩ませるところです。

中でも特に、グローバルナビメニューや、サイドバーのスマホでの扱いには悩むところです。

僕はこれまで、グローバルナビの場合は、非表示にしておいて、アコーディオン表示させるか、モーダル表示させるかしていました。

サイドバーの扱いはもっとぞんざいで、回り込みを解除して、本文の下に表示させるということぐらいしか、できていませんでした。

ただ最近、スマホのような幅の狭い端末で表示させる場合、横からスライドインしてくるメニューもいいなと思い始めました。

特に、スマホで表示させると、下に行ってしまって、あまり日の目を見ないサイドバーなども、スライドインするようにすれば、多少利用者も増えるかもしれません。

という事で、今回はWordpressテーマを、スマホで表示する場合、スライドインさせてメニューや、サイドバーに手軽にアクセスできるようにしてみたいと思います。

photo by Anne Swoboda

スライドインインターフェースの使用イメージ

言葉で説明しても、うまく説明できないので、画像を用いて完成形をまず紹介したいと思います。

インターフェース

まず、スマホなどで表示させる場合は、画面下部分に、常に以下のようなボタンを表示させます。

左から、以下のような機能になっています。

[Menu]グローバルナビメニューを左からスライドイン表示させるボタン
[Search]検索ボックスを表示させるボタン
[Prev]前の記事に戻るボタン
[Next]次の記事へ移動するボタン
[Top]スクロールをトップに戻すボタン
[Sidebar]サイドバーを右からスライドイン表示させるボタン

投稿ページでは、このようなボタン配置で表示しますが、一覧ページなどでは以下のようなボタンになります。

一覧ページに、前の記事、次の記事、ボタンは不要なので、4つのボタン表示になります。

メニュー表示

メニューボタンをクリックすると、左からグローバルナビがスライドインしてきてメニューが表示されます。

メニューボタンは、閉じるボタンに変更されます。

検索ボックス表示

検索ボタンを押すと、以下のように検索ボックスが表示されます。

こちらも、検索ボタンが「閉じる」ボタンになります。

サイドバーの表示

サイドバーボタンを押すと、以下のように右からサイドバーエリアがスライドインしてきます。

多くの、スマホサイトで下に追いやられることが多い、サイドメニューも、これで多少を有効活用される可能性が高まるかもしれません。

サイドバーメニューをクリックすると、「閉じる」ボタンになるトグルボタンとなっています。

横幅の広い端末で表示

広い端末で表示した場合は、横幅に応じてボタンの大きさが同じ幅で均等表示されます。

これは、スタイルの、CSSのFlexBoxを利用して実現します。

大体の仕様はこんな感じです。

フッターの固定メニューインターフェースは以下のページを参考にさせてもらいました。

参考フッター固定式メニューの設置方法とメニュー項目のアイディア – Shufulife

カスタマイズの主な手順

今回の、カスタマイズの「メイン機能となるスライド部」を作成するのに、jQueryプラグインのSidrを利用します。

今回の実装の主な手順は以下の4手順になります。

Sidrのダウンロード＆設置
CSSファイルの呼び出し
スクリプトファイルの呼び出しとjQueryコードの記入
CSSで見た目の調整

とりあえず、まとめて書けるところは、できるだけまとめて書きました。

僕は、テーマにSimplicityを利用しているので、以下ではSimplicityのカスタマイズをベースに説明しています。ただ、他のテーマを利用していても、同様の手順になります。

Sidrのダウンロード＆設置

まずは、Sidrからファイルをダウンロードします。

ダウンロードすると「sidr-package-x.x.x.zip」というファイルが作成されるので、解凍してください。

中にある必要なファイルは以下です。

stylesheets/jquery.sidr.dark.css（暗い色のスタイル）
stylesheets/jquery.sidr.light.css（明るい色のスタイル）
jquery.sidr.min.js（スライドイン表示させるためのスクリプト）

今回は、暗めの色を利用するので、「jquery.sidr.dark.css」と「jquery.sidr.min.js」のファイルのみを利用します。（明るめのスライドメニューを作成したい場合は「jquery.sidr.light.css」を使用してください。）

今回は、子テーマ内に以下のように配置しました。

css/jquery.sidr.dark.css（暗い色のスタイル）
css/sidr-menu.css（今回作成するメニューやボタンのスタイルを書くファイル）
js/jquery.sidr.min.js（スライドイン表示させるためのスクリプト）

それぞれ、CSSは「css」フォルダを作成し、JSファイルは「js」フォルダを作成し、その中にSidrのファイルをコピペしました。

あと、「css」フォルダには、「sidr-menu.css」という空のファイルを作成しておきます。これは、後でボタンのスタイルや、Sidrでスライドインして表示される部分のスタイルを整えるために利用します。

CSSファイルの呼び出し

photo by Maurice Svay

まずは、CSSファイルの呼び出しです。

<head></head>内に以下のように書いてCSSを呼び出してください。

<?php if ( wp_is_mobile() ): ?>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/jquery.sidr.dark.css">
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/sidr-menu.css">
<?php endif; ?>

<?php if ( wp_is_mobile() ): ?>

<?php endif; ?>

モバイルのみでの利用になりますので、wp_is_mobile()を利用してモバイルの時のみ呼び出すようにしています。

今回、Font Awesomeのアイコンフォントを利用するので、CDNでFont Awesomeを呼び出しています。もう既に、テーマで呼び出している場合は、Font Awesome部分を削除してください。

スクリプトファイルの呼び出しとjQueryコードの記入

photo by Dmitry Baranovskiy

次に、以下のことを行います。

操作ボタン部分のHTMLを記入する
Sidrスクリプトファイル呼び出す
操作を実行するjQueryスクリプトを書く

これらを、まとめて書いたのが以下になります。</body>手前あたりに記入してください。

<?php
////////////////////////////////////////
// ボタンやSidrの実装部分
////////////////////////////////////////
if ( wp_is_mobile() ): ?>
<!-- 検索フォーム -->
<div id="mobile-search-box">
  <?php get_template_part('searchform'); ?>
</div>
<!-- フッターメニュー -->
<div id="footer-mobile-buttons">
  <a id="footer-button-menu" href="#navi">
    <div class="menu-icon"><span class="fa fa-bars"></span></div>
    <div class="menu-caption">Menu</div>
  </a>
  <a id="footer-button-search" href="#">
    <div class="menu-icon"><span class="fa fa-search"></span></div>
    <div class="menu-caption">Search</div>
  </a>
  <?php //前後の記事を取得
  $prevpost = get_adjacent_post(false, '', true); //前の記事
  $nextpost = get_adjacent_post(false, '', false); //次の記事
  if ( is_single() )://投稿ページのとき ?>
    <?php if ( $prevpost )://前の記事があるとし ?>
    <a id="footer-button-prev" href="<?php echo get_permalink($prevpost->ID); ?>" title="<?php echo get_the_title($prevpost->ID); ?>">
      <div class="menu-icon"><span class="fa fa-arrow-left"></span></div>
      <div class="menu-caption">Prev</div>
    </a>
    <?php endif ?>
    <?php if ( $nextpost )://次の記事があるとき ?>
    <a id="footer-button-next" href="<?php echo get_permalink($nextpost->ID); ?>" title="<?php echo get_the_title($nextpost->ID); ?>">
      <div class="menu-icon"><span class="fa fa-arrow-right"></span></div>
      <div class="menu-caption">Next</div>
    </a>
    <?php endif ?>
  <?php endif;//is_single ?>
  <a id="footer-button-go-to-top" href="#">
    <div class="menu-icon"><span class="fa fa-arrow-up"></span></div>
    <div class="menu-caption">Top</div>
  </a>
  <a id="footer-button-sidebar" href="#sidebar">
    <div class="menu-icon"><span class="fa fa-outdent"></span></div>
    <div class="menu-caption">Sidebar</div>
  </a>
</div>

<!-- Sidrスクリプトの呼び出し -->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.sidr.min.js"></script>

<script>
jQuery(document).ready(function() {
  //ページトップへスクロール移動する
  jQuery('#footer-button-go-to-top').click(function(){
    jQuery('body,html').animate({
            scrollTop: 0
        }, 800);
  });

  //モバイルの検索フォーム動作
  jQuery('#footer-button-search').click(function(){
    if (jQuery('#mobile-search-box').css('display') == 'none'){
      jQuery('#mobile-search-box').fadeIn('normal');
      jQuery('#footer-button-search .menu-icon span').
        removeClass('fa-search').addClass('fa-times');
    } else {
      jQuery('#mobile-search-box').fadeOut('normal');
      jQuery('#footer-button-search .menu-icon span').
        removeClass('fa-times').addClass('fa-search');
    }
  });

  //検索リンククリック動作をキャンセル
  jQuery('a#footer-button-search').on('click', function(e){
      e.preventDefault()
  });


  //Sidrメニュー表示
  jQuery('#footer-button-menu').sidr({
    name: 'navi',
    side: 'left',
    onOpen: function(name) {
      jQuery('#footer-button-menu .menu-icon span').
        removeClass('fa-bars').addClass('fa-times');
    },
    onClose: function(name) {
      jQuery('#footer-button-menu .menu-icon span').
        removeClass('fa-times').addClass('fa-bars');
    },
  });
  jQuery('#footer-button-sidebar').sidr({
    name: 'sidebar',
    side: 'right',
    onOpen: function(name) {
      jQuery('#footer-button-sidebar .menu-icon span').
        removeClass('fa-outdent').addClass('fa-times');
    },
    onClose: function(name) {
      jQuery('#footer-button-sidebar .menu-icon span').
        removeClass('fa-times').addClass('fa-outdent');
    },
  });
});
</script>
<?php endif; ?>

100

101

102

103

104

105

<?php

////////////////////////////////////////

// ボタンやSidrの実装部分

////////////////////////////////////////

if ( wp_is_mobile() ): ?>

<?php get_template_part('searchform'); ?>

</div>

</a>

<div class="menu-caption">Search</div>

</a>

<?php //前後の記事を取得

$prevpost = get_adjacent_post(false, '', true); //前の記事

$nextpost = get_adjacent_post(false, '', false); //次の記事

if ( is_single() )://投稿ページのとき ?>

<?php if ( $prevpost )://前の記事があるとし ?>

<a id="footer-button-prev" href="<?php echo get_permalink($prevpost->ID); ?>" title="<?php echo get_the_title($prevpost->ID); ?>">

</a>

<?php endif ?>

<?php if ( $nextpost )://次の記事があるとき ?>

<a id="footer-button-next" href="<?php echo get_permalink($nextpost->ID); ?>" title="<?php echo get_the_title($nextpost->ID); ?>">

</a>

<?php endif ?>

<?php endif;//is_single ?>

</a>

<div class="menu-caption">Sidebar</div>

</a>

</div>

jQuery(document).ready(function() {

//ページトップへスクロール移動する

jQuery('#footer-button-go-to-top').click(function(){

jQuery('body,html').animate({

scrollTop: 0

}, 800);

});

//モバイルの検索フォーム動作

jQuery('#footer-button-search').click(function(){

if (jQuery('#mobile-search-box').css('display') == 'none'){

jQuery('#mobile-search-box').fadeIn('normal');

jQuery('#footer-button-search .menu-icon span').

removeClass('fa-search').addClass('fa-times');

} else {

jQuery('#mobile-search-box').fadeOut('normal');

jQuery('#footer-button-search .menu-icon span').

removeClass('fa-times').addClass('fa-search');

}

});

//検索リンククリック動作をキャンセル

jQuery('a#footer-button-search').on('click', function(e){

e.preventDefault()

});

//Sidrメニュー表示

jQuery('#footer-button-menu').sidr({

side: 'left',

onOpen: function(name) {

jQuery('#footer-button-menu .menu-icon span').

removeClass('fa-bars').addClass('fa-times');

onClose: function(name) {

jQuery('#footer-button-menu .menu-icon span').

removeClass('fa-times').addClass('fa-bars');

});

jQuery('#footer-button-sidebar').sidr({

side: 'right',

onOpen: function(name) {

jQuery('#footer-button-sidebar .menu-icon span').

removeClass('fa-outdent').addClass('fa-times');

onClose: function(name) {

jQuery('#footer-button-sidebar .menu-icon span').

removeClass('fa-times').addClass('fa-outdent');

});

</script>

<?php endif; ?>

こちらも、モバイルの時のみの利用なので、wp_is_mobile()を利用して、分岐しています。

コメントに、書いてあるので細かな説明は省きますが、簡単に説明すると、それぞれは以下のようになっています。

操作ボタン部分のHTML

インターフェースとなるHTMLの部分です。ここで、検索フォームも作成しています。

<!-- 検索フォーム -->
<div id="mobile-search-box">
  <?php get_template_part('searchform'); ?>
</div>
<!-- フッターメニュー -->
<div id="footer-mobile-buttons">
  <a id="footer-button-menu" href="#navi">
    <div class="menu-icon"><span class="fa fa-bars"></span></div>
    <div class="menu-caption">Menu</div>
  </a>
  <a id="footer-button-search" href="#">
    <div class="menu-icon"><span class="fa fa-search"></span></div>
    <div class="menu-caption">Search</div>
  </a>
  <?php //前後の記事を取得
  $prevpost = get_adjacent_post(false, '', true); //前の記事
  $nextpost = get_adjacent_post(false, '', false); //次の記事
  if ( is_single() )://投稿ページのとき ?>
    <?php if ( $prevpost )://前の記事があるとし ?>
    <a id="footer-button-prev" href="<?php echo get_permalink($prevpost->ID); ?>" title="<?php echo get_the_title($prevpost->ID); ?>">
      <div class="menu-icon"><span class="fa fa-arrow-left"></span></div>
      <div class="menu-caption">Prev</div>
    </a>
    <?php endif ?>
    <?php if ( $nextpost )://次の記事があるとき ?>
    <a id="footer-button-next" href="<?php echo get_permalink($nextpost->ID); ?>" title="<?php echo get_the_title($nextpost->ID); ?>">
      <div class="menu-icon"><span class="fa fa-arrow-right"></span></div>
      <div class="menu-caption">Next</div>
    </a>
    <?php endif ?>
  <?php endif;//is_single ?>
  <a id="footer-button-go-to-top" href="#">
    <div class="menu-icon"><span class="fa fa-arrow-up"></span></div>
    <div class="menu-caption">Top</div>
  </a>
  <a id="footer-button-sidebar" href="#sidebar">
    <div class="menu-icon"><span class="fa fa-outdent"></span></div>
    <div class="menu-caption">Sidebar</div>
  </a>
</div>

<?php get_template_part('searchform'); ?>

</div>

</a>

<div class="menu-caption">Search</div>

</a>

<?php //前後の記事を取得

$prevpost = get_adjacent_post(false, '', true); //前の記事

$nextpost = get_adjacent_post(false, '', false); //次の記事

if ( is_single() )://投稿ページのとき ?>

<?php if ( $prevpost )://前の記事があるとし ?>

<a id="footer-button-prev" href="<?php echo get_permalink($prevpost->ID); ?>" title="<?php echo get_the_title($prevpost->ID); ?>">

</a>

<?php endif ?>

<?php if ( $nextpost )://次の記事があるとき ?>

<a id="footer-button-next" href="<?php echo get_permalink($nextpost->ID); ?>" title="<?php echo get_the_title($nextpost->ID); ?>">

</a>

<?php endif ?>

<?php endif;//is_single ?>

</a>

<div class="menu-caption">Sidebar</div>

</a>

</div>

「←」や「→」は、投稿ページのみの呼び出しになっています。あと、記事がない場合は表示されないようになっています。

変更点

あと注意点として、以下の「#navi」部分は、ご使用のテーマのグローバルナビのIDを入れてください。

「#sidebar」部分は、使用テーマのサイドバーのIDを記入してください。

Sidrスクリプトファイルの呼び出し

こちらは、Sidrのスクリプトファイルの呼び出しです。

<!-- Sidrスクリプトの呼び出し -->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.sidr.min.js"></script>

1 2	<!-- Sidrスクリプトの呼び出し --> <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.sidr.min.js"></script>

こちらは、実行スクリプトの前に呼び出す必要があります。

操作を実行するjQueryスクリプト

最後に、jQueryで動的に実行する部分を書きます。

やっていることは以下の4つです。

「Top」ボタンでページトップにスクロール移動する動作
「Search」ボタンで検索フォームの表示/非表示
「Search」ボタンのデフォルトのリンク動作をしない
Sidrでスライドインさせる実行コード

<script>
jQuery(document).ready(function() {
  //ページトップへスクロール移動する
  jQuery('#footer-button-go-to-top').click(function(){
    jQuery('body,html').animate({
            scrollTop: 0
        }, 800);
  });

  //モバイルの検索フォーム動作
  jQuery('#footer-button-search').click(function(){
    if (jQuery('#mobile-search-box').css('display') == 'none'){
      jQuery('#mobile-search-box').fadeIn('normal');
      jQuery('#footer-button-search .menu-icon span').
        removeClass('fa-search').addClass('fa-times');
    } else {
      jQuery('#mobile-search-box').fadeOut('normal');
      jQuery('#footer-button-search .menu-icon span').
        removeClass('fa-times').addClass('fa-search');
    }
  });

  //検索リンククリック動作をキャンセル
  jQuery('a#footer-button-search').on('click', function(e){
      e.preventDefault()
  });


  //Sidrメニュー表示
  jQuery('#footer-button-menu').sidr({
    name: 'navi',
    side: 'left',
    onOpen: function(name) {
      jQuery('#footer-button-menu .menu-icon span').
        removeClass('fa-bars').addClass('fa-times');
    },
    onClose: function(name) {
      jQuery('#footer-button-menu .menu-icon span').
        removeClass('fa-times').addClass('fa-bars');
    },
  });
  jQuery('#footer-button-sidebar').sidr({
    name: 'sidebar',
    side: 'right',
    onOpen: function(name) {
      jQuery('#footer-button-sidebar .menu-icon span').
        removeClass('fa-outdent').addClass('fa-times');
    },
    onClose: function(name) {
      jQuery('#footer-button-sidebar .menu-icon span').
        removeClass('fa-times').addClass('fa-outdent');
    },
  });
});
</script>

jQuery(document).ready(function() {

//ページトップへスクロール移動する

jQuery('#footer-button-go-to-top').click(function(){

jQuery('body,html').animate({

scrollTop: 0

}, 800);

});

//モバイルの検索フォーム動作

jQuery('#footer-button-search').click(function(){

if (jQuery('#mobile-search-box').css('display') == 'none'){

jQuery('#mobile-search-box').fadeIn('normal');

jQuery('#footer-button-search .menu-icon span').

removeClass('fa-search').addClass('fa-times');

} else {

jQuery('#mobile-search-box').fadeOut('normal');

jQuery('#footer-button-search .menu-icon span').

removeClass('fa-times').addClass('fa-search');

}

});

//検索リンククリック動作をキャンセル

jQuery('a#footer-button-search').on('click', function(e){

e.preventDefault()

});

//Sidrメニュー表示

jQuery('#footer-button-menu').sidr({

side: 'left',

onOpen: function(name) {

jQuery('#footer-button-menu .menu-icon span').

removeClass('fa-bars').addClass('fa-times');

onClose: function(name) {

jQuery('#footer-button-menu .menu-icon span').

removeClass('fa-times').addClass('fa-bars');

});

jQuery('#footer-button-sidebar').sidr({

side: 'right',

onOpen: function(name) {

jQuery('#footer-button-sidebar .menu-icon span').

removeClass('fa-outdent').addClass('fa-times');

onClose: function(name) {

jQuery('#footer-button-sidebar .menu-icon span').

removeClass('fa-times').addClass('fa-outdent');

});

</script>

Sidrの実行では、onOpen、onCloseなどを利用して、スライドイン、スライドアウト時に動作を割り当てることができます。これにより、トグルボタンを実装しています。

変更点

HTML要素にSidr動作を割り当てるために、以下のname部分は、グローバルナビのIDを記入してください。

jQuery('#footer-button-menu').sidr({
  name: 'navi',
  side: 'left',
  onOpen: function(name) {
    jQuery('#footer-button-menu .menu-icon span').
      removeClass('fa-bars').addClass('fa-times');
  },
  onClose: function(name) {
    jQuery('#footer-button-menu .menu-icon span').
      removeClass('fa-times').addClass('fa-bars');
  },
});

jQuery('#footer-button-menu').sidr({

side: 'left',

onOpen: function(name) {

jQuery('#footer-button-menu .menu-icon span').

removeClass('fa-bars').addClass('fa-times');

onClose: function(name) {

jQuery('#footer-button-menu .menu-icon span').

removeClass('fa-times').addClass('fa-bars');

});

以下のname部分は、サイドバーのIDを入力してください。

jQuery('#footer-button-sidebar').sidr({
  name: 'sidebar',
  side: 'right',
  onOpen: function(name) {
    jQuery('#footer-button-sidebar .menu-icon span').
      removeClass('fa-outdent').addClass('fa-times');
  },
  onClose: function(name) {
    jQuery('#footer-button-sidebar .menu-icon span').
      removeClass('fa-times').addClass('fa-outdent');
  },
});

jQuery('#footer-button-sidebar').sidr({

side: 'right',

onOpen: function(name) {

jQuery('#footer-button-sidebar .menu-icon span').

removeClass('fa-outdent').addClass('fa-times');

onClose: function(name) {

jQuery('#footer-button-sidebar .menu-icon span').

removeClass('fa-times').addClass('fa-outdent');

});

name部分が、HTML要素にうまく割り当てられていないと、Sidrは動作しません。

CSSで見た目の調整

最後に、ボタンのスタイルの指定と、Sidrでスライドインされるエリアの見た目を調整します。

先程作成した、「css/sidr-menu.css」に以下のスタイルをコピペします。

/************************************
** メニュースタイルの調整
************************************/
div#navi {
  display: none;
  max-width: 260px;
}
div#navi ul{display: block !important;}
div#navi ul li {
    float:none;
    border-top:0px;
    line-height: 25px !important;
    background-color: #333;
}

div#navi ul li a{
  color: #fff;
  background-color: transparent;
}

div#navi ul li a:hover{
  background-color: #444;
}

div#navi ul.sub-menu,
div#navi ul.children {
    background-color: #777;
    border-width: 0;
    position: relative;
    width: auto;
    display: block !important;
    margin-left: 1em;
    background-color: #333;
    left: 0;
    top: 0;
}

div#navi ul.sub-menu li,
div#navi ul.children li{
  height: auto;
  padding-left: 0;
}

/************************************
** メニューサイドバースタイルの調整
************************************/
div#sidebar{
  /*background-color: #eee;*/
  width: 336px;
  padding: 5px;
  float: right;
  position: fixed !important;
  display: none;
}

@media screen and (max-width:639px){
  div#sidebar{
    width: 300px;
  }
}
@media screen and (max-width:440px){
  div#sidebar{
    width: 260px;
  }
}

div#sidebar a{
  color: #fff;
}

div#sidebar a:hover{
  box-shadow: none;
  color: yellow;
}

div#sidebar #s{
  background-color: #fff;
}

div.sidr {
  font-family: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size: 14px;
  color: #ccc;
}

div.sidr p{
  font-size: 14px;
}

div.sidr h1,
div.sidr h2,
div.sidr h3,
div.sidr h4,
div.sidr h5,
div.sidr h6{
  background-image: none;
  box-shadow: none;
  font-weight: bold;
  padding: 0 5px;
}

div.sidr ul li,
div.sidr ul li:hover {
    border-bottom: none;
    border-top: none;
    display: block;
    line-height: 130%;
}

div..sidr ul li ul li:hover,
div..sidr ul li ul li.active,
div..sidr ul li ul li.sidr-class-active{
  border-top: unset;
}

div.sidr ul li a,
div.sidr ul li span{
  display: inline;
}

div.sidr #new-entries a,
div.sidr #popular-entries a,
div.sidr .wpp-list a,
div.sidr .article-list
div.sidr .entry-title a{
  display: block;
}


/************************************
** フッターのモバイルメニュー
************************************/
#footer-mobile-buttons{
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f7f7f7;
  text-align: center;
  opacity: 0.95;
  height: 45px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

#footer-mobile-buttons a{
  color: #333;
  text-decoration: none;
  display: block;
  position: relative;
  float: left;
  width: 500px;
  font-family: arial;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#footer-mobile-buttons a:hover{
  background-color: #eee;
}

#footer-mobile-buttons a .menu-icon{
  font-size: 1.4em;
}

#footer-mobile-buttons a .menu-caption{
  font-size: 0.8em;
  position: relative;
}

#footer-mobile-buttons .fa-times{
  color: #D40000;
}


/************************************
** 不要なボタンを削除
************************************/
#page-top,
#mobile-menu {
  display: none !important;
}

/************************************
** 不要なボタンを削除
************************************/
#mobile-search-box{
  background-color: #f7f7f7;
  opacity: 0.95;
  position: fixed;
  bottom: 45px;
  width: 100%;
  padding: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
}

#mobile-search-box #searchform,
#mobile-search-box #searchsubmit,
#mobile-search-box #s{
  margin: 0;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

/************************************

** メニュースタイルの調整

************************************/

div#navi {

display: none;

max-width: 260px;

}

div#navi ul{display: block !important;}

div#navi ul li {

float:none;

border-top:0px;

line-height: 25px !important;

background-color: #333;

}

div#navi ul li a{

color: #fff;

background-color: transparent;

}

div#navi ul li a:hover{

background-color: #444;

}

div#navi ul.sub-menu,

div#navi ul.children {

background-color: #777;

border-width: 0;

position: relative;

width: auto;

display: block !important;

margin-left: 1em;

background-color: #333;

left: 0;

top: 0;

}

div#navi ul.sub-menu li,

div#navi ul.children li{

height: auto;

padding-left: 0;

}

/************************************

** メニューサイドバースタイルの調整

************************************/

div#sidebar{

/*background-color: #eee;*/

width: 336px;

padding: 5px;

float: right;

position: fixed !important;

display: none;

}

@media screen and (max-width:639px){

div#sidebar{

width: 300px;

}

@media screen and (max-width:440px){

div#sidebar{

width: 260px;

}

div#sidebar a{

color: #fff;

}

div#sidebar a:hover{

box-shadow: none;

color: yellow;

}

div#sidebar #s{

background-color: #fff;

}

div.sidr {

font-family: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;

font-size: 14px;

color: #ccc;

}

div.sidr p{

font-size: 14px;

}

div.sidr h1,

div.sidr h2,

div.sidr h3,

div.sidr h4,

div.sidr h5,

div.sidr h6{

box-shadow: none;

font-weight: bold;

padding: 0 5px;

}

div.sidr ul li,

div.sidr ul li:hover {

border-bottom: none;

border-top: none;

display: block;

line-height: 130%;

}

div..sidr ul li ul li:hover,

div..sidr ul li ul li.active,

div..sidr ul li ul li.sidr-class-active{

border-top: unset;

}

div.sidr ul li a,

div.sidr ul li span{

display: inline;

}

div.sidr #new-entries a,

div.sidr #popular-entries a,

div.sidr .wpp-list a,

div.sidr .article-list

div.sidr .entry-title a{

display: block;

}

/************************************

** フッターのモバイルメニュー

************************************/

#footer-mobile-buttons{

position: fixed;

bottom: 0;

width: 100%;

background-color: #f7f7f7;

text-align: center;

opacity: 0.95;

height: 45px;

display: -webkit-flex;

display: -moz-flex;

display: -ms-flex;

display: -o-flex;

display: flex;

}

#footer-mobile-buttons a{

color: #333;

text-decoration: none;

display: block;

position: relative;

float: left;

width: 500px;

font-family: arial;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

#footer-mobile-buttons a:hover{

background-color: #eee;

}

#footer-mobile-buttons a .menu-icon{

font-size: 1.4em;

}

#footer-mobile-buttons a .menu-caption{

font-size: 0.8em;

position: relative;

}

#footer-mobile-buttons .fa-times{

color: #D40000;

}

/************************************

** 不要なボタンを削除

************************************/

#page-top,

#mobile-menu {

display: none !important;

}

/************************************

** 不要なボタンを削除

************************************/

#mobile-search-box{

background-color: #f7f7f7;

opacity: 0.95;

position: fixed;

bottom: 45px;

width: 100%;

padding: 5px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

display: none;

}

#mobile-search-box #searchform,

#mobile-search-box #searchsubmit,

#mobile-search-box #s{

margin: 0;

}

Sidrで動的にスタイルが書き換えられてしまうので、表示がおかしくなるところは、改めてスタイルを再設定しています。もっと、スマートな方法があるのかもしれないけれど、CSSで上書きする形にしました。

Simplicityの要素に合わせた書き方になっていますが、テーマの要素にCSSセレクタを書き換えて利用してください。

ボタンの均等幅表示はCSSのFlexBoxを利用しています。

#footer-mobile-buttons{
  /*中略*/
  display: flex;
}

#footer-mobile-buttons a{
  /*中略*/
  width: 500px;
}

#footer-mobile-buttons{

/*中略*/

display: flex;

}

#footer-mobile-buttons a{

/*中略*/

width: 500px;

}

最近初めて、FlexBoxを使ってみたのですが、めちゃくちゃ便利ですねこれ。（※最新のモダンブラウザではおおよそ大丈夫ですが、ブラウザによっては、動作に変化があったりするのが難点。）

参考 CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG

参考 CSS Layout – Flexbox

動作確認

上記のようにカスタマイズして、グローバルナビのスライドインメニューと、サイドバーのスライドインエリアを実装することができました。

このサイトでも、スマホで表示させた場合は、同様の仕様になっています。（※キャッシュが残っていると正常動作しないので、表示が崩れたり、ボタンが動作しない場合などは、リロードボタン押してください。）

子テーマのダウンロード

一応、今回作成したSimplicityの子テーマを以下に置いておきます。

Sidrファイルを放り込んだあと、編集したのは以下のファイルのみです。

css/sidr-menu.css
header-insert.php（CSSファイルの呼び出し）
footer-insert.php（HTMLとjQueryコード）

ダウンロード

まとめ

このような感じで、スマホ操作用のインターフェースを作成してみました。

スマホの操作は好みが分かれると思うので、これらが便利かどうかはさておき、サイドバーなどは、面白い仕様になったのではないかと思います。

スタイルの細かな部分は、まだ調整が必要かもしれませんが、それぞれのテーマに合わせて調整していただけると幸いです。

同時に読まれている記事

『WordPressのメニューとサイドバーをスマホ用に横からスライドイン表示させるカスタマイズ方法』へのコメント

名前:さや投稿日：2015/03/21(土) 08:11:24 ID：1943e7733

わいひらさん、おはようございます。

上記、子テーマを使用してもボタンは表示されるのですが
メニュー、サイドバーが表示されません。

よろしくお願いします
名前:わいひら投稿日：2015/03/21(土) 13:38:39 ID：df92dc95e

こちらの環境では、動作しているので、上記の情報のみから推測するとしたら、キャシュが原因のような気がします。

ブラウザをリロードしてだめなら、キャッシュを削除してください。
また、他にも以下にあるようなことが原因の可能性もあります。
http://wp-simplicity.com/trouble-guideline/
名前:dalahast 投稿日：2015/03/22(日) 09:59:06 ID：8926b131e

わいひらさん、こんにちは。早速実装してみましたところ以下現象がでております。

【現象】
Menuのスライドは問題なく表示されるのですが、
Slidebarのスライドはスライドはできるが、スライドインするサイドバーがなぜか大きさがPC版のままで表示される。

追加で質問ですが、寝ログサイトをスマホで表示し、スライドバー（Menu,Sidebarとも)上部に「×」でクローズできるようになっていますが、こちらはどのように設定すればよいのでしょうか？
デフォルトでは下部のナビゲーション上で「×」をすることでクローズできるようになっているのですが、感覚的に寝ログサイトのような位置が使いやすかったのでご質問させていただきました。

宜しくおねがいいたします。
名前:わいひら投稿日：2015/03/22(日) 11:32:49 ID：fa0e72ded

dalahasさんこんにちは。

サイトを拝見して見たところ、幅はちゃんと表示されているようです。
そうなると現状、一番怪しいのはブラウザキャッシュということぐらいしかわからないです。

あと、この記事はあくまで「こうしたらこのようにできますよ」というサンプルですので、変更部分のカスタマイズは自前で実装していただくしかないです。

もう既に、Simplicityには実装してあって、次のバージョンを公開するのみとなっているので、それまで待つという手もあります。
名前:dalahast 投稿日：2015/03/22(日) 12:46:11 ID：8926b131e

>>Simplicityには実装してあって

ますます使い勝手がよくなって助かります。
次のバージョン公開楽しみにしております！
名前:ころろ投稿日：2015/10/23(金) 08:19:37 ID：12fb1384e

こんにちは。いつもお世話になります(^o^)ありがとうございます。

こちらをダウンロードして、実装したところ、同じようにサイドバーしか表示されませんでした。

それで一瞬見えたのですが、
サイドバーのメニューの下に他のアイコンが縦に並んでいる？みたいでした。
気力尽きて、まだ続きを手をつけていない所なのですが

縦に並んでいる可能性はありますでしょうか？
何とか部分的にはいじれても、基本を理解してないので、自分の思うようにCSSを組み立てられないレベルです。すみません。
よろしくお願いいたします。
名前:ころろ投稿日：2015/10/23(金) 19:59:38 ID：9c60759fb

すみません！新しいバージョンで実装されていたのを見つけられずにコメントしてしまいました。ちゃんと表示できました。
いつも素晴らしい機能開発を本当にありがとうございます。
名前:わいひら投稿日：2015/11/14(土) 11:02:40 ID：a210ea93e

返信が遅れて申しわけありません。
うまくいったようでよかったです。
基本的に、寝ログで紹介しているカスタマイズ記事は、Simplicityで実装していることも多いです。（全てではないです）
名前:シルバーノート投稿日：2016/12/15(木) 23:39:51 ID：f67abd125

いつもSimplicity使わせて頂いております。
上記コピペで私もメニュー、サイドバーが表示されません。
メニューを押すとスライドし真っ白な空間へ。
サイドバーは押すとブラウザバックしないと何もできなくなります。
キャッシュを消してみたのですがダメでした。
何か解決策はありますでしょうか？
名前:わいひら投稿日：2016/12/16(金) 17:39:47 ID：e4fe65bc1

Simplicityをご利用とのことであれば、既にこの機能は実装してあります。
Wordpress管理画面から「外観→カスタマイズ」の「レイアウト（モバイル）」項目から「モバイルメニュータイプ」を「スライドイン…」に変更するのではダメでしょうか？
名前:はる投稿日：2017/11/11(土) 12:03:40 ID：e852dea37

こんにちは
simplicityを使わせていただいてます
スライドインメニューのメニューをサイドバー(スライドインメニューのサイドバーとは別のサイドバーは作成可能)に変更したいのですが、どこをどのように変えたらいいのかわかりません

結果としては、メニューにウィジェット(テキスト)が使いたいのですが、使えないようなのでサイドバーをメニューに代用させたいです

よろしくお願いします
名前:わいひら投稿日：2017/11/11(土) 21:48:28 ID：427c83b19

こんにちは。
当記事は、あくまでサンプルコードです。
カスタマイズ方法の指南はまた別で、仕事の範疇になってくると思います。
ただ僕は今現在忙しく、有料だとしても詳しく内容（仕様）を聞いて、説明する時間的余裕は申し訳ないですがありません。
個別のカスタマイズでしたら、業者もしくは、クラウドワークス等でご依頼いただければと思います。