テーマファイルをカスタマイズして対応させる
レスポンシブ対応しているテーマを使うとか、プラグインを使うとかいう方法もありますが、オリジナルテーマにこだわりたい場合、不具合の可能性などを考えると、可能なものはカスタマイズで済ませたほうがよいでしょう。
以下をheader.phpファイルの＜!?php wp_head(); ?＞より上に記述
<meta name="viewport" content="width=device-width,user-scalable=no" />
<!-- ※デフォルトのスタイル（style.css） -->
<link rel="stylesheet" media="all" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />
<!-- ※タブレット用のスタイル（tablet.css） -->
<link rel="stylesheet" media="all" type="text/css" href="<?php bloginfo('template_directory'); ?>/tablet.css" />
<!-- ※スマートフォン用のスタイル（smart.css） -->
<link rel="stylesheet" media="all" type="text/css" href="<?php bloginfo('template_directory'); ?>/smart.css" />
一行目の中の説明
name=”viewport” 表示領域の設定
width=device-width 幅を端末画面の幅に合わせる
user-scalable=no ズーム操作を許可しない
user-scalable=yes ズームを許可する
maximum-scale=1 最大倍率。0～10倍まで指示できる
＜?php bloginfo(‘template_directory’); ?＞ 使用中のテンプレートフォルダを取得するテンプレートタグ
参照ページ
レスポンシブWebデザインの作り方（簡単設定方法）
表示領域を設定する
パソコンサイトとスマートフォンサイトの表示コンテンツを分ける条件分岐
<?php if (wp_is_mobile()) :?>
スマートフォン表示コンテンツ
<?php else: ?>
パソコン表示コンテンツ
<?php endif; ?>このままではiPad、Kindleなどのタブレット型端末までスマートフォン表示に含まれてしまうので、それは嫌じゃ！！って場合は参照ページをご覧ください。