[Ha-Basic] How to install follow-up menu content at the bottom of the theme mobile display screen

【ha-Basic】テーマのモバイル表示画面下部に追従型メニューコンテンツを設置する方法

公開日: カスタマイズ
Knowledge Base Wordpress ha-Basic テーマ

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

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

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

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

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

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

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

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

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

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

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

まずスクリーンショットですが
【ha-Basic】テーマのモバイル表示画面下部に追従型メニューコンテンツを設置する方法【ha-Basic】テーマのモバイル表示画面下部に追従型メニューコンテンツを設置する方法
のようにトップページやアーカイブページでは前後の記事リンクがなく、個別投稿では前後リンクが追加されるような表示になり、ページをスクロールしてもずっと表示される(追従表示される)ようになっています。

実際にどのように動作するのかについてですが、この紹介記事を書いた段階ではこのサイトと

という私の管理するサイトで実装していますので、よかったらスマホで見てみてください。

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

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

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

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

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

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

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

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

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

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

【WordPress】記事本文下へ作者情報を表示するカスタマイズ(やってみたら結構簡単でした)

【ha-Basic】全ユーザーのダッシュボードから「WordPress イベントとニュース」ウィジェットを削除する方法

【ha-Basic】テーマを使ったサイトをグリーン系にするカラーCSS


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

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

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

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

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

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

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

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

  • jquery.sidr.dark.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.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: #f8f8f8;
      color: #333;
      box-shadow: 0 0 5px 5px #ebebeb 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+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RmZGZkZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==’);
      background-size: 100%;
      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf));
      background-image: -moz-linear-gradient(#ffffff, #dfdfdf);
      background-image: -webkit-linear-gradient(#ffffff, #dfdfdf);
      background-image: linear-gradient(#ffffff, #dfdfdf);
      font-size: 11px;
      font-weight: normal;
      padding: 0 15px;
      margin: 0 0 5px;
      color: #333;
      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(51, 51, 51, 0.9);
    }
    .sidr > p {
      margin-left: 15px;
      margin-right: 15px;
    }
    .sidr ul {
      display: block;
      margin: 0 0 15px;
      padding: 0;
      border-top: 1px solid #dfdfdf;
      border-bottom: 1px solid white;
    }
    .sidr ul li {
      display: block;
      margin: 0;
      line-height: 48px;
      border-top: 1px solid white;
      border-bottom: 1px solid #dfdfdf;
    }
    .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 #ebebeb inset;
    }
    .sidr ul li a,
    .sidr ul li span {
      padding: 0 15px;
      display: block;
      text-decoration: none;
      color: #333;
    }
    .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 #ebebeb inset;
    }
    .sidr ul li ul li a,
    .sidr ul li ul li span {
      color: rgba(51, 51, 51, 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(51, 51, 51, 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: #f8f8f8;
      background: #333;
    }
    .sidr input[type=button]:hover,
    .sidr input[type=submit]:hover {
      background: rgba(51, 51, 51, 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 Pゴシック’, ‘MS PGothic’, 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: 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; ?>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

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

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

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

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

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

以下はFilezillaというFTPクライアントを使ってアップロードする際のスクリーンショットです。
【ha-Basic】テーマのモバイル表示画面下部に追従型メニューコンテンツを設置する方法

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

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

「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; ?>

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

キャッシュのクリア?どうやるの?

キーボードからブラウザのスーパーリロード(キャッシュクリア)をする方法(Windows用)

CSSの編集後すぐに変更が適用されないときに以下の方法で一時保存されている情報をクリアします

  • Google Chrome/Microsoft Internet Exproler/Mozilla Firefox
  • ctrlを押しながらf5
  • Microsoft EDGE
  • F5を押す、またはctrlを押しながらR
  • Apple Safari
  • ctrlを押しながらR

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

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

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

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

<!–スマホ用メニューボタン–>
	<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」へ以下の1行を追加すれば非表示になります。

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

デザインを変更するには

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

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

最後に

今回の方法では

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

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

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

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報