WordPressの制作では、スマートフォンとPCで表示を切り替える条件分岐を利用する機会が多いです。PC表示ではピッタリな表示形式だけど、スマートフォン表示ではレイアウトを変更して表示させたい。そのようなケースが度々出てきます。
特にヘッダー部分の表示切り替えにはよく使用する事が多いので、その方法についてメモしておきます。
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のみといった端末毎や、ブラウザ毎の条件分岐の方法も書いてあり、いざという時に役立ちそうな内容です。ぜひご覧になってみてください。