楽にWordPressのテーマをレスポンシブで制作しようという内容です。
現在、このサイトのデザインとは別のデザインでスマートフォンサイトのデザインを作成中なのですが、
PCテーマを元にするとレスポンシブは正直面倒です。
そこで、
もっと楽にスマートフォンのWordPressテーマを作成する仕組みはないものかと、
この記事にまとめてみました。
概ねスマートフォンで考えられるパターン
WordPressのテーマを、
スマートフォンサイト向けに作成する上で考えられるパターンを考えたのですが、
その中でどうにかラクにテーマを作成する仕組みはないものか…、
と考えたのですが、結論から言うと、
１から考慮してスマートフォン向けにテーマを作成した方が早くてラクだということ。
一番ラクなのは、
PCサイトとスマートフォンサイトを別テーマで作成して切り分けることです。
PCを元にしてしまうと、
それを消すためにスマートフォンのCSSが膨大になってゆき、
PCサイトとスマートフォンサイトの出し分けも厄介になっていく…。
これが一番面倒だと思いました。
時間かかるし、
相殺するためのCSSを探しては潰すのくり返しだし、
PCとスマホのコンテンツや画像の出し分けで条件タグだらけで、
時間かかるし、コストもかかる…。
だったら１から作成した方が早い！
という結論ですが、
取り敢えず、私が試行錯誤したパターンは全て記述しようと思います。
まずは、レスポンシブの基礎をまとめました。
簡単にまとめたので、詳細はご自分で勉強してくださいっ！
スマートフォン向けのWordPressテーマを作るにあたって考えたパターンは以下の通りです。
- PC用テーマを元にスマホ用テーマを作成する方法
- PC用テーマとスマホ用テーマを１つのテーマで共有し、条件タグでCSSを出し分ける方法
- PC用テーマとスマホ用テーマを１つのテーマで共有し、１つのCSSで出し分ける方法
- PC用テーマを親テーマとし、スマホ用の子テーマを作成する方法
PC用テーマを元にスマホ用テーマを作成する方法
PC用テーマを元にして、
スマートフォンサイトで必要な部分以外は全て削除して、
スマートフォン用のテーマを作成する方法です。
PC用テーマとスマホ用テーマを１つのテーマで共有し、条件タグでCSSを出し分ける方法
PCサイトと同じテーマを共有し、CSSと画像は分けて別ファイル、別フォルダで管理する方法です。
またコンテンツは条件タグで出し分けを行います。
そのため、条件タグを多用するとサイト表示速度に影響を与える可能性があります。
PC用テーマとスマホ用テーマを１つのテーマで共有し、１つのCSSで出し分ける方法
PCサイトと同じテーマを共有し、
bodyタグに条件タグでclassかidを出し分けを行い、
１枚のCSSで管理する方法です。
画像フォルダは別にした方が管理しやすいですね。
またコンテンツは条件タグで出し分けを行います。
そのため、条件タグを多用するとサイト表示速度に影響を与える可能性があります。
PC用テーマを親テーマとし、スマホ用の子テーマを作成する方法
私の一番のオススメの方法です。
管理もCSSも簡易になり、PC用テーマを親テーマとして、必要な機能を引き継ぐことができる、スマートフォン向けの子テーマを作成する方法です。
今までレスポンシブ・ウェブデザインの功罪とモバイルファーストでも書かれている、
レスポンシブ・ウェブデザインの弱点： 非表示なだけで存在している
の弱点がなくなるということです。
PC用サイトを親テーマとし、必要な機能と必要なコンテンツだけを引き継げます。
これはWordPressならではの手法だと思います。
最終的な理想は子テーマを作成するに行き着いたのですが、
これが簡単なようで、一番頭を悩ませました。
というのも、デバイス別にテーマを設定してくれるプラグインが、
子テーマに対応していなかったからです。
しかしっ！
黄色い弾丸こと、まがりんのお陰で私の願いは叶えられましたヽ(^o^)丿
謝辞：まがりん
まがりん、ありがとうございます。
まがりんへの感謝の印として、この記事を書いた次第です。
注意事項
このレスポンシブでスマートフォンのWordPressオリジナルテーマを作ろうは、
HTML、CSS、PHP、
何よりWordPressを理解していないと難しいカスタマイズです。
基礎がないとテーマ作成には難しいと思います。
作りたい！という方は、
まず、HTML、CSSを理解、
その後、WordPressを理解、
WordPressを触れている時にPHPの最低限の知識を勉強することをお勧めします。
【レスポンシブでスマートフォンのWordPressオリジナルテーマを作ろう】はシリーズ化しています。
この記事はシリーズ化しています。
概要編と基本編は読んでくださいね。
コメント