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; ?>
モバイルのみでの利用になりますので、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; ?>こちらも、モバイルの時のみの利用なので、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>「←」や「→」は、投稿ページのみの呼び出しになっています。あと、記事がない場合は表示されないようになっています。
変更点
あと注意点として、以下の「#navi」部分は、ご使用のテーマのグローバルナビのIDを入れてください。
<a id=”footer-button-menu” href=”#navi“>
「#sidebar」部分は、使用テーマのサイドバーのIDを記入してください。
<a id=”footer-button-sidebar” href=”#sidebar“>
Sidrスクリプトファイルの呼び出し
こちらは、Sidrのスクリプトファイルの呼び出しです。
<!-- 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>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');
},
});以下の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');
},
});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;
}Sidrで動的にスタイルが書き換えられてしまうので、表示がおかしくなるところは、改めてスタイルを再設定しています。もっと、スマートな方法があるのかもしれないけれど、CSSで上書きする形にしました。
Simplicityの要素に合わせた書き方になっていますが、テーマの要素にCSSセレクタを書き換えて利用してください。
ボタンの均等幅表示はCSSのFlexBoxを利用しています。
#footer-mobile-buttons{
/*中略*/
display: flex;
}
#footer-mobile-buttons a{
/*中略*/
width: 500px;
}最近初めて、FlexBoxを使ってみたのですが、めちゃくちゃ便利ですねこれ。（※最新のモダンブラウザではおおよそ大丈夫ですが、ブラウザによっては、動作に変化があったりするのが難点。）
参考 CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG
動作確認
上記のようにカスタマイズして、グローバルナビのスライドインメニューと、サイドバーのスライドインエリアを実装することができました。
このサイトでも、スマホで表示させた場合は、同様の仕様になっています。（※キャッシュが残っていると正常動作しないので、表示が崩れたり、ボタンが動作しない場合などは、リロードボタン押してください。）
子テーマのダウンロード
一応、今回作成したSimplicityの子テーマを以下に置いておきます。
Sidrファイルを放り込んだあと、編集したのは以下のファイルのみです。
- css/sidr-menu.css
- header-insert.php（CSSファイルの呼び出し）
- footer-insert.php（HTMLとjQueryコード）
まとめ
このような感じで、スマホ操作用のインターフェースを作成してみました。
スマホの操作は好みが分かれると思うので、これらが便利かどうかはさておき、サイドバーなどは、面白い仕様になったのではないかと思います。
スタイルの細かな部分は、まだ調整が必要かもしれませんが、それぞれのテーマに合わせて調整していただけると幸いです。
わいひらさん、おはようございます。
上記、子テーマを使用してもボタンは表示されるのですが
メニュー、サイドバーが表示されません。
よろしくお願いします