「Welcart」×「 Blanc」でスマホメニューが動かなくなった時の対処法

Facebookアイキャッチ

どうも、がみたかです。

オルゴナイトのネットショップ苺一会(いちごいちえ)の画像表示に関する不具合があったので、それが解消できるまではWordpress4.5にアップデートできずにいました。

ところがある日、この不具合の対処法がわかったので、ネットショップのWordpressを、無事にWordpress4.5にアップデートすることができました^^

その件についてはこちら↓↓

「Welcart」×「Blanc」で画像が表示されなくなった時の対処法

2016.06.07

 

次の不具合「スマホのメニューが動かない」

一難去ってまた一難とはまさにこのこと(^_^;)

前回の不具合を解消した時は確認していなかったので気がつきませんでしたが、今度は「スマホで見た時に、メニューが開閉しない」というものでした。

ヘッダーのスライダーも手動でないと動かないのでこれも修正しますかね…(^_^;)

Blancのアップデート対応6(スマホメニュー)

スマホで見たネットショップの画面

スマホのメニューはPtengineのヒートマッップを見る限り、あまり使われている感じではありませんが、いざ使いたい時に無いと不便で、訪問してくれたユーザーには優しくありません。

直接SEOとは関係無いと思いますが、少しでもユーザビリティを良くする為に、まずは原因を探すためにコードとにらめっこです…

 

スマホのメニューが動かない要因はこれだ!

偉そうに見出しを付けた割にはイマイチ確信を持っているわけではなく、どっちかというと「そうあってほしい」という願望に近いものがあります(^_^;)

で、その要因というのが「jQueryのコンクリフト」ではないか?と前回編集した「scripts.js」のプログラムファイルを眺めたり、編集した時の挙動を見てそう思いました。

コンクリフトとは、異なるプログラム同士がぶつかってプログラムの通りに動いてくれなくなる不具合ことです。
  • 画像表示やスライダー表示を切ると、メニューが開閉する。
  • 画像表示やスライダーを動くようにすると、メニューが開閉しなくなる。

同じプログラムファイルの中に2つ以上のプログラムが混在するのと、Wordpress4.5になった時にjQueryの扱い方が少し変わった複合的な要因で、これらの不具合が起こるようになったんじゃないかと思っています。

 

スマホメニューを使う為の対処法

今回の対処法として、Wordpressの特徴を活かし(!?)デフォルト(標準)で表示される「動かないメニューボタン」を非表示にし、プラグインで開閉式のメニューボタンを付けます^^

ついでにヘッダースライダーを自動で切り替わるようにします。

今回も、プログラムに関するファイル(.phpと .js)を操作するので、バックアップをお忘れなく!

 

スマホメニューを復旧する

まずは、スマホメニューの復旧から解説します。

 

デフォルト(標準)のスマホメニューを非表示にする

動かないメニューは、まぎらわしいだけなので消えてもらいますw

  1. WordPressの管理画面より、「外観」→「テーマの編集」→「テーマヘッダー(header.php)」の順にクリックしていきます。

    Blancのアップデート対応8(スマホメニュー)

    header.phpを開く

    「<dt class〜」から「〜</dt>」の部分が、ヘッダーエリアにメニューを表示する記述になっているみたいですね^^

  2. 「<dt class〜」から「〜</dt>」の部分の外側に「<!– 」と「–>」でくくり、コメントアウトする。
    Blancのアップデート対応9(スマホメニュー)

    」を使ってコメントアウトする。

    コメントアウトすることで「単なるメモ」として扱われるようになり、PHPファイルには記述されたままだが、反映されなくなります。

    また、括っている「<!–」「–>」を消すだけで元に戻せるので、ファイル操作が不慣れな人にオススメです。
    ファイルサイズの増加も微々たるものなので、安心してください^^

 

これで、デフォルト(標準)のスマホメニューは非表示になります。

スマホメニューさん、今までありがとう!ゆっくりと休んでください^^

 

プラグイン「Responsive Menu」のインストール

消えてもらったメニューの代わりに、プラグイン「Responsive Menu」を使ってスマホメニューを表示する手順を解説していきます。

  1. WordPress管理画面より「プラグイン」→「新規追加」の順にクリック。

  2. 検索ウィンドウに「Responsive Menu」と入力して検索します。
    Blancのアップデート対応10(スマホメニュー)

    「Responsive Menu」で検索

  3. 「今すぐインストール」をクリックし、有効化します。
    Blancのアップデート対応11(スマホメニュー)

    インストールして有効化します。

これで、ひとまずメニューボタンは新しく表示されるようになります。

 

「Responsive Menu」の設定

このテーマ「Blanc」に、このプラグイン「Responsive Menu」を使うことでスライダーとスマホメニューを兼用することができるのですが、そのままにするとこうなります。

 

カートボタンにメニューが被っています!

Blancのアップデート対応12(スマホメニュー)

カートボタン上にメニューボタンが被ってしまう。(スライダーの矢印は無視してくださいw)

これではカート内の確認ができないので、位置を調整します。

 

ボタンの色も設定画面で変更することができます(画像は変更済み)

 

  1. WordPress管理画面より「プラグイン」→「Responsive Menu 」にある「Settings」をクリック。

    Blancのアップデート対応13(スマホメニュー)

    「Settings」をクリック

  2. 「Look&Feel」をクリックして設定画面を切り替える。
    Blancのアップデート対応14(スマホメニュー)

    画面を切り替える。

     

  3. 「Click Button〜」の項目にある「Top」を「10px」→「110px」に変更する。

    Blancのアップデート対応15(スマホメニュー)

    「10px」→「110px」に数値を変更する。

     

他にもボタンやテキストの色、開いたメニューの背景色などをこのページで変更できるので、お好みの色にすることができます^^

こちらはボタンの色、テキスト「メニュー」を追加した状態になります
Blancのアップデート対応18(スマホメニュー)

ちょうどいい位置になりました^^

スライダーの矢印は無視してくださいw

 

スライダーを自動で切り替える(アニメーション)ようにする

これはおまけです(^_^;)

せっかくスライダーを使うのであれば、画像の切り替えは自動でやってほしい!

ということで、またプログラムファイルとにらめっこします…

 

「jquery.flexsrider.js」をダウンロードする

 

  1. FTPツールからサーバーに接続し、「jquery.flexslider.js」をダウンロードします。

    Blancのアップデート対応16(スマホメニュー)

    FTPを使ってダウンロードする(画面はFilezillaです)

    「ドメイン」→「public_html」→「wp-contents」→「themes」→「blanc」→「js」の順にディレクトリ(フォルダ)を開いていき、その中にある「jquery.flexslider.js」です。

  2. テキストエディタで「jquery.flexslidar.js」を開き、39行目の「slider.animating」の部分をtrueに編集する。
    Blancのアップデート対応17(スマホメニュー)

    animatingの部分 をtrueに書き換える。

  3. 保存して、再びFTPで同じディレクトリにアップロード(上書き)する。

 

これで、スライダーも動いてくれるはずですw

 

まとめ

WordPressのアップデートはセキュリティ上したほうが良いのは間違いないのですが、今回のようにテーマやプラグインによっては不具合が起こる可能性があります。

ましてや、この「Blanc」のように開発が止まってしまったテーマは、あまり固執せずに乗り換えていった方が良いかもしれませんね(^_^;)

 

もし、こんな感じでもしネットショップを運営で悩んでいたり、これから始めたいと思っている方が周りにいらっしゃれば、ご紹介してください

ご希望に合わせたご提案をさせていただきますよ^^

ネットショップ「苺一会(いちごいちえ)」はこちらです!

スクリーンショット 2016-05-03 21.20.27

 

では、今回はこの辺で!次の記事でまたお会いしましょう^^

WordPress × Welcartのいろんな情報に、1クリックでアクセスできるページはこちらです

「Wordpress」×「Welcart」でネットショップを運営するためのまとめ

2017.01.11

PS.

アクセスバーズ®セッションにて、特典をご用意しています。興味があればどうぞ!

アクセスバーズ®を詳しく知りたい?

アクセスバーズ®を、わかりやすく解説したメルマガ講座やってます。

登録していただいた特典として、

アクセスバーズ®のセッションを特別価格で受けていただけます^^

 

アクセスバーズ®を受けてみませんか?

バーズ®ファシリテーターになって、ますますパワーアップ!?

アクセスバーズ®セッションのお申し込みはこちらまで^^

Facebookアイキャッチテンプレ02

アクセスバーズ®を習ってみませんか?

習ったその日からアクセスバーズ®が使えるようになる!

アクセスバーズ®1日講座を随時開催しています^^

開催日は下記リンクよりご確認ください!

アクセスバーズ1日講座

 

 

 

この記事に共感していただけたら
いいね!をお願いします。

Twitter で

記事が気に入ったらシェアをお願いします^^

ABOUTこの記事をかいた人

がみたか

兵庫県加古川市在住の2児の父親です。 ・アクセスバーズ®ファシリテーター ・Webの引越し屋さん ・Web屋さん ・オルゴナイトのネットショップ店長 など、「お客さんの周りも笑顔にしたい」という思いで、あれこれやってます^^ 趣味は車(主にスポーツカー)にギター(主にHR/HM)にパソコン(WinもMacも使えます)です。 こんな僕ですが、宜しくお願いします^^ twitter(@gamitaka02)でブツブツつぶやいているので、良かったらフォロー&絡みお願いします(o ̄∀ ̄)ノ