PCとスマートフォンのCSSを完全に別にして、１つのテーマで管理する方法です。
余り知られていませんが、
WordPressには、PCサイトとスマートフォンサイトを出し分ける条件タグがあります。
[php][/php]
この条件タグを利用して、テーマ内で出し分けを行います。
まずスタイルシートの出し分けは以下の通りに出来ます。
【レスポンシブでスマートフォンのWordPressオリジナルテーマを作ろう】条件タグでCSSを出し分ける方法
画像やコンテンツをPCサイトとスマートフォンサイトで出し分ける方法
画像もコンテンツも同じ原理で、条件タグで出し分けます。
例えば、PCサイトとスマートフォンサイトの画像を出し分ける場合は、下記のように記述します。
例えばロゴがPCサイトとスマートフォンサイトでデザイン上で異なる場合のソースです。
画像サイズは設定しないようにします。
設定する場合は、条件タグを使って出し分けすると良いです。
[/php]
header.phpの該当箇所には下記を記述します。
[php][/php]
メリット
１つのテーマで管理できる。
デメリット
ごちゃごちゃになる。
条件タグによって出し分け箇所が多いと、テーマが重くなったりする。
PCレイアウトとスマートフォンレイアウトは、
見せる範囲がスマートフォンは限られるので、
見て欲しいコンテンツの優先順位が決まってきます。
スマートフォン向けにコンテンツの配置を変えたい場合、
結構複雑になってきます。
その場合、予めfunction.phpに関数を書いて、
出し分けするようにすればスッキリしますが、
function.phpも膨大になります。
【レスポンシブでスマートフォンのWordPressオリジナルテーマを作ろう】はシリーズ化しています。
この記事はシリーズ化しています。
概要編と基本編は読んでくださいね。
条件タグによって出し分け箇所が多いと、テーマが重くなったりする。
見せる範囲がスマートフォンは限られるので、
見て欲しいコンテンツの優先順位が決まってきます。
結構複雑になってきます。
出し分けするようにすればスッキリしますが、
function.phpも膨大になります。
概要編と基本編は読んでくださいね。
コメント