スマートフォン対応をテーマの振り分けで簡単に実現。~wptouchからの卒業~ テーマファイルも置いてあるよ。

wordpressねたもガリガリ書いて行こうと思うのでよろしくお願いします。

さて先日 wptouch (無料版)の罠@android 4.1 Jelly Bean。なのでモバイルテーマを作るなど。 で書いたようにwptouchがandroid 4.1 Jelly Beanに対応していないので(執筆現在)、テーマをモバイル用に作り振り分けを施した…からの続きになります。

はじめに

やったことは

  • wptouchを削除。その他モバイル対応(Jetpackのモバイルテーマ等)を使ってる人はそれを停止。
  • モバイル用テーマをつくる
  • モバイルの振り分け

wptouchの削除は簡単なので説明するまでもないでしょうか。不安な方は停止でおk。

昨今話題の レスポンシブ は見送りです。というかレスポンシブのメリットがないからです。

わたしの考えるレスポンシブのデメリットは

  • 作るのがめんどう
  • 表示が遅くなる
  • 結局のところ修正がめんどう

なので。逸れた、いきます。

モバイル用テーマをつくる

そもそもwordpressでテーマ自作してる人はこんな記事読まなくて全然いいのですが、一般的なブロガー様は既存のテーマを使ったりちょっとカスタムして使っていると思います。そういう人向けです。

そんなわたくしが目を付けたのはwordpressの無敵プラグインJetpackのモバイルテーマ minileven

これを元につくれば簡単じゃん!しかもGNU General Public Licenseだし!みたいな。

ただ直接弄るとアップデートの度に書き直さねばならないのでwordpressの子テーマ機能を使ってテーマを作りました。

手順としては

  1. Jetpackをダウンロードし、モバイルテーマであるminileven (/jetpack/modules/minileven/theme/pub/以下)を取り出す
  2. 取り出したminilevenを ~/wp-content/themes/ に据える
  3. 子テーマを作る

でした。

モバイル振り分けはプラグインで

モバイルの振り分けは htaccess を使ったりすればできるのですがそれはそれでめんどうなのでプラグインで簡単にやりましょう。

Multi Device Switcher という日本の方が作られたプラグインを使うのがオススメです。

スマートフォン、タブレット端末、携帯モバイル、ゲームの4種類に対応していて使いやすいです。

このブログではタブレットの場合PCと同じ表示になるように設定しています。

マルチデバイス

 

というわけでつくった子テーマを

mobile_theme

子テーマ mobile_v1.0 内容

  • 親テーマminilevenの内容を全て反映
  • 自由に書けるcss, js ファイルを用意
  • jQueryはGoogle API CDNのを使うように
  • 言語ファイルを /plugins/jetpack/languages/ からリネームして子テーマへ
  • 埋め込みtwitterがはみ出る問題のfix via マイペースクリエイターの覚え書きさん

ダウンロード: mobile_v1.0.zip

親テーマminilevenと子テーマmobileが入ってます。~/wp-content/themes/ 以下に2つのディレクトリをアップロード。

CSS追加は /mobile/style.css, Javascript追加は /mobile/js/user.js に。

テーマ自体を弄りたい際は親テーマから子テーマへコピーして編集すればOK。(子テーマのfooter.phpみたいな形になります。既に1行削ってありますので参考に。)

Jetpackがアップデートされたら /jetpack/modules/minileven/theme/pub/minileven をテーマディレクトリのそれに上書きすればOK。

シェルでサーバーにログインしてシンボリックリンクを張るとJetpackのアップデート時にminilevenの更新の手間が省けます。こんな感じ

まとめ

レスポンシブはいいものですが現状レスポンシブにメリットはありません。また、wptouchを使うと他のブログとの差別化がしづらいし、今後もデバイスによって対応が後手に回ることが考えられます。

本当は自らテーマを作り続けることが正着なのですが、知識や時間が追いつかないという…

プラグインの振り分けを使って配布しているモバイル用テーマを使うのもいいですね。

色んな折衷案の中ではお手軽だと思います。

関連記事

9件のコメント


  1. […] スマートフォン対応をテーマの振り分けで簡単に実現。~wptouchからの卒業~ テーマファイルも置いてあるよ。  が続編。 […]


  2. […] モバイルでのアクセス時はモバイル用テーマに振り分けるようにするプラグイン。 […]


  3. […] の開発社の公式サイトもこの辺はまだ調整中だとか。 そこで代用を探しにググりました。その結果『所感 ~android~』さんの記事に到着。参考になりました。ありがとうございます。( ..) […]


  4. […] そこで代用を探しにググりました。その結果『所感 ~android~』さんの記事に到着。参考になりました。ありがとうございます。( ..) […]


  5. KtaiStyleを使わないでモバイルに対応できるテーマを探してきました。
    ちょうどJetpackのモバイル表示機能について調べていたので、有用な情報ありがとうございます。
    mobile v1.0をダウンロードしようとクリックしたのですが、リンク先でエラーとなってしまいます。お手数でなければ再アップしていただくことは可能でしょうか?

    返信
    1. thjap

      あ!リンク先間違えてました…
      直しましたんでダウンロードできるか試してみてくださいまし。

      返信

  6. ありがとうございました!無事にダウンロードできました^^
    お手数をおかけいたしましたm(_ _)m

    返信

  7. […] スマートフォン対応をテーマの振り分けで簡単に実現。~wptouchからの卒業~ … […]

コメントを残す

メールアドレスが公開されることはありません。