サポート » テーマ » スマホ版・PC版の切り替えについて

  • 解決済 yuusi1993

    (@yuusi1993)


    はじめまして。新人SEのyuusiと申します。

    現在、ワードプレスサイトをPCで作成しているのですが、スマホようにレスポンシブデザインにしたい、という指示が出たのでスマホ化を行いました。

    ですが、ここで問題が生じてしまいました。
    スマホには「PC版で表示」というボタンがあるのですが、私はこの昨日のことを知らず、CSSの切り替えのみでスマホ化をしていたのでPC版もスマホ版もごっちゃになっています。

    そこで、この「PC版で表示」という昨日の対応方法を探しています。

    詳しい方がいらっしゃいましたらどうかご教授よろしくお願いいたします。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • すでにレスポンシブデザインのCSSが存在するようなので
    CSSをPC用とスマホ用に別ファイルとして用意してボタンで適用するCSSを選択可能にするというのはどうでしょう。

    参考リンク:http://allabout.co.jp/gm/gc/23930/

    トピック投稿者 yuusi1993

    (@yuusi1993)

    返信ありがとうございます。
    CSSの切り替えはできるのですが、Chromeのアプリ等の設定(メニュー?)の項目にある、
    「PC版で表示」「PC版をリクエスト」などの機能に対応することもできるのでしょうか?
    仕組みがよく分からないので・・・

    基本的にCSSの切り替えは、メデイアクエリの画面サイズで指定しています。

    モデレーター Daisuke Takahashi

    (@extendwings)

    https://developer.wordpress.org/reference/functions/wp_is_mobile/ でモバイルかどうかの判定ができます。
    ChromeなどはUAを変えることで対応しているので(ブラウザのドキュメントに書いてあります。)、この関数をそのまま使えます。

    サイト上の「PC版で表示」はURLパラメータが渡されていたら、wp_is_mobile()の返り値を上書きしてしまえばいいですね。ページ遷移があってもCookieとかで対応できるかと思います。

    トピック投稿者 yuusi1993

    (@yuusi1993)

    変身ありがとうございます。
    現在、メディアクエリのみ使用中で、ユーザーエージェントは一切使用してないのですが、
    後から追加しても不具合等は生じないでしょうか?
    CSSは二つに分けて記述しています。

    モデレーター Daisuke Takahashi

    (@extendwings)

    CSSは二つに分けて記述しています。

    メディアクエリで画面幅に応じてimportするファイルをデスクトップとモバイルで分けているということですか?

    トピック投稿者 yuusi1993

    (@yuusi1993)

    はい、それであってます。
    <link>タグにスマホ用、PC用を両方記述し、画面サイズが一定以下の場合にメディアクエリでスマホ用CSSが読み込まれる、といった具合です。

    こんにちは、

    メディアクエリを利用している場合は、ブラウザの幅を見てスタイルを適用しているだけなので、WordPressのレスポンシブテーマは、多分 「PC版で表示」とかには、対応していないと思います。

    例えば、テーマスイッチプラグインを使って、モバイル用テーマと、PC用のテーマを切り替えるようなやり方なら「PC版で表示」が可能になりそうです。

    twitter.comは、スマホならmobile.twitter.com にリダイレクトして、スマフォ表示をしますよね。

    現在のテーマと、
    スマフォ用のCSSとビューポートの指定を取っ払ったテーマを別のテーマ名で作成し、

    例えば、
    https://wordpress.org/plugins/any-mobile-theme-switcher/

    を使って、

    アンドロイド用 現在のテーマ
    PC用 通常のテーマの設定で、スマフォ用のCSSとビューポートの指定を取っ払ったテーマ
    を指定して、

    Do you want to show Switch Mobile Theme link even the vistor is viewing from desktop ? を yes に設定すると、

    アンドロイドの「PC版で表示」は、使用できるようになるみたいです。

    (例示用に、ほんのちょっと試しただけなので、動作は確認してみてください)

    ブラウザの「PC版で表示」だと、一度切り替えるとしばらく戻らないみたいです。

    プラグインのショートコードリンクを使ったほうがいいかも、

    トピック投稿者 yuusi1993

    (@yuusi1993)

    たくさんのご意見ありがとうございました。
    結論として、UserAgentとmediaqueryの両方を導入いたしました。

    皆さんのご意見はこれからのサイト作りに参考にさせていただきます。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「スマホ版・PC版の切り替えについて」には新たに返信することはできません。