WordPress
WordPress

WordPressでスマホ対応にする3つの方法「テーマ」「メディアクエリ」「テンプレートタグ」

2021/02/25

( 更新日：2022/04/20 )

WordPressでスマホ対応にする3つの方法「テーマ」「メディアクエリ」「テンプレートタグ」

突然ですが、あなたの運営しているWebサイトはスマホに対応しているでしょうか？今日ではスマートフォンが普及し、普段からスマホを用いてインターネットを使用している人が大多数です。スマホ対応のWebサイトにすることで、より多くの人に閲覧してもらえるよすることができます。そこで今回は、WordPressでスマホ対応にする方法をご紹介します。

テンプレートで対応する

WordPressの長所の一つに豊富な種類のテンプレートテーマが挙げられます。無料なテンプレートから有料のものまで様々ありますが、無料でも質の高いテンプレートテーマがたくさんあります。ここからはおすすめのスマホ対応しているテンプレートテーマを紹介します。

Cocoon(コクーン)

「Cocoon」は見た目がシンプルなテーマですが、完全スマホ対応のテーマで多岐に渡る機能が実装されているテーマです。Cocoon公式ページによると主に7つの特徴があります。

シンプル
内部SEO施策済み
完全なレスポンシブスタイル
手軽に収益化
ブログの主役はあくまで本文
拡散のための仕掛けが施されている
カスタマイズがしやすい

以上のようにWebサイト運営には欠かせない機能が豊富です。また「Cocoon」は多くの人から支持されており、紹介されている記事が数多く存在しています。困ったことやカスタマイズしたい部分があった場合、すぐに検索がヒットするのもこのテーマの良いところです。

見た目を変更するときにHTML/CSSの知識は不要なため、初心者でも非常に使いやすいテーマとなっています。

更新頻度も高く、随時アップデートされているので、低コストで今すぐWebサイトを開設したい！という方にもオススメのテーマとなっています。

THE THOR(ザ・トール)

「THE THOR」は有料のWordPressテーマで価格は14800円(税別)です。スマホ・タブレット・PC・ワイドPCなど、どんな端末からでも閲覧しても見た目が美しく、読みやすいように最適化されたWordPressテーマとなっています。

THE THOR公式ページによると特徴がなんと54種類も紹介されています。洗練された見た目のみならず、スマホなどのモバイルユーザーがストレスなく閲覧や操作がしやすい配慮が施されており、モバイルファーストな設計がされています。全ての特徴は紹介しきれませんが、他の有料テーマを圧倒するポテンシャルを誇っていると言っても過言ではありません。

また、購入後のサポートやアフターフォロー体制も整っており有料テーマならではのサポートの特徴もあります。

CSSのメディアクエリを使用する

メディアクエリはPC、タブレット、スマホなど画面の大きさに応じてサイトの見た目を変更するときに便利です。メディアクエリは以下の方法で使用できます。

・CSSの@mediaで条件を指定してスタイルを適用する

・HTMLで<head>内に<link>を用いてスタイルを適用する

・Javascriptのwindow.matchMedia()メソッドを使用してスタイル適用する

CSSの@mediaで条件を指定

具体的には以下のような記述となります。

@media screen and(max-width:1024px) {
  /*画面の大きさが1024px以下の場合*/
  p {
    color: red;
  } /*p要素の文字の色を赤色に変更*/
}
@media screen and(max-width:460px) {
  /*画面の大きさが400px以下の場合*/
  p {
    color: blue;
  } /*p要素の文字の色を青色に変更*/
}

screenとはメディアタイプのことで他にはall、print、speechがあります。

allは全てのデバイスのことを指し、printはプリンター、speechはスピーチシンセサイザー、screenはpcやスマホなどのスクリーン画面を持ったデバイスのことを指します。

新たにファイルを作成する必要がなく、ファイル数を増やしたくない時にも有効な手段となります。

HTMLの<link>で指定

media=”メディアタイプ and (スクリーン幅)”のように指定した条件のときに適用するCSSを読み込むように記述をします。

下の例では、

「スクリーン画面を持つデバイスの幅が400px以下」という条件の時、「responsive.css」を読み込むという記述になります。

<link
  rel="stylesheet"
  href="/responsive_pc.css"
  media="screen and (max-width:1024px)"
/>
<link
  rel="stylesheet"
  href="/responsive_tab.css"
  media="screen and (max-width:770px)"
/>
<link
  rel="stylesheet"
  href="/responsive_sp.css"
  media="screen and (max-width:460px)"
/><link
  rel="stylesheet"
  href="/responsive_pc.css"
  media="screen and (max-width:1024px)"
/>
<link
  rel="stylesheet"
  href="/responsive_tab.css"
  media="screen and (max-width:770px)"
/>
<link
  rel="stylesheet"
  href="/responsive_sp.css"
  media="screen and (max-width:460px)"
/>

画面の大きさごとに適用するスタイルの記述を分けて整理しておきたい時に有効な手段となります。

Javascriptのwindow.matchMedia()を使用する

window.matchMedia(“スクリーン幅”).matchesで指定したスクリーン幅のときに適用するスタイルを指定します。

if (window.matchMedia('(max-width:1024px)').matches) {
  /*画面の大きさが1024px以下の場合*/
  $('p').css({ color: 'red' });
  /*p要素の文字の色を赤色に変更*/
} else {
  /*画面の大きさが1024pxよりも大きい場合*/
  $('p').css({ color: 'blue' });
  /*p要素の文字の色を青色に変更*/
}

CSSと同じように指定することが出来るのが特徴です。

WordPressのテンプレートタグを使用する

WordPressの本体やプラグインで用意されている専用のタグのことをテンプレートタグといいます。代表的なものに、get_header()でヘッダー取得、get_footer()でフッター取得などがあります。

wp_is_mobile()

WordPressのテンプレートタグの一つであり、スマホ(タブレットを含む)時のスタイルとPC時のスタイルを切り替えることが出来ます。以下のような記述で条件分岐が出来ます。

<?php if(wp_is_mobile()):?>/*スマホまたはタブレットの時*/
p{color:red;}/*p要素の文字の色を赤色にする*/
<?php else:?>/*PCの時*/
p{color:blue;}/*p要素の文字の色を青色にする*/

is_mobile()

wp_is_mobile()と同様に使用しているデバイスによってスタイルを切り替えることが出来ます。しかし、注意する点があります。

is_mobile()はスマホ時のスタイルとPC(タブレットを含む)時のスタイルを切り替えるテンプレートタグとなります。以下のような記述で条件分岐が出来ます。

<?php if (wp_is_mobile()) : ?>
  <!-- p要素の文字の色を赤色にする -->
  <p style="color:red">red</p>
<?php else : ?>
  <!-- p要素の文字の色を青色にする -->
  <p style="color:blue">blue</p>
<?php endif; ?>

以上のようにwp_is_mobileとis_mobile()の使い分けには注意する必要があります。