2016/06/3065 Shares

【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう!

WordPress条件分岐タグ

WordPressを使い始めて、配色や文字の変更などCSSで調整できる基本的なカスタマイズを覚えていくと、「もっとオリジナリティを出したい!」「ここはこうしたい!」という想いが強くなってきますよね。

では、一歩踏み出してPHPファイルを直接いじってみましょう。今回は特定の条件で表示するものを変える条件分岐タグを取り上げてみます。これを覚えておくと、カスタマイズの幅がグンと広がりますよ。

まずは簡単な、メインページとそれ以外(is_home)、モバイル端末とそれ以外(is_mobile)の2種類を解説します。「条件分岐」なんて堅苦しくて難しそうですが、意外とカンタン!

WordPressの条件分岐タグとは

条件分岐タグとは「もし○○だったら、△△する」というものです。さらに「そうじゃなければ、□□する」というのを指定することができます。

  • 条件:もし○○だったら、△△する
  • 分岐:そうじゃなければ、□□する

複雑に組み合わせることもできますが、まずはシンプルなものから始めてみましょう。このブログで使っている条件分岐タグも非常にシンプルなものです。

どんなタグがあるかは、WordPress Codex の 条件分岐タグ をご参照ください。

かなりたくさんありますが、基本を覚えてしまえばいくらでも応用できます。

is_homeを使ってメインページとそれ以外を分岐する

「is_home」はメインページかどうかを判定するタグです。

テーマによりますが、WordPressは下の図にあるようにどのページでも使う共通パーツがいくつかあります。主に下記の3点。

  • ヘッダー(header.php)
  • サイドバー(sidebar.php)
  • フッター(footer.php)

WordPressレイアウト例

とくに条件分岐を行っていなければ、この部分にはメインページも投稿ページも固定ページも、つねに同じものが表示されます。

もし、メインページと投稿ページでサイドバーの表示を変えたいな、という時はこの「is_home」を使いましょう。

is_homeの使い方

使い方は簡単で、分岐したいところをこのように振り分けて記述します。

コピペして使ってください。

is_homeの使用例

メインページとそれ以外のページで広告を変えたい

メインページではアドセンス、それ以外のページでAmazonアフィリエイトの広告を貼りたいなら、このように記述します。

投稿ページのメインコンテンツ部分にアドセンスを3つ設置したいけど、共通部品のサイドバーで枠を1つ使っている!という時なんかに使えます。

ページによって広告を変える

メインページのサイドバーには新着記事を表示しない

このブログでは、メインページに記事一覧を表示しています。少し前までサイドバーにも新着記事一覧を表示していましたが、重複していてもあまり意味がないので削除しました。

is_homeサンプル

メインページ以外では表示するよう設定しています。

何も出力したくない場合はこのように空白のままでOK。でもせっかくだから効果的な何かを置きたい…ということで思案中です。

is_mobileを使ってスマホとそれ以外を分岐する

is_mobile

今度は、スマホとタブレット・PCで出力を変えてみましょう。

WordPressに標準装備されているのは「wp_is_mobile」という条件分岐タグです。ひとつ注意しなければならないのが、このタグはタブレットもスマホとして扱うという点です。

それで問題なければかまいませんが、画面サイズの大きなタブレットはPCと同じ表示にしたいこともありますよね。そのために、新しく「is_mobile」という条件分岐タグを作ってしまいましょう。

  • wp_is_mobile・・・「スマホ&タブレット」or「PC」
  • is_mobile・・・・・「スマホ」or「タブレット&PC」

is_mobileを使うための準備

タグを作るために、functions.phpへ追記します。

これで、「is_mobile」を使って<スマホ>と<タブレット&PC>で分岐することができます。

参考WordPress無料テーマGushは設定済みです

is_mobileの使い方

使い方は「is_home」と似ています。

振り分けたいところで上記のように記述してください。

is_mobileの使用例

スマホとPCで広告を変えたい

PCで横幅336pxのレクタングル(大)を使っている場合、スマホで表示すると枠からはみ出てしまいます。

レスポンシブデザインを採用している場合、アドセンスであれば専用のコードを使うことで解消できますが、レスポンシブ以外のテーマで使用してもうまく動きません。

そんな時は、このように振り分けてみましょう。

「PC表示はレクタングルを2つ横に並べて、スマホ表示は広告を1つにしたい」時はどのようにしたら良いでしょう。CSSで消すこともできますが、この方法はあまり推奨されていません。

条件分岐タグを上手に使ってこのように振り分けるとスッキリします。

あとはCSSにfloatを設定して横並びにすればOK。

スマホ表示では読み込み速度の遅いはてブ数を消す

このブログはレスポンシブデザインですが、フッターまわりなどはスマホ表示しないよう分岐しています。メイン記事部分では、読み込みの遅いはてブ数の表示/非表示を切り替えています。

is_mobile 分岐サンプル

表示速度に影響があるパーツを重点的に切り替えると、ストレスなく記事を読み進めてもらえます。

スマホ表示では、シェアボタンをタップしやすいオリジナルボタンに切り替える、というのも考えられますね。

追記(2014/08/27)

SNSのシェア数を高速表示できるプラグインがかなり便利だったので、現在はこれで対応しています。

ツイート数やはてブ数を取得して高速表示できるSNS Count Cache

まとめ

このように条件分岐タグを覚えると、カスタマイズの幅が広がります。分岐させる箇所には通常どおりHTMLタグが使えるので、いろいろ試してみてください。

自分の好きなように改造してオリジナリティを出せるのがWordPressですが、記事が読みづらくなってしまったり、ゴチャゴチャしてどこに何があるかわからないページにならないよう気をつけましょう。

試行錯誤しながら読みやすいブログを目指そー!

参考初心者ブロガーが絶対覚えておくべき読まれるブログデザインの大原則

あ、カスタマイズの際は各ファイルのバックアップをお忘れなく。

それでは、また。