WordPressを使い始めて、配色や文字の変更などCSSで調整できる基本的なカスタマイズを覚えていくと、「もっとオリジナリティを出したい！」「ここはこうしたい！」という想いが強くなってきますよね。
では、一歩踏み出してPHPファイルを直接いじってみましょう。今回は特定の条件で表示するものを変える条件分岐タグを取り上げてみます。これを覚えておくと、カスタマイズの幅がグンと広がりますよ。
まずは簡単な、メインページとそれ以外（is_home）、モバイル端末とそれ以外（is_mobile）の2種類を解説します。「条件分岐」なんて堅苦しくて難しそうですが、意外とカンタン！
Headline
WordPressの条件分岐タグとは
条件分岐タグとは「もし○○だったら、△△する」というものです。さらに「そうじゃなければ、□□する」というのを指定することができます。
- 条件：もし○○だったら、△△する
- 分岐：そうじゃなければ、□□する
複雑に組み合わせることもできますが、まずはシンプルなものから始めてみましょう。このブログで使っている条件分岐タグも非常にシンプルなものです。
どんなタグがあるかは、WordPress Codex の 条件分岐タグ をご参照ください。
かなりたくさんありますが、基本を覚えてしまえばいくらでも応用できます。
is_homeを使ってメインページとそれ以外を分岐する
「is_home」はメインページかどうかを判定するタグです。
テーマによりますが、WordPressは下の図にあるようにどのページでも使う共通パーツがいくつかあります。主に下記の3点。
- ヘッダー（header.php）
- サイドバー（sidebar.php）
- フッター（footer.php）
とくに条件分岐を行っていなければ、この部分にはメインページも投稿ページも固定ページも、つねに同じものが表示されます。
もし、メインページと投稿ページでサイドバーの表示を変えたいな、という時はこの「is_home」を使いましょう。
is_homeの使い方
使い方は簡単で、分岐したいところをこのように振り分けて記述します。
<?php if(is_home()): ?> メインページで出力するものを記述 <?php else: ?> メインページ以外で出力するものを記述 <?php endif; ?>
コピペして使ってください。
is_homeの使用例
メインページとそれ以外のページで広告を変えたい
メインページではアドセンス、それ以外のページでAmazonアフィリエイトの広告を貼りたいなら、このように記述します。
<?php if(is_home()): ?> Google AdSenseのコード <?php else: ?> Amazonアソシエイトのコード <?php endif; ?>
投稿ページのメインコンテンツ部分にアドセンスを3つ設置したいけど、共通部品のサイドバーで枠を1つ使っている！という時なんかに使えます。
メインページのサイドバーには新着記事を表示しない
このブログでは、メインページに記事一覧を表示しています。少し前までサイドバーにも新着記事一覧を表示していましたが、重複していてもあまり意味がないので削除しました。
メインページ以外では表示するよう設定しています。
<?php if(is_home()): ?> //（空白） <?php else: ?> 新着記事を出力するコード <?php endif; ?>
何も出力したくない場合はこのように空白のままでOK。でもせっかくだから効果的な何かを置きたい…ということで思案中です。
is_mobileを使ってスマホとそれ以外を分岐する
今度は、スマホとタブレット・PCで出力を変えてみましょう。
WordPressに標準装備されているのは「wp_is_mobile」という条件分岐タグです。ひとつ注意しなければならないのが、このタグはタブレットもスマホとして扱うという点です。
それで問題なければかまいませんが、画面サイズの大きなタブレットはPCと同じ表示にしたいこともありますよね。そのために、新しく「is_mobile」という条件分岐タグを作ってしまいましょう。
- wp_is_mobile・・・「スマホ＆タブレット」or「PC」
- is_mobile・・・・・「スマホ」or「タブレット＆PC」
is_mobileを使うための準備
タグを作るために、functions.phpへ追記します。
//スマホ表示分岐
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
これで、「is_mobile」を使って＜スマホ＞と＜タブレット＆PC＞で分岐することができます。
参考WordPress無料テーマGushは設定済みです
is_mobileの使い方
使い方は「is_home」と似ています。
<?php if(is_mobile()): ?> スマホで出力するものを記述 <?php else: ?> タブレット・PCで出力するものを記述 <?php endif; ?>
振り分けたいところで上記のように記述してください。
is_mobileの使用例
スマホとPCで広告を変えたい
PCで横幅336pxのレクタングル（大）を使っている場合、スマホで表示すると枠からはみ出てしまいます。
レスポンシブデザインを採用している場合、アドセンスであれば専用のコードを使うことで解消できますが、レスポンシブ以外のテーマで使用してもうまく動きません。
そんな時は、このように振り分けてみましょう。
<?php if(is_mobile()): ?> スマホ用広告 <?php else: ?> タブレット・PC用広告 <?php endif; ?>
「PC表示はレクタングルを2つ横に並べて、スマホ表示は広告を1つにしたい」時はどのようにしたら良いでしょう。CSSで消すこともできますが、この方法はあまり推奨されていません。
条件分岐タグを上手に使ってこのように振り分けるとスッキリします。
<?php if(is_mobile()): ?>
<div class="ad-sp">
スマホ用広告コード
</div>
<?php else: ?>
<div class="ad-pc">
<div class="ad-pc-left">
PC用広告（左）
</div>
<div class="ad-pc-left">
PC用広告（右）
</div>
</div>
<?php endif; ?>
あとはCSSにfloatを設定して横並びにすればOK。
スマホ表示では読み込み速度の遅いはてブ数を消す
このブログはレスポンシブデザインですが、フッターまわりなどはスマホ表示しないよう分岐しています。メイン記事部分では、読み込みの遅いはてブ数の表示／非表示を切り替えています。
<?php if(is_mobile()): ?> //（空白） <?php else: ?> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>"><img src="http://b.hatena.ne.jp/entry/image/<?php the_permalink() ?>" /></a> <?php endif; ?>
表示速度に影響があるパーツを重点的に切り替えると、ストレスなく記事を読み進めてもらえます。
スマホ表示では、シェアボタンをタップしやすいオリジナルボタンに切り替える、というのも考えられますね。
SNSのシェア数を高速表示できるプラグインがかなり便利だったので、現在はこれで対応しています。
まとめ
このように条件分岐タグを覚えると、カスタマイズの幅が広がります。分岐させる箇所には通常どおりHTMLタグが使えるので、いろいろ試してみてください。
条件分岐に関してもっと勉強したい方はこちら
自分の好きなように改造してオリジナリティを出せるのがWordPressですが、記事が読みづらくなってしまったり、ゴチャゴチャしてどこに何があるかわからないページにならないよう気をつけましょう。
試行錯誤しながら読みやすいブログを目指そー！
参考初心者ブロガーが絶対覚えておくべき読まれるブログデザインの大原則
あ、カスタマイズの際は各ファイルのバックアップをお忘れなく。
それでは、また。