質問: WordPressでサイト制作をしています。 PCとスマホで構造が大きく異なっているので、 共通部分(sample.phpに記述) 以外は、 ``` if ( wp_is_mobile() ) { include locate_template(sample-pc.php); } else { include locate_template(sample-sp.php); } ``` で分岐して読み込んでいます。 cssは、同ファイルでPCとspでレイアウトを分けてます。 この場合、端末からPHPファイルが分岐されるためPCでsample-pc.phpを読み込んだら、画面を小さくしてもSPのレイアウトにはなりません。(構造が違い、class名などが異なるため) sample-pc.phpとsample-sp.phpでCSSファイルを分けて、sample-pc.php用にレスポンシブ対応するしかないのでしょうか? また、wp_is_mobile()を使わずに何かよい方法はありますでしょうか?
回答: > > また、wp_is_mobile()を使わずに何かよい方法はありますでしょうか? > > > 一般的に、レイアウトが違うといっても内容物はそう変わらないでしょう。 右にあるものが上に行ったり、並び順が変わる程度で済むのでは? そういう場合は両方に対応した書き方を1つのHTMLで書いてしまうのが良いと思います。 (レスポンシブデザインってそういうことだと思います) GridやFlexをうまく使えば順序の入れ替えや、PC/SPで大きなレイアウトの変更も可能です。 【【CSS】CSSグリッドの考え方、ワークフローと活用事例 - bagelee(ベーグリー)】 【Grid Layoutが当たり前になったら、CSSレイアウトはどう考えるべき? - WPJ】 【【レスポンシブ】PCとスマホでdivの順番を入れ替える - Qiita】 【要素の順番を入れ替えられるflexboxのorderを活用しよう-htmlとcss3-ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザイン】