WordPressでの携帯やスマートフォンに最適化した表示の作業まとめ

このブログはWordPressを使っていますが、最近ようやくスマホや携帯などでの表示を分ける作業が完了したのでとりあえず簡単にまとめておきます。

WPtouchと言うプラグインを使えばこれを入れるだけでスマホに対応してくれるのですが、私のブログの一部の記事でうまく表示できない場面に出くわしたので使わないことにしました。

と言うことで手順。

  • スマホやタブレット用のテーマを新規インストールします。今回はSpaciousと言うのを選びました。デフォルトのままでよければ有効化せずインストールするだけでOK。スマホとタブレットで動作を分けられますので必要であればそれぞれ用のをインストールしてください。
  • スマホやタブレットの認識はプラグインMulti Device Switcherを使います。これでスマホやタブレットの時に、専用のテーマ(今回はSpacious)で表示されるようになります。
  • Multi Device Switcherの設定でスマホやタブレット用のテーマはSpaciousを選びます。
  • Multi Device Switcherの設定で「携帯モバイル端末用テーマ」はKtai Styleを使うので「なし」を選択。
  • 携帯用の表示はプラグイン Ktai Style を使っています。Ktai Styleの設定で電話キャリア別テーマでiPhone, Android 用の所を「Ktai styleを使わない」にしておきます。今回のやり方だとMulti Device Switcherとは競合してません。

Spaciousはレスポンシブテーマなので単独でPCとスマホ等で表示を自動的に変えてくれるのですが、PC用は今メインで使ってるテーマの方を使いたいのでSpaciousをスマホタブレット専用で使っています。Spaciousを選んだ理由は表示のバランスが試した中では一番よかったから。でも大して比較できてないのでもっといいのがあるかも。

とうことで、ようやく完了かな。