【WordPress】条件分岐で高速化！スマホ・ホーム・特定カテゴリで無駄表示しない方法

WordPressでブログを作成していると、スマホとタブレットとPCや、記事とホーム、カテゴリ別などで条件分岐して表示したい内容がでてきます。今回はその方法をいろいろ紹介します。

ゆめぴょんです。こんちはっ(^^)/

このブログは現時点（2014.6.6）では「スマホ」と「PC＆タブレット」をそれぞれ自作テーマで表示しています。テーマ作成時の記事は下のとおりです。

◆【WordPress】新テーマデザインで96点達成！SEO対策・軽量化など7つの特徴をさらします
◆【Web制作】スマホサイトの高速化！pagespeedで93点達成の攻略方法

今回は「スマホ・タブレット・PC」だけでなく「記事・固定ページ・ホーム・アーカイブページ」「カテゴリー・タグ別」「ログインユーザー（管理者）のみ」への出し分け設定も紹介します。

条件分岐を上手く使えば、無駄なコードを読み込まずに表示の高速化もはかれます。多用は禁物ですが。このブログでの活用方法を例に出して、説明・共有したいと思います。

記事・固定ページ・ホーム・アーカイブページによる条件分岐
1. ページの種類による条件分岐の方法
スマホ・タブレット・PCなどデバイス端末による条件分岐
1. デバイス端末による条件分岐の方法
特定カテゴリーやタグによる条件分岐
1. 特定カテゴリー・タグによる条件分岐の方法
ログインユーザー・管理者のみに条件分岐
まとめ：今日のゆめぴょんの知恵

記事・固定ページ・ホーム・アーカイブページによる条件分岐

まずは一番基本的な条件分岐です。このブログでは、記事・固定ページと、ホームなどそれ以外のページでは、次のような点で表示内容を切り替えています。

記事・固定ページのみ：左サイドのSNS追尾ボタン
記事・固定ページのみ：右サイドバーの新着と人気記事の一覧
記事・固定ページのみ：右サイドバーのZenback
記事・固定ページのみ：記事下に執筆者
記事・固定ページのみ：記事下に関連カテゴリの人気記事一覧
記事ページのみ：記事下に関連ないカテゴリの人気記事一覧
記事・固定・カテゴリページのみ：パンくずリスト
ホーム・アーカイブページ：記事一覧より上にSNS・feedlyへのリンク
ホーム・アーカイブページ：新着記事一覧の下に「もっと見る」とページャー
ホーム・アーカイブページ：新着記事一覧の下に関連カテゴリの人気記事一覧

さらに見えないh1タグの部分でも、次のような点で出し分けています。descriptionのmetaタグなど細かい点はもっとありますが、今回はここまでにしときます。

記事・固定ページのみ：h1タグはタイトル
ホームのみ：h1タグはサブタイトル
カテゴリーなど：h1タグは「カテゴリ名」+「おすすめ記事一覧」等

それぞれの設置方法については、下記事を参考にしてください。

ページの種類による条件分岐の方法

これはWordPressで用意されている標準関数を使えば、簡単に実装できます。例えばホームでのみ表示したい内容は、次のように書くだけです。

[html]

[/html]

同じように、記事・固定ページ・アーカイブページなどで条件分岐するには、上の1行目を次のような関数に変えるだけで可能です。

ホーム「is_home()」
記事「is_single()」
固定ページ「is_page()」
カテゴリ一覧ページ「is_category()」
タグ一覧ページ「is_tag()」
年月日ページ「is_date()」
アーカイブ全般（カテゴリ・タグ・年月日）「is_archive() 」
検索結果ページ「is_search()」
404ページ「is_404()」

これ以外にもたくさんあります。全て確認したい人は、下の公式Wikiをご確認ください。

⇒条件分岐タグ – WordPress Codex 日本語版

スマホ・タブレット・PCなどデバイス端末による条件分岐

次は少し面倒ですが、今もっとも重要だと思われる条件分岐についてです。

私のこのブログは「スマホ」と「PC＆タブレット」は自作テーマを使っていて、全体的に全く違う表示内容になっています。特に大きな点は次のとおりです。

スマホのみ：SNSボタン・feedlyリンクなどを極力減らしている
スマホのみ：サイドバー、追尾ボタンなどは表示しない
スマホのみ：カテゴリーリンク、検索などは隠している
スマホのみ：新着・人気記事の一覧を減らすか表示しない
スマホのみ：Zenback・広告などは極力減らしている
スマホのみ：無駄なHTML・CSS・JavaScriptコードは極力減らしてる

デバイス端末による条件分岐の方法

まずは私が「スマホ」と「PC＆タブレット」を別テーマで扱っている方法ですが、WordPressプラグイン「Multi Device Switcher」を利用しています。下記事を参考にしてください。類似プラグインの比較記事へのリンクも掲載しています。

「Multi Device Switcher」は通常はAndroidタブレットはスマホとして判定されますが、その対策方法についても記載しています。

◆【WordPress】Multi Device Switcherでスマホテーマ自動切替！Androidタブレット対応方法も

WordPressプラグインを利用しない場合や、簡易レスポンシブ、モバイル端末への対応箇所が少ない場合などは、次のような条件分岐関数も用意されています。

[html]

[/html]

しかし多くの人は、上の関数を使えないと思います。なぜなら「スマホ＆タブレット」となっているからです。

そこでよく利用されているのが「is_mobile()」という条件分岐関数を自作して「スマホのみ」「タブレット＆PC」に分ける方法です。整理すると次のようになります。

wp_is_mobile()：標準関数。「スマホ＆タブレット」と「PCのみ」
is_mobile()：自作関数。「スマホ」「タブレット＆PC」

自作コードはあちこちで紹介されていますが、元記事はわかりません。よく見る下のブログから、そのまんまコピペさせていただきました。ありがとうございます。

[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’]);
}
[/php]