WordPressのサイトをレスポンシブデザインにする方法

WordPressのサイトをレスポンシブデザインにする方法と言われると、まるで独自の方法があるようなタイトルですが、
レスポンシブデザインに対応するのは、WordPress（ワードプレス）限定の作り方が特別ある訳ではなく、
WordPressで制作されているサイトでも、レスポンシブデザインにすることは難しくありません。
通常の運営しているwebサイトと同じ手順で、簡単にレスポンシブデザインに対応することができます。

Googleもレスポンシブデザインのサイト運営を推奨しており、スマホ（モバイル）でのSEO対策を行うには、レスポンシブデザインは必須です。
管理・運用面の観点からも、1つのファイルでパソコン表示とスマホ表示をCSSにより調整するレスポンシブ対応はとても便利でお勧めです。

ということで本記事では、WordPressで作られたサイトに着目して、レスポンシブデザインを導入する方法をまとめていきます。

WordPressの初期テンプレート

WordPressのテンプレートフォルダには、多くのファイルがありますが、今回は、こちらのファイルに絞って話を進めます。
1つのページをレスポンシブデザインにしたら後は、他のページも同じような作業を繰り返すだけです。

• index.php：トップページ
• header.php：ヘッダー
• style.css：スタイルシート

ビューポートを設定する

使用するファイル：index.php、header.php（header-index.php）
まず、レスポンシブデザインにするには、ヘッダーにビューポートを記述する必要があります。WordPressはヘッダーが共通ファイルとして別ファイルになっています。

ということは、これを記述してしまうと、レスポンシブデザインの用意ができていないうちに、スマホで見た時に、全てのページが変わってしまいます。

なので、レスポンシブデザインにする時は、まずひとつのページから導入するようにします。
例えば、トップページを最初にレスポンシブデザインにする場合は、ヘッダーにトップページ専用のヘッダーテンプレート「header-index.php」を読み込ませます。

header-index.phpを別途用意して、head内にこちらを記述します。

<meta name="viewport" content="width=device-width">

そして、index.phpの、

<?php get_header(); ?>

を下記のように書き換えます。

<?php get_header('index'); ?>

すると、トップページだけスマホで見た時の見え方が変わっているはずです。
ビューポートとは、表示領域の設定のことで、スマホでこれを設定していないと、デフォルトの980pxでPCサイトが縮小されて表示されます。

ここでは、トップページで話を進めていますが、レスポンシブデザインにする時、アクセスが多いサイトの場合は、テストページなどを用意して作業するようにしましょう。

メディアクエリの設定

使用するファイル：style.css
次に、cssにメディアクエリを記述して、PCとその他のデバイス用に振り分ける設定をします。
メディアクエリは、style.cssに記述します。

/* pc */
@media screen and (min-width: 961px) {
/*ここにpc用スタイルを記述*/
}
 
/* tablet  */
@media only screen and (min-width: 641px) and (max-width: 960px) {
/*ここにtablet用スタイルを記述*/
}
 
/* smartPhone */
@media screen and (max-width: 640px) {
/*ここにスマホ用スタイルを記述*/
}

ここでは横幅が、961px以上の場合（PC）、641px以上960px以下の場合（タブレット）、640px以下の場合（スマホ）とデバイスをそれぞれ振り分けています。

先ほども言いましたが、ビューポートを設定するとスマホでの見え方が変わります。ということは、ビューポートを設定していなければ、メディアクエリでデバイス毎にcssを振り分けて、スタイルを記述しても、反映されることはありません。

レスポンシブデザインにする時は、必ずビューポートを設定してからメディアクエリでcssを振り分けて調整します。

ビューポートと、メディアクエリの詳しい設定方法はこちらをご覧ください。
レスポンシブデザイン簡単導入法01 – ビューポート・メディアクエリ編

それぞれのデバイスに合うように調整する

使用するファイル：style.css
あとは各デバイスや、レスポンシブデザインをチェックできるサイトなどで確認しながらcssを調整していきます。
横スクロールが出るようでしたら、画像サイズの可変設定や、cssの横幅などの設定を確認してみてください。

カラムの調整

2カラム、3カラムのサイトは見やすいカラムにする必要があります。
これは、下記のように、PCではfloatで回り込ませていたcssを他のデバイスの時には、noneにするだけです。
横幅を指定していたら、autoや100%に設定しましょう。

/* pc */
@media screen and (min-width: 641px) {
#main {width:700px; float:left;}
}

/* smartPhone */
@media screen and (max-width: 640px) {
#main {width:auto; float:none;}
}

画像を可変にする

画像の横幅をデバイスの横幅を超えないように、下記cssを記述します。

/* smartPhone */
@media screen and (max-width: 640px) {
img {max-width:100%;}
}

レスポンシブデザインにする際のよく使う項目については、こちらをご覧ください。
レスポンシブデザイン簡単導入法02 – よく使う項目まとめ編

レスポンシブ対応のテーマやプラグインを利用する

これまでレスポンシブに対応するファイルの編集方法をご紹介してきましたが、レスポンシブ対応はなんだか難しそう…と感じるワードプレス初心者の方もいらっしゃるかもしれません。

とにかく早急に簡単にレスポンシブ対応したいという方は次のような方法があります。

• WordPressのレスポンシブ対応テーマを使用する
• WordPressのレスポンシブ対応プラグインを使用する

WordPressのレスポンシブ対応テーマ適用方法

ワードプレスのテーマは管理画面のメニュー「外観」から「テーマ」を選択します。

新たにwordpressテーマを探す場合は、ページ上部の「新規追加」をクリックするとテーマが表示されます。「特徴フィルター」を利用し、テーマを絞り込みして探すと好みのテーマが見つかりやすいですね。レスポンシブというフィルタは無いですが、フィルターを適用した後に表示されるテーマ上で、「プレビュー」を選択すると事前に表示が確認できます。「インストール」をし、「適用」するとテーマが反映されますのでお試しください。

また、テーマには有料テーマと無料テーマがあります。多くのテーマは無料で使えますが、インストール前に注意してください。

WordPressのレスポンシブ対応プラグイン適用方法

スマートフォン対応のプラグインをインストールし有効にするだけで、運用中のWordPressがスマホ対応します。テーマを適用すると同じくらい簡単にレスポンシブ対応が可能な方法となります。

プラグインは、ワードプレス管理画面のメニュー「プラグイン」から「新規追加」を選択します。

レスポンシブに対応するための定番プラグインは「WPtouch Mobile Plugin」「MobilePress」あたりが無料で公開されており人気のプラグインとなります。細かな設定の対応可能範囲は各プラグインにより違いがあるので使いやすいプラグインを探して適用しましょう。

WordPressをレスポンシブにするまとめ

このように、WordPressで構築されたサイトでも、レスポンシブデザインにすることは難しくありません。
対応するページも全て対応しなければいけない訳でもありませんので、ユーザーの使いやすいサイトを目指して、必要に応じてレスポンシブデザインを取り入れましょう。
※作業は、必ずバックアップをとって作業するようにしてください。

また、こちらの「簡単！レスポンシブデザインの作り方のすべて」の記事もご参考ください。