【体験談】WordPressでレスポンシブ対応をする時に私がやったこと

こんにちは朱夏です。

今回は、WordPressでレスポンシブ対応する時に私がやったことを書いていきたいと思います。

[もくじ]
テーマのカスタマイズ
プラグインで実装
自作テーマ+プラグイン
あとがき

まず初めに試したのは、現在使用中のテーマをカスタマイズする事でした。
過去に自作したテーマはBootstrapでレスポンシブ対応を行っていたので同様のものを追加しようと考えたのです。

結果としては失敗でした。
理由は以下の様なものがあります。

最大の謎はCSSファイルの変更を受け付けてくれない事でした。
キャッシュの可能性も考えたのですが、キャッシュクリアしても全く反映される気配がありませんでした。

プラグインの影響を受けている可能性も考えましたが、結構な数のプラグインが入っており、英語のものもあったため、調べるのには時間がかかると断念しました。
この問題は、今回の案件対応においてかなり重大な問題として最後まで立ちはだかられました。

次に、PC版のデザインが狂う可能性があるという点。
元々が1つのページを、画面の横幅に合わせてデザインを切り替えるといった方式で実装することになるため、上手く実装していかないとPC版のページにも影響は出てきます。
他の人が作ったサイトのデザインを崩さずに対応するとなると、かなり骨が折れます。

3つ目の問題、これでカスタマイズを断念する事を決めました。
そもそもスマホ版で表示させようとした時に、全く別の画像が使われていた李、テキストも今回作成していた内容と違っているなどがあったため、「別のページを読み込んでいるのかな」と感じました。

PCのトップページとスマホのトップページが同一のものではないと解れば、やれることは１つ、スマホ用のトップページを編集する事なのですが・・・ここで問題が発生しました。

朱夏

スマホ用のファイルどこ？

ここで私はカスタマイズを諦め、次の方法に取り組むことにしました。

スマホ対応を行うにあたって色々ググっていると、よく見かけるのがこれでした。
そしてふと、「もしかしてプラグインでスマホのページを作っているのではないか」ということに気が付きました。

探してみたら、ありましたよ。

こちらのプラグイン、結構有名な様で、使い方や設定など、調べれば色々出てきました。
しかし残念なことに、これを使用してスマホ対応を行うのは無理でした。

理由がこちら。

ライセンス切れに関しては、無料版をインストールして対応しました。
しかし、無料で機能を制限された状態ではうまくいかない部分もあり、色々と悩まされました。

複製元のスマホページを作成していたプラグインのため、想定に近いスマホサイトのデザインが出来るかと思っていたのですが、クライアントに確認していただいたフィードバックでは、かなりの数の指摘が出てしまいました。

中でも、スマホ版にスライダーと常駐型のボトムナビゲーションを実装して欲しいという要望を実現する方法がプラグインには用意されていなかったのです。

かといって、自分でカスタマイズしようとしても、こちらが書いたコードを受け付けてくれず、こちらも対応失敗となってしまいました。

スマホ用ページのテーマを自作して、スマホ版への切替はプラグインで実装するという方法になります。

こちら、最終手段として用意していた方法でした。

スマホ対応ページだけとはいえ、テンプレートを一から作成することになるので、納期の問題もあり、本当はここまでの対応は難しいと考えていました。

しかし、覚悟を決めて対応を開始すると、思いのほかすらすらとコードを書いていく事が出来ました。

コードを書いて思い通りに実装していけるという幸せをかみしめながら、6時間かけてテーマを作りました。
その後のスマホ用ページとPC用ページの切替には、以下のプラグインを使って実装しました。

というわけで、最終的にはの実装方法で何とか依頼対応をする事が出来ました。

今回は、WordPressのスマホ対応を行うために自分が行った対応を語ってみました。

まとめとしてはこちらです。

条件によっては、どの方法も有効な手段になりえますが、今回の様な特殊な条件の場合だと、3つ目の方法で成功したのが幸運だったと思えるレベルです。

プラグインが上手く動作してくれて本当に良かった・・・(；・∀・)

今回は以上です。
次回もよろしくお願いします。