みなさん、こんにちは。
Webテロリストです。

多くの人がiPhoneやiPadに代表されるスマホやタブレットを持つようになって、
益々レスポンシブデザインの必要性と有効性が高くなってきている今日このごろ…。

みなさんのWordPressはレスポンシブに対応していますか?
まだの方は、一日も早くレスポンシブデザインに切り替えましょう。

最も手軽なレスポンシブデザインの対応方法

一番簡単な方法はテーマ(テンプレート)を
レスポンシブデザイン対応のものに変えることです。

今御覧頂いているこのWordPressも
レスポンシブデザイン対応のテンプレート賢威6.1をカスタムして使っています。

当然、カスタムする部分は自分で、
レスポンシブデザインに対応するようにカスタムしなければいけないんですが、
多くの場合、CSSを使って、PCなのかモバイルなのかを振り分けます。

例えば、このボックスはパソコンで表示させると、
横長の緑の背景で表示されていますが、
スマホなどで見ると、青い正方形で表示されていると思います。

とはいえ、CSSはそもそも色とか大きさとか太さとか、
「記事(Webページ)」の装飾の部分を指定するために使うものなので、
文章とかリンク先のURLとか「内容」の部分をCSSで変える事はできません。

では、実際はどのようにするのか?

PCとスマホを認識させて、表示内容を振り分ける方法

いくつか方法は有りますが、WordPressを使っている方なら、
「wp_is_mobile();」という関数を使うのが一番簡単だと思います。

使い方は以下のとおり。

1.書き換えたい場所に以下のコードを書きます。

[php autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” highlight=”” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true” wraplines=”true”]
<?php if (wp_is_mobile()) :?>
スマートフォン用の文章をココに書きます。
<?php else: ?>
パソコン用の文章をココに書きます。
<?php endif; ?>
[/php]

2.Exec-PHPのインストール&有効化

元々、PHPで構成されているWordPressですが、
投稿・固定ページやウィジェットの中に記述しても
ただの文字列として表示されてしまい、
本来の力を発揮できません。

そこで活躍するのがExec-PHP
このプラグインを使う事で、
投稿・固定ページやウィジェットの中に記述したコードが
PHPとして認識されて、PHP本来の実力を発揮してくれます(^^)

詳しくはコチラ↓の記事を参考にしてみて下さい!
 → 投稿・固定ページやウィジェットにPHPを埋め込めるプラグイン「Exec-PHP」

たったこれだけで、見ている端末がPCなのかスマホなのかを自動判別して、
自動的に文章が入れ替わるようになります。

では実際にwp_is_mobile();を使って内容を書き換えてみたいと思います。


あなたは今、スマホでこの記事を読んでいますね。
パソコンで見ると違う文章が表示されます。

あなたは今、パソコンでこの記事を読んでいますね。
スマホで見ると違う文章が表示されます。

↑ここの部分の文章が入れ替わります。

実際には、こんな感じ↓で書いています。
[php autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” highlight=”” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true” wraplines=”true”]
<?php if (wp_is_mobile()) :?>
あなたは今、スマホでこの記事を読んでいますね。
パソコンで見ると違う文章が表示されます。
<?php else: ?>
あなたは今、パソコンでこの記事を読んでいますね。
スマホで見ると違う文章が表示されます。
<?php endif; ?>
[/php]

今回の例では文章のみを書き換えましたが、
コレを応用して、それぞれの部分にHTMLのコードを書けば、
端末に応じて画像を差し替えたり、
リンク先を変えたり、
使い方は無限に広がっていると思うので、
いろいろ試してみてくださいね!

ディスカッションに参加

2件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です