【wordpress ヘッダー】PC表示と、スマフォ表示の切り替えをするコード stinger5

今回はワードプレスのヘッダーの表示を、パソコン版とスマフォ版で切り替えをする方法を紹介します。

テーマはstinger5を使用していますが、その他のテーマでも基本は同じですので、使えそうだったら使ってみてください。

header.phpをいじります

ほとんどのテーマで、ヘッダーは(header.php)で管理されています。
今回はここをちょっといじります。

<?php if (wp_is_mobile()) :?>
スマフォ表示
<?php else : ?>
パソコン表示
<?php endif; ?>

基本はどのテーマでも上のコードで切り替えを行えば大丈夫です。

上のコードのスマフォ部分と書いてあるところに、スマフォ用の画像やコードを。
パソコン表示とかいてあるところにパソコン用のコードを。

下に実際に上のコードをあてはめて作った、header.phpの全コードを紹介します。
基本はstinge5のヘッダーそのままで、98行目から139行目を上のコードを当てはめていじっています。

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie6" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]> <html class="i7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]> <html class="ie" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<?php if(is_category()): ?>
<?php elseif(is_archive()): ?>
<meta name="robots" content="noindex,follow">
<?php elseif(is_search()): ?>
<meta name="robots" content="noindex,follow">
<?php elseif(is_tag()): ?>
<meta name="robots" content="noindex,follow">
<?php elseif(is_paged()): ?>
<meta name="robots" content="noindex,follow">
<?php endif; ?>
<title>
<?php
global $page, $paged;
if(is_front_page()):
elseif(is_single()):
wp_title('|',true,'right');
elseif(is_page()):
wp_title('|',true,'right');
elseif(is_archive()):
wp_title('|',true,'right');
elseif(is_search()):
wp_title('|',true,'right');
elseif(is_404()):
echo'404 |';
endif;
bloginfo('name');
if($paged >= 2 || $page >= 2):
echo'-'.sprintf('%sページ',
max($paged,$page));
endif;
?>
</title>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/normalize.css">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/html5shiv.js"></script>
<![endif]-->
<?php wp_head(); ?>
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<?php } else { ?>
<?php } ?>
</head>
<body <?php body_class(); ?>>
<!-- アコーディオン -->
<nav id="s-navi" class="pcnone">
  <dl class="acordion">
    <dt class="trigger">
      <p><span class="op"><i class="fa fa-bars"></i>&nbsp; MENU</span></p>
    </dt>
    <dd class="acordion_tree">
      <ul>
        <?php wp_nav_menu(array('theme_location' => 'navbar'));?>
      </ul>
      <div class="clear"></div>
    </dd>
  </dl>
</nav>
<!-- /アコーディオン -->
<div id="wrapper">
<header> 




<?php if (is_home()) { ?>
  <h1 class="descr">
    <?php bloginfo('description'); ?>
  </h1>
  <?php } else { ?>
  <p class="descr">
    <?php bloginfo('description'); ?>
  </p>
  <?php } ?>








  <!-- ロゴ又はブログ名 -->
<?php if (wp_is_mobile()) :?>
<!-- スマフォ表示 -->
<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0"> 
 <TR ALIGN="center">
 <td style="border-style: none;">

  <a href="<?php echo home_url(); ?>/">
    <?php if (get_option('stinger_logo_image')): //ロゴ画像がある時 ?> 
    <img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url(get_option('stinger_logo_image')); ?>" />
    <?php else: //ロゴ画像が無い時 ?>
    <?php bloginfo( 'name' ); ?>
    <?php endif; ?>
    </a>
</TD> 
 <td style="border-style: none;">
<img src="http://takarajima-re.com/wp-content/uploads/2014/12/101.png"/>
</TD> 
  </TR> 
 </TABLE>
  <!-- PC表示 -->
<?php else : ?>
<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0"> 
 <TR ALIGN="center">
 <td style="border-style: none;">
  <a href="<?php echo home_url(); ?>/">
    <?php if (get_option('stinger_logo_image')): //ロゴ画像がある時 ?>
    <img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url(get_option('stinger_logo_image')); ?>" />
    <?php else: //ロゴ画像が無い時 ?>
    <?php bloginfo( 'name' ); ?>
    <?php endif; ?>
    </a>
</TD> 
 <td style="border-style: none;">
<img src="http://takarajima-re.com/wp-content/uploads/2014/12/101.png"/>
</TD> 
 <td style="border-style: none;">

<a href="http://takarajima-re.com/otoiawae"><img src="http://takarajima-re.com/wp-content/uploads/2014/12/souda.png"/></a>
</TD> 
 </TR> 
 </TABLE> 
<?php endif; ?>








  <!-- キャプション -->
    
  <!--
カスタムヘッダー画像
-->
  <div id="gazou">
    <?php if(get_header_image()): ?>
    <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    <?php endif; ?>
  </div>
  <!-- /gazou --> 
  <!--
メニュー
-->
  <nav class="smanone clearfix">
    <?php
$defaults = array(
	'theme_location'  => 'navbar',
);
wp_nav_menu( $defaults );
?>
  </nav>
</header>

表示はどのようになっているのか

【wordpress ヘッダー】PC表示と、スマフォ表示の切り替えをするコード stinger5
これはパソコンで見たときのヘッダーです。

【wordpress ヘッダー】PC表示と、スマフォ表示の切り替えをするコード stinger5
これはスマフォで見たときのヘッダーです。
違いはお問い合わせのフォームをなくしてみました。

いままではパソコンと表示が同じだったので、スマフォの画面だと全体の幅がせまくすべてが小さく表示され、お店の電話番号が見えずらくなっていました。
それでの変更です。

最後に

最初に記載したコードは、ヘッダー以外でもスマフォと表示を切り替えたい時に使用できますので、いろいろ使えると思います。
是非使ってみてください。

作ったコードはリサイクルショップ宝島のホームページとして実際に使っています。
リサイクルショップ宝島 ホームページ

それとリサイクルショップ宝島のホームページは「stinger5」をbaseにカスタマイズして会社で使えるようなホームページにしています。
下にstinger5をカスタマイズして作った、最初からの過程を紹介していますので、よかったらどうぞ!!
ワードプレスのテーマ「stinger5」をカスタマイズして、企業のホームページとして2015年1月から運用します

The following two tabs change content below.
AKIRA

AKIRA

上尾市在住の、リサイクルショップで働くサラリーマン。 Twitter・Facebookやってます。 小心者なので、誰か声かけてくれると嬉しいです。
スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーリンク