【WordPress】スマホでも見やすくしました【WPtouch】

こんばんは、FCめがぶーの宗岡（@pre_muneoka）です。
本日はスマホでの表示に関してのご報告です！

【①CloudFlare編】スピードキングを目指せ！【WordPress】に関連しますが、スマホユーザーの方に対してもっと情報を見やすくしやすくしようと思い立ちました。
そんな訳で本日は、「簡単に」サイトをスマホ用にカスタマイズするためのプラグインのご紹介です。

でもね、簡単にはいかなかったんだ…

宗岡 VS WPtouch

そもそもスマホ用って？

パソコンの画面サイズを想定しているサイトをスマホで見ようとすると、サイズが合わずに非常に見づらいと思います。また、画像が多いサイトなどは読み込み時間が長く掛かってしまい不便なサイトになります。

最近では「レスポンシブデザイン」というサイトを見る端末に合わせて自動でサイズ変更を行なってくれるテーマ（テンプレート）がありますがFCめがぶーのサイトはレスポンシブデザインが未対応となっています。

そこで、パソコン用に作られたサイトをスマホ用に変換してくれるプラグイン「WPtouch」を使いました。

WPtouchとは？

このプラグインは、パソコンで作られたサイトをスマホサイズに切り替えることが可能なプラグインです。
多くのWordPressユーザーが使用しており、オリジナリティという点では差別化が図りにくいのですが設定のための情報量の多さから今回はWPtouchを使用しました。

実際に「WPtouch」で検索をすると数多くの情報がインターネット上に転がっています。
基本的なことから本格的なカスタマイズまで様々。

僕が今回やりたかった内容は、大きく3点

これを軸に設定を開始しました。

①WPtouchを導入してみる

これは、例のごとくWordPress管理画面から1.プラグイン→2.新規追加→3.WPtouchと入力でクリアーできました。有名なプラグインなので検索も楽ちんです。

僕は普段、ガラケーを使っているのでテストのためにスマホを借りて実験。
基本的な表示はすぐに行えました。

しかし、僕が借りたAndroidのスマホはAndroidのバージョンが古かった…
これが悲劇の始まりでした。

「Mobilizer」なるパソコン上でスマホの画面を表示するフリーソフトがあるのですが僕の環境ではなぜか動作せず。諦めたのも敗因かもしれません…（環境はWindows7、64bit）

②WPtouchに関連記事を出す

現在使用しているサイトは、テーマに関連記事表示が設定されているのでスマホには反映されません。
そこで使ったのが「Similar Posts」と「Yet Another Related Posts Plugin（YARPP）」。
ふたつでセット的なプラグインなので導入時は二個ともいれましょう。

あとは、表示のための命令コードをWPtouchのSingle.phpに記述。
日本語の文字化けが発生しましたが英語で表記するという適当な方法でクリアーしました。

③SNSを表示させる

この部分が実際にスマホでサイトを見て頂くとわかるのですがまだ未整備です。
SNSを表示しているプラグインを調整することで今後、綺麗に整形していきたいと思います。

あれ、そんなに問題なくない？

いえ、固定ページが酷いのです。

固定ページにAndroidのバージョンに…問題は山積み

固定ページをスマホで見て頂ければわかりますが、大幅にデザインが狂っています。
これは枠線を適当に表記している故に発生している問題だと思われます。
これも今後の課題ですね…

また、後から気がついたのですがAndroidの最近のバージョンのものやiPhoneで表示がおかしい…
まったくもって上手く表示が出来ていなかったようです。

とりあえず、Androidの最近のバージョンのものやiPhoneに関しては「キャッシュ」の扱いが原因でした。
サイトの高速化のために「W3 Total Cache」を導入したのですがこのスマホ例外設定をしてなかったためのようです。
現在は改善され、ちゃんと表示されているはず。

大丈夫だよね？

そんな訳でかなりの時間を使ったのに課題が山積。

ちょっとずつ、手を加えて行きたいと思います。
それでは！

参考サイト様