WordPressをスマートフォンに対応させる5つの方法

WordPressに限ったことではなく、現在ウェブサイトを運営していれば、スマートフォンに最適化させたデザインを作成するのは必要不可欠なことだと思います。当ブログの場合、4~5割のユーザーがiOSもしくはAndroidからアクセスしており、この数字は少し前では想像もつかない値になっています。

WordPressでは、便利なプラグインや関数が用意されているので、最適化にかかる時間は一般のWebサイトに比べれれば、容易な部分があります。まだ、最適化されていない方は、これから紹介する5つの方法のメリット・デメリットを把握した上で、早めにスマートフォンにも対応することをお勧めします。

1.プラグインを利用する

メリット

  • プラグインをインストールだけなので簡単

デメリット

  • 同じデザインのブログが沢山存在する

このデザインのブログをよく見かけるという人も少なくないと思います。WPtouchは非常に優れたプラグインだけに、多くの人に利用されているので、このような事が起きています。ブログデザインでも、他のブログと差別化を図りたいと思っている人には難しい選択肢になります。そうではない人には、いいプラグインだと思います。

プラグイン内のCSSファイルを書き換えれば、デザインを変えることもできますが、知識がありその手間をかけるなら、下の4つの方法のどれかで独自にテーマを作るほうをお勧めします。

導入方法

WordPressの管理画面の左側のプラグイン→新規追加を押してください。次に、真ん中にフォームが出てくるので、WPtouchと検索してください。
リストの一番上にWPtouchがあるので、WPtouchの下の今すぐインストールを押してください。

少ししたら「プラグイン WPtouch ◯◯ のインストールが完了しました。」が出るので、これでインストールは完了です。次に、プラグインを有効化を押してください。これで導入は終了です。スマートフォンからアクセスすれば、先ほどのようなデザインに変わっていると思います。

関連リンク

2.レスポンシブデザインを利用する

メリット

  • 画面サイズの大きさでデザインを決めるので、どんな端末からアクセスしても最適化されている。

デメリット

  • 技術は必要。
  • 既存のテーマをレスポンシブに対応させるのは、手間がかかる。


最近のWebデザインのトレンドの一つであるレスポンシブデザイン。WordPressの標準テーマであるTwenty Twelveもレスポンシブデザイン対応です。

画像サイズに応じて、サイドバーやメニュバーの位置が移動したり、文章の横幅が移動するので、どのようなサイズの端末から見ても、最適なデザインになります。その一方で、実装には技術が必要になります。新しくデザインを作るときには挑戦してみたい方法でもあります。

関連リンク

3.モバイル専用のCSSを別に用意する

メリット

  • 自由度がありながらも、モバイル用のCSSを作るだけなので時間的にはまだ短い。

デメリット

  • HTMLは同一でなくてはならない。

cssを読み込む際に、画像のサイズの大きさに応じて、PC用のCSS・スマートフォン用のCSSを読み込む方法です。(場合によればタブレット用も)

CSSだけなので、自由にデザインできる割には時間が短くてすみます。PCでは表示するが、スマートフォンでは表示させない部分などは、display:none;で対応します。
PCにはこれ。スマフォにはこれ。といった具合に増やしていくと、テーマファイルが大きくなってしまうのを注意する必要はあります。

導入方法

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width:481px)" href="style.css" />

480pxより大きい場合は、style.css。小さい場合は、mobile.cssを読み込みます。

4.端末事に別のファイルを作る。

メリット

  • 別のテーマファイルなので、自由にデザインを組める。

デメリット

  • 作成に時間がかかる

Device Theme Switcherというプラグインを利用して、アクセスしてきた端末に応じて、利用するテーマを変更するという方法です。

テーマを二つもしくは三つ作らなければいけないですが、自由にデザインを作ることができます。

導入方法

WordPressの管理画面の左側のプラグイン→新規追加を押してください。次に、真ん中にフォームが出てくるので、Device Theme Switcherと検索してください。
リストの一番上にDevice Theme Switcherがあるので、Device Theme Switcherの下の今すぐインストールを押してください。

少ししたら「プラグイン Device Theme Switcher ◯◯ のインストールが完了しました。」が出るので、これでインストールは完了です。次に、プラグインを有効化を押してください。これで導入は終了です。

次にWordPressの管理画面の左側の外観→Device Themeを押してください。そうすると上記のような画面が表示されます。
端末ごとに利用するテーマを選択すれば完了です。

5.wp_is_mobileを利用する。

メリット

  • 端末の分岐を容易にできる。

WordPress3.4から実装されたwp_is_mobileという関数を利用します。この条件分岐関数を利用すれば、PCだけ読み込み、スマートフォンだけ読み込みというのが簡単に行えます。当ブログもこの方法を利用しています。

	<?php if (wp_is_mobile()):?>
	<!-- スマートフォン用の内容 -->
	<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo("template_url"); ?>/mobile.css">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />
	<?php else: ?>
	<!-- PC用の内容 -->
	<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo("template_url"); ?>/style.css">
	<?php endif; ?>

wp_is_mobile()を利用して読み込むCSSを分けています。

		<?php if (!wp_is_mobile()):?>
		PCのみ表示するの内容
		<?php endif; ?>

当ブログでは、PCからだとタイトルの横にメニューバーを表示していますが、スマートフォンからだとこのメニューバーを表示させないようにしています。このような場合、上のように「!wp_is_mobile()」を利用してmobileではない場合(すなわちPC)のみの表示の内容をこのような形で書いています。

スポンサーリンク