【WordPress】jPanelMenu ‘sidr’ をiPhone OS 10でもスクロールさせる

thumbnail
システム情報

投稿日: 2016年09月22日

最終更新日: 2016年10月12日

iPhoneのOSアップデートに伴って、制作したWordPressサイトが正しく動かなくなってしまったので、少し改造しました。

スマホサイトで横に飛び出すメニューを搭載させていたのですが、それがなぜか新しいOSにアップデートしたら、メニュー部分がスクロールせず、コンテンツ部分がスクロールしてしまったので、コードを書き直しました。

変更前

<script>
  jQuery(function($) {
    var jPM = $.jPanelMenu({
      menu: '#sidr',
      trigger: '#sp_menu',
      direction: 'right',
      closeOnContentClick: true
    });
    jPM.on();
    var ua = navigator.userAgent.toLowerCase();
    if (!ua.match(/chrome|android 4.[1-9]|android [5-9]|firefox|iphone os [5-9]/)) {
      $('#jPanelMenu-menu').css({height: "auto"});
    }
  });
</script>

変更後

<script>
  jQuery(function($) {
    var jPM = $.jPanelMenu({
      menu: '#sidr',
      trigger: '#sp_menu',
      direction: 'right',
      closeOnContentClick: true
    });
    jPM.on();
    var ua = navigator.userAgent.toLowerCase();
    if (!ua.match(/chrome|android 4.[1-9]|android [5-9]|firefox|iphone os [5-9]|iphone os [10]/)) {
      $('#jPanelMenu-menu').css({height: "auto"});
    }
  });
</script>

変更したのは11行目の末尾部分だけです。インラインスクロールに関する記述部分を変更しました。

プライムストラテジー株式会社さんの「WordPressの教科書2」を参考に記述しております(いつも大変お世話になっております)。

とりあえずこのコードで正しく動いたので、掲載しておきます。変更があれば、都度書き直します。

Web関連業務

  • スマホ対応サイト制作

  • ネット予約システム

  • 無料ネット集客

  • ロングテールSEO

  • 売り上げ倍増計画

  • HP制作実績

DTP関連業務(印刷・各種制作)

  • オリジナルタトゥーシール制作

  • 名刺・パンフレット制作

  • オーダーカッティングシート制作

  • のぼり旗のデザイン・制作

  • アクリル電飾看板制作

  • 記念スライドショームービー制作

  • 画像制作・写真加工

  • 簡単自作看板制作

  • DTPデザイン作例集