パソコンで見た場合とスマホで見た場合とでグローバルナビのメニューを切り替える方法

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも パソコンで見た場合とスマホで見た場合とでグローバルナビのメニューを切り替える方法

  • このトピックには5件の返信、2人の参加者があり、最後にuにより10年、 6ヶ月前に更新されました。
5件の返信スレッドを表示中
  • 投稿者
    投稿
    • #36819
      u
      ゲスト

      こんにちは
      simplicity2.0.9a.zip
      simplicity2-child20160110.zip
      を使っています。

      上部に表示されるメニューを、パソコンで見た場合とスマホで見た場合とで切り替えたいので、
      二つのメニュー
      desktop-menu
      mobile-menu
      を作成したのですが、この後どう言うふうにすれば切り替えられるのか分かりませんでした。
      検索するとwp_nav_menuというのを使うと良さそうな情報があったのですが、分かりませんでした。
      wp_nav_menuを使う手法で切替は可能でしょうか?
      お勧めの手法がありましたらアドバイスを頂けると有り難いです。

    • #36821
      Hidekichi
      ゲスト

      その2つのメニューは中身の内容が違うんでしょうか?
      メニュー自体は同じで、デザインが違うだけならcssでできますし、位置やらを変えたいというのであればjQueryを使えば可能です。

      一応wordpressにもモバイルの関数があって、ブラウザのユーザーエージェントあたりで見てたりするんでしょうけど処理を変更する事は可能ですが、リアルタイムにレスポンシブにするなら画面幅で判断するのが良いかと思います。
      画面幅は、jsかjQuery、デザインだけの話ならcssでやる他手頃なものは無いかとおもいます。

      中身が違うというのであればajaxを利用してjQueryで変更することも可能かと。

      目的と内容によって用いるべき手法が変わります。

      メニューを変更したい目的がどういうことで、どんな内容がそこにあって、どういう時にどうしたいが必要です。

      > 上部に表示されるメニューを、パソコンで見た場合と
      > スマホで見た場合とで切り替えたいので

      デフォルトでも切り替わっているわけですが、デフォルトではできないのは何故かというのが、メニューを使い分けたい理由かと思うんですけれども。

    • #36823
      u
      ゲスト

      Hidekichiさん
      いつもお世話になっています。

      >その2つのメニューは中身の内容が違うんでしょうか?

      説明不足ですみませんでした。
      変えたいのは見た目ではなくて、メニューの項目です。
      現状では、こうなっています。
      [固定ページPC用][投稿ページ共通][固定ページ共通1][固定ページ共通2][固定ページモバイル用] (0)

      上記の先頭と末尾の二つの固定ページがそれぞれPCとスマホのフロントページです。
      その切替は、Simplicity2 child: header-insert.php
      で、
      <?php if ( wp_is_mobile() && is_front_page() ) {
        wp_redirect( ‘http://www.example.com&#8217;, 301 ); exit; // ここでモバイル用固定ページへ行く
      } ?>
      とやりました(ググって見つけた例でやったら上手く行きましたが、これで良いでしょうか?)。
      これでパソコンとスマホでフロントページの切替は出来たのですが、パソコンで見ると(0)が表示されます。

      それを、パソコンとスマホでそれぞれ
      [固定ページPC用][投稿ページ共通][固定ページ共通1][固定ページ共通2]      (1)
      [固定ページモバイル用][投稿ページ共通][固定ページ共通1][固定ページ共通2]   (2)

      の表示にしたかったのです(見た目ではなくて、表示する項目をこのようにしたいと言う意味です)。

      とろこが今、再度確認してみましたところ、何もしなくてもそうなっていました。
      つまりパソコンで見たら(1)が出ていて、スマホで見たら(2)が出ました。

      でも、今朝、質問した時点では、パソコンから見ると(0)のように出ていました。
      特に何も変更したはずは無いのですが。
      良く分からなくなってきました。

      メニューを二つ作ると自動的にパソコン用、モバイル用に振り分けられるように、
      WordPressあるいはSimplicityがやってくれているのでしょうか?

    • #36824
      Hidekichi
      ゲスト

      functions.php、register_nav_menus()で、現在、ヘッダーとフッターが設定されてますが、ここに必要なメニューをwordpressで作成し突っ込んで、条件によってwp_nav_menuで呼び出すのがスムースかと思います。

    • #36831
      アバター画像わいひら
      キーマスター

      メニューを二つ作ると自動的にパソコン用、モバイル用に振り分けられるように、
      WordPressあるいはSimplicityがやってくれているのでしょうか?

      Simplicityの機能やWordpressのデフォルト機能にはそういった機能はないかと思います。

      とりあえずCSSさえ使えればできる方法として、以下のような方法もあるかと思います。

      1.PCとモバイルで表示する全てのメニュー項目が梱包されたメニューを作成する
      2.PCでは、モバイルのメニュー項目をCSSで非表示にする(style.cssに書く)
      3.モバイルでは、PCのメニュー項目をCSSで非表示にする(完全レスポンシブ機能が無効な時はmobile.css、有効な時はresponsive.cssに書く)

    • #36837
      u
      ゲスト

      Hidekichiさん、わいひらさん
      お騒がせしました。
      解決しました。
      パソコンとモバイルでフロントページを切り替える件と、
      それぞれの場合で表示されるメニュー項目に関して、私が混乱していたのが原因でした。
      メニューに関しては一種類だけ用意しておけば良い事に気づきました。
      そうするとパソコンでサイトを見ればそのメニューが表示されるし、メニューの[ホーム]をクリックすると今開いているのと同じパソコン用のホームページ(今は固定ページ)が再び出る。

      一方、モバイルでサイトを見ればモバイル用のフロントページにリダイレクト設定しているのでモバイル用のホームページ(固定ページ)が出る。
      その時に[ホーム]をクリックすると、リダイレクト設定が効くので結局はモバイル用のホームページが再び出るんですね。

      この点を勘違いしていて、パソコン用とモバイル用とで

      [PCホーム][モバイルホーム][PCモバイル共通1][PCモバイル共通2] 

      のようなメニューを作っておいて、
      PCで見る時には[モバイルホーム]項目を非表示にするなどが必要かと思っていました。
      でも、そのやり方が分からず、次に、
      PC用とモバイル用とにそれぞれのメニューを用意しておいて、切り替える方法を試したのですがそれも出来なかったわけです。
      それが今回の質問の背景でした。
      結論としましては、メニューは一種類だけ用意しておけばPCでもモバイルでも両方に使えました。
      大変お騒がせしました。
      Hidekichiさん、わいひらさんに教えて頂いた方法は、今後試してみたいと思います。

5件の返信スレッドを表示中
  • トピック「パソコンで見た場合とスマホで見た場合とでグローバルナビのメニューを切り替える方法」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)