モバイルでサイトを表示した時に通常WordPressのほとんどのテーマでは画面トップ辺りにある「」ボタン（いわゆるハンバーガーメニューと呼ばれるもの）をタップしてメニューを表示するようになっていますよね？？

以前から私はこのメニューについて「これをタップされることってあるのかな？？」と疑問に思っていました。実際どうなんでしょう？？

また、画面上に戻るためのスクロールボタンがずっと画面の右（左）下にくっついているのは画面の小さいモバイルデバイスでは邪魔なんじゃないの？と思っていました（【ha-Basic】テーマでは表示しないようにしています）。これもどうなんでしょう？？

更にはモバイル表示時のサイドバーの表示方法、多くのテーマで本文の下に回り込んで表示されるのが定番で、もちろん【ha-Basic】でも同様なのですが、無駄にページが長くなることと、そこまでずーっとスクロールして見てもらえるのか？

このような３つの疑問がありました。最近ではモバイルで訪問される方が増えてきていて、できればこれらの疑問を払拭できるような表示方法を採用したい！！どうやったらいいの？？でそれらを何とかすっきりさせたいと思って得意の？？プラグインを探したのですがなかなかいいものが見つからず・・・。

まあ一応表示できてるんだしそのままでいいか・・・と思いながら月日が経過したある日、たまたま辿り着いたのが

• 画面下にずーっとついてくる（追従する）ボタンエリアがある
• タップしたら左からメニューがスライド表示される
• タップしたら「画面上に戻る」「前後の記事を表示する」「ホームへ戻る」
• タップしたら右からサイドバー部分がスライド表示される

という風に表示されるサイト。そう！やりたかったのはこれです！！

これどうやってるんだろう？？でいろいろ調べたら、実装方法を紹介してくれているありがたいサイトがありました！！（後述）。今回はその紹介ページを元に、【ha-Basic】テーマで下部追従型のメニューなどを表示するコンテンツを作る方法を紹介します。

どんな風に表示されるのか？？

文字で説明してもなかなか伝わらないので、スクリーンショットと実際に導入しているサイトを紹介します。

まずスクリーンショットですが

のようにトップページやアーカイブページでは前後の記事リンクがなく、個別投稿では前後リンクが追加されるような表示になり、ページをスクロールしてもずっと表示される（追従表示される）ようになっています。

ページ上部へ戻る▲

モバイル追従メニューの作成で参考にさせていただいたサイト

モバイル表示時に下部へ追従メニューを表示する方法の紹介をする前に、この機能を追加するにあたって参考にさせていただいたサイトを紹介させていただきます。この機能を実現するきっかけになったのは、私が勝手に？師と仰ぐわいひらさんの「寝ログ」の記事です。

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

私の場合、WordPressで〇〇できないかなぁと検索するとほぼ100%わいひらさんの記事に尋ね当たります。コードや解説がたくさんされていていつも本当に参考にさせていただいてます（感謝！感謝！）

この記事を参考に設置するとスライドメニューを出したときに「×」ボタンが表示されないという問題が出るのですが

Simplicityの既知の不具合と対応策まとめ

でしっかりフォローされていました。

※今回紹介する機能のコード類はほぼ上のリンク先記事のものを使わせていただき、【ha-Basic】テーマで問題なく表示されるようにしたものです。

参考記事からの変更点としては・・・

• デザイン要素（CSS）をha-Basicテーマに合うように調整
• この機能に必要なファイル類はすべて１つのフォルダにまとめて機能させる
• Font Awesome 5への対応

・・・ほぼそのまんまやないかい！と言われそうですけどご容赦ください(笑)。

それでははじめましょう！！

ページ上部へ戻る▲

【ha-Basic】テーマでモバイル表示時画面下に追従メニューを表示する設定の流れ

必要なファイル類を作成する

テーマフォルダの中でこの機能に関するファイルをまとめてユニットとしておいた方が管理しやすいので、パソコンにフォルダを作り、そこへファイル類を入れていきます。

まずはデスクトップに「mob-menu」というフォルダを作ってください。

そしてこの機能では左右からスライドしてメニューやサイドバーを表示させるため「Sidr」というjQueryを使いますので、こちらからダウンロードして必要なファイルを・・・はやめて、そのソース自体もここで紹介してより簡単に実装できるようにします。

必要なファイルを作成する

必要なファイルを作成します。これらのファイルのうち、.phpという拡張子のファイルはWordPressで認識される「UTF-8 BOMなし」の形式で作成する必要がありますので、以下を参考にテキストエディタの設定等を行ってください。

作成するファイルは以下の５つです。ファイルを作成したら下のリストの「コードを表示」をクリックしてコードをコピー後、先ほどの「mob-menu」フォルダへ保存してください。

jquery.sidr.light.css

.sidr {
display: block;
position: fixed;
top: 0;
height: 100%;
z-index: 999999;
width: 260px;
overflow-x: hidden;
overflow-y: auto;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 15px;
background: #333;
color: #fff;
box-shadow: 0 0 5px 5px #222 inset;
}
.sidr .sidr-inner {
padding: 0 0 15px;
}
.sidr .sidr-inner > p {
margin-left: 15px;
margin-right: 15px;
}
.sidr.right {
left: auto;
right: -260px;
}
.sidr.left {
left: -260px;
right: auto;
}
.sidr h1,
.sidr h2,
.sidr h3,
.sidr h4,
.sidr h5,
.sidr h6 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFhMWExYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #1a1a1a));
background-image: -moz-linear-gradient(#4d4d4d, #1a1a1a);
background-image: -webkit-linear-gradient(#4d4d4d, #1a1a1a);
background-image: linear-gradient(#4d4d4d, #1a1a1a);
font-size: 11px;
font-weight: normal;
padding: 0 15px;
margin: 0 0 5px;
color: #fff;
line-height: 24px;
box-shadow: 0 5px 5px 3px rgba(0, 0, 0, 0.2);
}
.sidr p {
font-size: 13px;
margin: 0 0 12px;
}
.sidr p a {
color: rgba(255, 255, 255, 0.9);
}
.sidr > p {
margin-left: 15px;
margin-right: 15px;
}
.sidr ul {
display: block;
margin: 0 0 15px;
padding: 0;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #4d4d4d;
}
.sidr ul li {
display: block;
margin: 0;
line-height: 48px;
border-top: 1px solid #4d4d4d;
border-bottom: 1px solid #1a1a1a;
}
.sidr ul li:hover, .sidr ul li.active, .sidr ul li.sidr-class-active {
border-top: 0;
line-height: 49px;
}
.sidr ul li:hover > a,
.sidr ul li:hover > span, .sidr ul li.active > a,
.sidr ul li.active > span, .sidr ul li.sidr-class-active > a,
.sidr ul li.sidr-class-active > span {
box-shadow: 0 0 15px 3px #222 inset;
}
.sidr ul li a,
.sidr ul li span {
padding: 0 15px;
display: block;
text-decoration: none;
color: #fff;
}
.sidr ul li ul {
border-bottom: 0;
margin: 0;
}
.sidr ul li ul li {
line-height: 40px;
font-size: 13px;
}
.sidr ul li ul li:last-child {
border-bottom: 0;
}
.sidr ul li ul li:hover, .sidr ul li ul li.active, .sidr ul li ul li.sidr-class-active {
border-top: 0;
line-height: 41px;
}
.sidr ul li ul li:hover > a,
.sidr ul li ul li:hover > span, .sidr ul li ul li.active > a,
.sidr ul li ul li.active > span, .sidr ul li ul li.sidr-class-active > a,
.sidr ul li ul li.sidr-class-active > span {
box-shadow: 0 0 15px 3px #222 inset;
}
.sidr ul li ul li a,
.sidr ul li ul li span {
color: rgba(255, 255, 255, 0.8);
padding-left: 30px;
}
.sidr form {
margin: 0 15px;
}
.sidr label {
font-size: 13px;
}
.sidr input[type="text"],
.sidr input[type="password"],
.sidr input[type="date"],
.sidr input[type="datetime"],
.sidr input[type="email"],
.sidr input[type="number"],
.sidr input[type="search"],
.sidr input[type="tel"],
.sidr input[type="time"],
.sidr input[type="url"],
.sidr textarea,
.sidr select {
width: 100%;
font-size: 13px;
padding: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0 10px;
border-radius: 2px;
border: 0;
background: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.6);
display: block;
clear: both;
}
.sidr input[type=checkbox] {
width: auto;
display: inline;
clear: none;
}
.sidr input[type=button],
.sidr input[type=submit] {
color: #333;
background: #fff;
}
.sidr input[type=button]:hover,
.sidr input[type=submit]:hover {
background: rgba(255, 255, 255, 0.9);
}

jquery.sidr.min.js

/*! sidr - v2.2.1 - 2016-02-17
* http://www.berriart.com/sidr/
* Copyright (c) 2013-2016 Alberto Varela; Licensed MIT */
!function(){"use strict";function a(a,b,c){var d=new o(b);switch(a){case"open":d.open(c);break;case"close":d.close(c);break;case"toggle":d.toggle(c);break;default:p.error("Method "+a+" does not exist on jQuery.sidr")}}function b(a){return"status"===a?h:s[a]?s[a].apply(this,Array.prototype.slice.call(arguments,1)):"function"!=typeof a&&"string"!=typeof a&&a?void q.error("Method "+a+" does not exist on jQuery.sidr"):s.toggle.apply(this,arguments)}function c(a,b){if("function"==typeof b.source){var c=b.source(name);a.html(c)}else if("string"==typeof b.source&&i.isUrl(b.source))u.get(b.source,function(b){a.html(b)});else if("string"==typeof b.source){var d="",e=b.source.split(",");if(u.each(e,function(a,b){d+='<div class="sidr-inner">'+u(b).html()+"</div>"}),b.renaming){var f=u("<div />").html(d);f.find("*").each(function(a,b){var c=u(b);i.addPrefixes(c)}),d=f.html()}a.html(d)}else null!==b.source&&u.error("Invalid Sidr Source");return a}function d(a){var d=i.transitions,e=u.extend({name:"sidr",speed:200,side:"left",source:null,renaming:!0,body:"body",displace:!0,timing:"ease",method:"toggle",bind:"touchstart click",onOpen:function(){},onClose:function(){},onOpenEnd:function(){},onCloseEnd:function(){}},a),f=e.name,g=u("#"+f);return 0===g.length&&(g=u("<div />").attr("id",f).appendTo(u("body"))),d.supported&&g.css(d.property,e.side+" "+e.speed/1e3+"s "+e.timing),g.addClass("sidr").addClass(e.side).data({speed:e.speed,side:e.side,body:e.body,displace:e.displace,timing:e.timing,method:e.method,onOpen:e.onOpen,onClose:e.onClose,onOpenEnd:e.onOpenEnd,onCloseEnd:e.onCloseEnd}),g=c(g,e),this.each(function(){var a=u(this),c=a.data("sidr"),d=!1;c||(h.moving=!1,h.opened=!1,a.data("sidr",f),a.bind(e.bind,function(a){a.preventDefault(),d||(d=!0,b(e.method,f),setTimeout(function(){d=!1},100))}))})}var e={};e.classCallCheck=function(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")},e.createClass=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}();var f,g,h={moving:!1,opened:!1},i={isUrl:function(a){var b=new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$","i");return b.test(a)?!0:!1},addPrefixes:function(a){this.addPrefix(a,"id"),this.addPrefix(a,"class"),a.removeAttr("style")},addPrefix:function(a,b){var c=a.attr(b);"string"==typeof c&&""!==c&&"sidr-inner"!==c&&a.attr(b,c.replace(/([A-Za-z0-9_.\-]+)/g,"sidr-"+b+"-$1"))},transitions:function(){var a=document.body||document.documentElement,b=a.style,c=!1,d="transition";return d in b?c=!0:!function(){var a=["moz","webkit","o","ms"],e=void 0,f=void 0;d=d.charAt(0).toUpperCase()+d.substr(1),c=function(){for(f=0;f<a.length;f++)if(e=a[f],e+d in b)return!0;return!1}(),d=c?"-"+e.toLowerCase()+"-"+d.toLowerCase():null}(),{supported:c,property:d}}()},j=jQuery,k="sidr-animating",l="open",m="close",n="webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",o=function(){function a(b){e.classCallCheck(this,a),this.name=b,this.item=j("#"+b),this.openClass="sidr"===b?"sidr-open":"sidr-open "+b+"-open",this.menuWidth=this.item.outerWidth(!0),this.speed=this.item.data("speed"),this.side=this.item.data("side"),this.displace=this.item.data("displace"),this.timing=this.item.data("timing"),this.method=this.item.data("method"),this.onOpenCallback=this.item.data("onOpen"),this.onCloseCallback=this.item.data("onClose"),this.onOpenEndCallback=this.item.data("onOpenEnd"),this.onCloseEndCallback=this.item.data("onCloseEnd"),this.body=j(this.item.data("body"))}return e.createClass(a,[{key:"getAnimation",value:function(a,b){var c={},d=this.side;return"open"===a&&"body"===b?c[d]=this.menuWidth+"px":"close"===a&&"menu"===b?c[d]="-"+this.menuWidth+"px":c[d]=0,c}},{key:"prepareBody",value:function(a){var b="open"===a?"hidden":"";if(this.body.is("body")){var c=j("html"),d=c.scrollTop();c.css("overflow-x",b).scrollTop(d)}}},{key:"openBody",value:function(){if(this.displace){var a=i.transitions,b=this.body;if(a.supported)b.css(a.property,this.side+" "+this.speed/1e3+"s "+this.timing).css(this.side,0).css({width:b.width(),position:"absolute"}),b.css(this.side,this.menuWidth+"px");else{var c=this.getAnimation(l,"body");b.css({width:b.width(),position:"absolute"}).animate(c,{queue:!1,duration:this.speed})}}}},{key:"onCloseBody",value:function(){var a=i.transitions,b={width:"",position:"",right:"",left:""};a.supported&&(b[a.property]=""),this.body.css(b).unbind(n)}},{key:"closeBody",value:function(){var a=this;if(this.displace)if(i.transitions.supported)this.body.css(this.side,0).one(n,function(){a.onCloseBody()});else{var b=this.getAnimation(m,"body");this.body.animate(b,{queue:!1,duration:this.speed,complete:function(){a.onCloseBody()}})}}},{key:"moveBody",value:function(a){a===l?this.openBody():this.closeBody()}},{key:"onOpenMenu",value:function(a){var b=this.name;h.moving=!1,h.opened=b,this.item.unbind(n),this.body.removeClass(k).addClass(this.openClass),this.onOpenEndCallback(),"function"==typeof a&&a(b)}},{key:"openMenu",value:function(a){var b=this,c=this.item;if(i.transitions.supported)c.css(this.side,0).one(n,function(){b.onOpenMenu(a)});else{var d=this.getAnimation(l,"menu");c.css("display","block").animate(d,{queue:!1,duration:this.speed,complete:function(){b.onOpenMenu(a)}})}}},{key:"onCloseMenu",value:function(a){this.item.css({left:"",right:""}).unbind(n),j("html").css("overflow-x",""),h.moving=!1,h.opened=!1,this.body.removeClass(k).removeClass(this.openClass),this.onCloseEndCallback(),"function"==typeof a&&a(name)}},{key:"closeMenu",value:function(a){var b=this,c=this.item;if(i.transitions.supported)c.css(this.side,"").one(n,function(){b.onCloseMenu(a)});else{var d=this.getAnimation(m,"menu");c.animate(d,{queue:!1,duration:this.speed,complete:function(){b.onCloseMenu()}})}}},{key:"moveMenu",value:function(a,b){this.body.addClass(k),a===l?this.openMenu(b):this.closeMenu(b)}},{key:"move",value:function(a,b){h.moving=!0,this.prepareBody(a),this.moveBody(a),this.moveMenu(a,b)}},{key:"open",value:function(b){var c=this;if(h.opened!==this.name&&!h.moving){if(h.opened!==!1){var d=new a(h.opened);return void d.close(function(){c.open(b)})}this.move("open",b),this.onOpenCallback()}}},{key:"close",value:function(a){h.opened!==this.name||h.moving||(this.move("close",a),this.onCloseCallback())}},{key:"toggle",value:function(a){h.opened===this.name?this.close(a):this.open(a)}}]),a}(),p=jQuery,q=jQuery,r=["open","close","toggle"],s={},t=function(b){return function(c,d){"function"==typeof c?(d=c,c="sidr"):c||(c="sidr"),a(b,c,d)}};for(f=0;f<r.length;f++)g=r[f],s[g]=t(g);var u=jQuery;jQuery.sidr=b,jQuery.fn.sidr=d}();

sidr-menu.css

div.sidr {
font-family: 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Noto Sans Japanese', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
 
color: #ccc;
}

div.sidr p{
 
}

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: 60px;
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;
}

.footer-nav li {
width: 100%;
float: none!important;
text-align: left;
}

.footer-inner {
padding: 0;
}

aside#sidebar {
background-color: #fff;
}

.sidekiji a {
color: #333!important;
line-height: 1.5em;
}

mobile-menu.php

<?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="#footer-nav">
<div class="menu-icon"><span class="fas fa-bars"></span></div>
<div class="menu-caption">Menu</div>
</a>
<a id="footer-button-search" href="#">
<div class="menu-icon"><i class="fas fa-search"></i></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"><i class="far fa-arrow-alt-circle-left"></i></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"><i class="far fa-arrow-alt-circle-right"></i></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"><i class="far fa-arrow-alt-circle-up"></i></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_template_directory_uri(); ?>/mob-menu/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: 'footer-nav',
side: 'left',
onOpen: function(name) {
jQuery('#footer-button-menu .menu-icon span').
removeClass('fas fa-bars').addClass('fas fa-times');
},
onClose: function(name) {
? ? ?jQuery('#footer-button-menu .menu-icon span').
removeClass('fas fa-times').addClass('fas fa-bars');
},
});
jQuery('#footer-button-sidebar').sidr({
name: 'sidebar',
side: 'right',
onOpen: function(name) {
jQuery('#footer-button-sidebar .menu-icon span').
removeClass('fas fa-outdent').addClass('fas fa-times');
},
onClose: function(name) {
jQuery('#footer-button-sidebar .menu-icon span').
removeClass('fas fa-times').addClass('fas fa-outdent');
},
});
});

//一部ブラウザでスライドインメニューボタンを押すと「閉じる」ボタンが消えてしまう不具合対策
function adjustSlideInButtons() {
var windowHeight = jQuery(window).height();
var windowWidth = jQuery(window).width();
var buttonsHeight = jQuery('#footer-mobile-buttons').height();
jQuery('#footer-mobile-buttons').css({
'top': windowHeight - buttonsHeight+ 'px',
'width': windowWidth + 'px',
});
}
//画面サイズリサイズ時
jQuery(window).resize(function() {
adjustSlideInButtons();
});
//ドキュメント読み込み時
jQuery(document).ready(function() {
adjustSlideInButtons();
});

</script>
<?php endif; ?>

コードの入ったファイルを作るのが面倒、エラーが出た、スキルが・・という方は

こういうカスタマイズは安易に設置せず、自身で何をしたのかを把握しておくことが必要だと私は思いますが、中には「うまく動かない・・」とか「手っ取り早く設置したい」と思う方もいるハズ・・。ということで、今まで作成したフォルダ（mob-menuフォルダ）をダウンロードできるようにしました。

直リンクを防止するため（ファイルへのリンクを他の方が直接リンクとして別サイトに挿入して、あたかも自身のファイルのようにふるまう輩がいますので・・言い方悪くてすみません・・・でも迷惑なんです！！）、【ha-Basic】テーマの配布やプラグインの翻訳ファイルなどを配布や販売させていただいている「Booth」というサイト内からダウンロードできるようにしていますので、下記のボタンからページへ移動してダウンロードしてください。

入手いただくには「Booth」への登録が必要です

ダウンロードしたら解凍し、次項の手順に従って「mob-menu」フォルダをテーマフォルダ内へアップロードしてください

FTPなどで作成したフォルダをテーマフォルダ内へ転送する

手動で作成したフォルダ、または一括ダウンロードして解凍した中にある「mob-menu」フォルダをテーマフォルダの中へFTPクライアントツールなどを使ってアップロードします。

以下はFilezillaというFTPクライアントを使ってアップロードする際のスクリーンショットです。

【ha-Basic】テーマファイルを編集して動作するようにする

転送したフォルダ内のファイルをテーマで動作するようにするための編集です。【ha-Basic】テーマには通常の子テーマと同じようにヘッダーやフッターへコードを追記できる機能がありますので、以下の２つの作業をします。

「a-header-insert.php」へコード追記する

ヘッダー内で今回のコンテンツをきれいに表示させるためのCSSを読み込ませるコードを追加します。CSSはwp_is_mobile関数を使ってモバイル表示時のみ機能するようにします（少しでも表示速度に影響がないようにします）。コードは以下のものをコピペすればOKです。

<?php if ( wp_is_mobile() ): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mob-menu/jquery.sidr.dark.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mob-menu/sidr-menu.css">
<?php endif; ?>

「a-footer-insert.php」へコード追記する

フッター内でスライド表示用のスクリプトと、実際に表示させるためのhtmlを読み込ませます。以下のコードをコピペすればOKです。こちらもモバイル時のみ動作するようwp_is_mobile関数を使っています。

<?php if ( wp_is_mobile() ): ?>
<?php get_template_part('/mob-menu/mobile-menu');//モバイル用下部固定メニュー?>
<?php endif; ?>

以上、問題なく設置・設定ができていればきちんと動作するはずです。もしも固定表示にならない場合にはブラウザのキャッシュをクリアしてみてください（実際にモバイル端末で表示してみてデザインが変わらない場合はモバイル端末の電源を入れ直して再度表示してみてください）

ヘッダーのハンバーガーメニューを削除（または非表示）にする

下部に追従メニューが表示されるようになりましたので、ページ上部のタイトル右部分にあるモバイルメニュー（ハンバーガーメニューと呼ばれることが多いです）はもう表示する必要がなくなります。最後の仕上げとしてこの部分を非表示（削除）します。２通りの方法がありますのでどちらかを行ってください（前者の方法がおすすめですが、後者の方が簡単です）

コードを削除して表示されないようにする

「header.php」の７１行目付近にある以下のコードを削除して、出力されないようにします。

<!--スマホ用メニューボタン-->
<button type="button" id="navbutton">
<i class="fas fa-list-ul"></i>
</button>

一度削除してしまうと元に戻したい時のためにどこかへ保存しておく必要がありますので、以下のようにコメント化して出力されないようにすることもできます（個人的にはこちらの方法がおすすめです）

 <!--スマホ用メニューボタン-->
<!-- button type="button" id="navbutton" -->
<!--i class="fas fa-list-ul"--><!--/i-->
<!--/button-->

前者のコードではそもそもページの要素として（htmlへ）出力されないですし、後者の方法でも要素として出力はされますがコメントとして扱われるので、次の方法のように「出力されているものを無理に非表示にする」ことがなくなり、多少なりともSEOには効果的なのではないかと思います。

CSSで非表示にして表示されないようにする

デザイン要素で非表示にする方法です。テーマの「a-insert-css.css」または「mob-menu」→「sidr-menu.css」へ以下の１行を追加すれば非表示になります。

#navbutton {display: none;}

出力されたものを無理やり非表示にするということになるため厳密に言えばSEOに悪影響があるかも知れませんが、元に戻す可能性がある場合にはこの方法がおすすめです。

デザインを変更するには

前項のファイル作成で理解されているかとは思いますが、この機能のデザイン要素は「テーマフォルダ」→「mob-menu」→「sidr-menu.css」に書かれています。デベロッパーツールなどでCSSの編集をした後、このファイルを編集するか追記してください。

【ha-Basic】にはカスタマイズ用のCSSコードを書けるよう「a-insert-css.css」というファイルがありますが、この機能限定にしておいた方が整理しやすいので「sidr-menu.css」へ追記することをおすすめします

ページ上部へ戻る▲

最後に

今回の方法では

• サイドバーに内容がない（これは【ha-Basic】を使う以上あまりないことかと思われます）
• メニューがない

場合でも左のメニューと右のサイドバーボタンが動作してしまいますので、サイトによっては不都合が出ますので、それらがあるサイトでのみ使用されるといいかと思います。

※コードを工夫すれば必要ないボタンは出力しないようにもできますが、今回は設置方法の紹介なので、メニューがない場合やサイドバーに何もない場合についての解説は割愛します。ご自身で工夫してみてください。

1冊ですべて身につくWordPress入門講座

これからはじめる人・駆け出しのWebデザイナーに向けて シリーズ27万部以上の大ヒット! 「1冊ですべて身につく」の最新作が新登場! 今度は世界中で大人気のWordPress! この本でWebサイトが作れる!著:Mana

¥2,200 （2023/09/23 02:30時点 | Amazon調べ）

Amazonで見る

楽天市場で探す

Yahooショッピングで探す

ポチップ

WordPressデザインレシピ集

WordPressによるWebサイト制作のための，究極のレシピ集が登場。制作の現場で使われる定番テクニックからプロ技まで，余すところなく集めました。著:狩野 祐東

¥2,905 （2023/09/19 01:53時点 | Amazon調べ）

Amazonで見る

楽天市場で探す

Yahooショッピングで探す

ポチップ