ピックワールド(PIC World)

インフォメーション

この記事は 2015年02月16日 に以下のカテゴリに投稿されました Wordpress Tips.

この記事のタグ

, , , , , , ,


WordPress Tips : モバイル対応するための一つの工夫 – minileven を Jetpack から分離して使う

このブログは WordPress をつかっています。

このサイトをスマートフォンで表示

このサイトをスマートフォンで表示

最近はレスポンシブルデザインに対応した WordPress のテーマも増えてきてはいますが、テーマ自体は対応していても、それをカスタマイズしていくと、自分で作ればよいのですが、そうではないときには CSS 等が関連して、なかなか大変な事もあるでしょう。

ちなみにレスポンシブルデザインとは、同一のテーマを使って、PC にもタブレットにも、スマートフォンにも対応する Web サイトを作るデザイン方法の事をさします。

これが出来れば一番良いのですが、その実現はやっかいです。

複数あるデバイスに対して、それぞれ見やすいサイトを作りたいと思ってはいますが、実際にレスポンシブルデザインを採用してみると、思いの外手こずると言うのが現状ではないかと思います。(単に精通していないだけかもしれないけどね)

このサイトでは、実はレスポンシブデザインではありません。

このサイトは、サイトにリクエストがあったときに、クライアントのデバイスが何なのかを判別し、スマートフォン用のテーマを表示するように割り振りを行っています。

この方法を実現する方法として、無料で利用できる WordPress のプラグインである、Jetpack を使った方法があり、以前はこれを利用していました。

その構築方法は、以前にもこちらの記事こちらの記事で紹介させていただきました。

もちろんこの方法でも良いのですが、Jetpack の中に含まれている事により、このスマートフォン用のテーマ minileven が、通常のテーマファイルが置かれる場所と異なる場所に置かれているのです。

なにが問題なのかというと、プラグインである Jetpack がアップデートされると、カスタマイズした minileven も上書きされてしまい、おちおちしていると、テーマ自体が置き換わって、一生懸命カスタマイズしたテーマが上書きされてしまうという事が起こるのですね。

通常は、バックアップを取ってあるはずですから、そんな時にはバックアップから元に戻すという作業が必要になります。

しっかりとやっていれば、問題は起きないのですが、試しにこんな事をしてみても、問題は起きずに動きますので、もしもお困りの際には試してみると良いと思います。

ただし、サイトにリクエストを送ったクライアントに対して、どのテーマを使って表示を行うかは、別のプラグインなどを使ってその機能を代わりに実現しなければなりません。

さてその方法は・・

まずは準備編

  • Jetpack のスマートフォン用のテーマは、
    /wp-content/plugins/jetpack/modules/minileven
    にありますので FTP ツールなどで確認してください。
  • このテーマファイル minileven をディレクトリごと、通常のテーマファイルの置き場所にコピーします。
    /wp-content/themes/
  • 管理者のアカウントで、Wordpress にログインし、外観 -> テーマと進み、minileven がテーマとして表示されている事を確認してください。
    確認するだけで、有効化する必要はありません。

次にクライアントをテーマに振り分ける方法を考えます。

このサイトの場合は、W3 TOTAL Cache というキャッシュツールを使っていますが、この中にクライアントの振り分けを行う機能が含まれていますので、これを使っています。

W3 TOTAL Cache の User Agent Groups のメニューに入り、

User Agent Groups

User Agent Groups

まずはこの機能を有効化するために Enabled のチェックボックスにチェックを入れます。

そしてその下のドロップダウンリストに先ほどコピーしたテーマ minileven を指定して、スクロールし、Save All Settings のボタンを押して、設定を保存します。

これで、W3 TOTAL Cache により、エージェントを minileven に振り分ける事が可能となります。

スマートフォンやタブレットでサイトにアクセスし、正しく振り分けが動作している事を確認します。

しばらく運用していますが、なんの問題も無くアイキャッチ画像の表示などにも一切手を入れないで、運用出来ています。

実は W3 TOTAL Cache には、もう1種類振り分けを可能とする事が出来るのですが、こちらはまだ試していません。
ガラケー用とか、タブレット専用のテーマを作って、今後試してみようかと思っています。

クライアントの機種により使うテーマに振り分ける機能自体は、W3 TOTAL Cache でなくても、実現出来る物が他にもあるとは思います。

まぁ当たり前と言えば当たり前なのですが、これで Jetpack がアップデートしても、ためらうことなくアップデートする事が出来るようになりましたし、気持ち的に楽になりました。

おまけの機能としては、ワードプレスの管理画面から、minileven を編集する事も出来るようになりますね。ただしテーマを有効化しないとダメですが・・

minileven には、フッターに PC サイトを表示するリンクがありますが、これがクリックされるとおかしな事になりそうなので、削除してしまいました。

よろしかったら試してみてください。

 

投稿者のプロフィール

minorus
minorus
電子機器が大好きです。 プログラムを書くのをお仕事としていたこともあるので、両方できる PIC や Arduino を使って、いろいろな(役にあんまり立たない)ものを作っています。 実は UNIX 関連のお仕事も長かったので、Raspberry Pi もお手の物なのですけれど、これから触る機会が多くなるのかなぁ。 ボチボチ行きますが、お付き合いください。 若いころの写真なので、現時点では、まだ髪の毛は黒くてありますが、お髭は真っ白になりました。 愛車の国鉄特急カラーのカスタムしたリトルカブで、時々、秋月電子通商の八潮店に出没します。

コメントを残す

最近の投稿

最近のコメント

アーカイブ