WordPressの標準スマートフォン条件分岐をオリジナルに変更する

WordPressには、標準でスマートフォン用の条件分岐wp_is_mobileが実装されておりますので、それをそのまま利用するのも良いです。

<?php if ( wp_is_mobile() ) : ?>
	Smartphone & Tablet コンテンツ
<?php else: ?>
	PC コンテンツ
<?php endif; ?>

しかし、その中にiPad等のタブレット端末も含まれており、「いや、タブレットの場合はPC表示と同じでいいや。」というケースが多々あります。この場合、スマートフォンのみの条件分岐に設定しなおす必要がありますので、functions.phpへ下記のように記述します。

function is_mobile() {
	$useragents = array(
	'iPhone',
	'iPod',
	'Android',
	'dream',
	'CUPCAKE',
	'blackberry9500',
	'blackberry9530',
	'blackberry9520',
	'blackberry9550',
	'blackberry9800',
	'webOS',
	'incognito',
	'webmate'
	);
	$pattern = '/'.implode('|', $useragents).'/i';
	return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

その後、PCとスマートフォンで表示を変えたい箇所に下記を記述し、それぞれにコンテンツを追加していきます。

<?php if ( is_mobile() ) : ?>
	SmartPhone Only コンテンツ
<?php else: ?>
	PC & tablet コンテンツ
<?php endif; ?>

ヘッダー部分にスマートフォン条件分岐を実装する

先ほどのWordPress条件分岐タグを利用して、ヘッダーにPC表示とスマートフォン表示用のタグを記述していきます。

<?php if ( is_mobile() ) : ?>
	<header id="mobile_header">
		<div class="mobile_header_area">
			<h1 class="logo">
				<a href="<?php bloginfo('url'); ?>/"><img src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>"></a>
			</h1>
		</div>
	</header>
<?php else: ?>
	<header id="header">
		<h1 class="logo">
			<a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>//images/logo.png" alt="<?php bloginfo('name'); ?>"></a>
		</h1>
		<nav class="header_nav">
			<ul>
				<li><a href="<?php bloginfo('url'); ?>/link01/">ナビ01</a></li>
				<li><a href="<?php bloginfo('url'); ?>/link02/">ナビ02</a></li>
			</ul>
		</nav>
	</header>
<?php endif; ?>

CSSは、デザインに合わせて変更してみてください。
ここでは、PCやタブレット表示の場合はロゴを左に、ナビゲーションを右に配置してます。スマートフォン表示の場合は、ロゴ画像を中央に配置し、position: fixed;で画面上部に固定で表示されるように設定してあります。

#header{
	background-color: rgba(25,35,49,.9);
}

.header_area{
	margin: 0 auto;
	padding: 2em 0;
	width: 1280px;
	letter-spacing: -.40em;
}

@media screen and (max-width: 1280px){
	.header_area{
		width: 100%;
	}
}

.logo,
.header_nav{
	display: inline-block;
	vertical-align: middle;
	letter-spacing: normal;
}

.logo{
	width: 20%;
	font-size: 12px;
	text-align: center;
}
.header_nav{
	width: 80%;
	text-align: right;
}

.logo a{
	color: #fff;
}
.logo a:hover{
	opacity: .5;
}

.logo img{
	display: inline-block;
	padding: 0 .5em 0 0;
	width: 60%;
	height: auto;
}

@media screen and (max-width: 1280px){
	.header_nav{
		width: 79%;
		text-align: right;
	}

	.logo img{
		display: block;
		padding: 0 0 .5em;
		width: 100%;
		height: auto;
	}
}

.header_nav li{
	display: inline-block;
	text-align: center;
}

.header_nav li a{
	display: inline-block;
	margin: 0 0 0 1em;
	padding: .2em 1em;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	vertical-align: middle;
}

#mobile_header{
	position: fixed;
	width: 100%;
	background-color: rgba(25,35,49,.9);
	box-shadow: 0 3px 5px rgba(0,0,0,.3);
	z-index: 10;
}

.mobile_header_area{
	position: relative;
	padding: 15px 0;
}

.mobile_header_area .logo a{
	display: block;
	margin: 0 auto;
	width: 80px;
	height: auto;
}

.mobile_header_area .logo img{
	display: block;
	width: 100%;
	height: auto;
}

※自分が使いやすいように設定してあります。このまま利用されても良いですし、あなたなりの設定にカスタマイズしてみてください。

WordPressでは、条件分岐をうまく利用することにより思った通りの表示が可能となります。レスポンシブだけでPCとスマートフォンのレイアウトをうまく表示させることができるのが手間なく済む方法ではあるのですが、どうしてもここだけは、という部分が出てきてしまうものです。

今回はヘッダー部分の表示切り替え方法のご紹介でしたが、これは他にもいろいろな箇所で活用できます。PCだけに読み込みたいjQuery、スマートフォンの画像はできるかぎり画像サイズの小さいものを、記事一覧の表示件数をPCとスマートフォンで変更したい…などなど。

今回の内容に関しては、以下の記事を参考にさせていただきました。他にも、iPhoneのみ、iPadのみ、Kindleのみといった端末毎や、ブラウザ毎の条件分岐の方法も書いてあり、いざという時に役立ちそうな内容です。ぜひご覧になってみてください。

WordPress条件分岐、スマートフォンとブラウザ別に表示を変える方法15種