Welcartのテンプレートをレスポンシブ化する方法

2014-09-23

Welcartは無料で簡単にネットショップの機能を追加できるWordpressのプラグイン。デフォルトテンプレートも用意されており、すぐにネットショップを公開することも可能。

ただ、最近のスマートフォンの普及を考えると、スマホ画面に最適化されたデザインも欲しいところ。スマートフォン向けにゼロからテンプレートを作ってもいいのですが、PCテンプレートをレスポンシブ化してしまえば簡単にスマホ向けサイズに最適化することができます。

ここではBootstrapを使ってWelcartを簡単にレスポンシブ化する方法を紹介します。

Welcartをレスポンシブ化してみる

WelcartにBootstrapを導入

レスポンシブレイアウトにするためには、独自にCSSを記述しても良いのですが、BootstrapのようなCSSフレームワークを使うのが一番簡単。Bootstrapなら以下のようなクラス名を付け加えるだけで簡単にレスポンシブサイトを作ることができます。

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

導入方法は、WelcartにBootstrapを導入する方法で紹介しています。

Bootstrapを使ったレスポンシブ化の方法

通常のWebサイトをレスポンシブ化するには、上記のようにHTMLタグにクラスを付け加えればOK。どのようなクラスがあるかはBootstrapの公式サイトをチェックして下さい。

基本的なレスポンシブ化のコードは以下のようなものになります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <title>レスポンシブ化</title>
</head>
<body>

<div id="header">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm6">

          <!-- コンテンツ -->

        </div>
        <div class="col-xs-12 col-sm6">

          <!-- コンテンツ -->

        </div>
      </div>
    </div>
  </div>

<!-- /header -->

<div id="contents">
    <div class="container">
      <div class="row">
        <div id="main" class="col-xs-12 col-sm8">

          <!-- メインコンテンツ -->

        </div>
        <div id="side" class="col-xs-12 col-sm4">

          <!-- サイドコンテンツ -->

        </div>
      </div>
    </div>
  </div>

<!-- /content -->

<div id="footer">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm4">

          <!-- コンテンツ -->

        </div>
        <div class="col-xs-12 col-sm4">

          <!-- コンテンツ -->

        </div>
        <div class="col-xs-12 col-sm4">

          <!-- コンテンツ -->

        </div>
      </div>
    </div>
  </div>

<!-- /footer -->
</body>
</html>

上記の例ではヘッダーをsm（タブレット）サイズから２カラムで表示し、xs（スマホ）サイズでは１カラムで表示しています。

同様にして、各デバイスサイズ（-xs,-smなどで表示）でどのようなカラム分けをするかをクラス名で指定することで、簡単にレスポンシブ化可能です。

Welcartをレスポンシブ化する

Bootstrapを使ってWelcartをレスポンシブ化してみます。デザインやCSSスタイルの修正までやると長くなるため、ここでは省略します。またレスポンシブ化はメインエリアのみとします。

header.php

#wrapのスタイルにwidth100%を追加
#mainの上に.containerタグを追加
#mainのクラス名をrowに変更

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body <?php body_class(); ?>>

<div id="wrap" style="width:100%;">
<div id="header">

    <!-- ヘッダー -->

</div><!-- end of header -->

<div class="container">
<div id="main" class="row">
<!-- end header -->

home.php

.contentの部分をBootstrapのカラムに変更

<?php
get_header();

get_sidebar( 'home' );
?>
<div class="col-xs-12 col-sm-8 col-md-6">

    <!-- コンテンツ -->

</div><!-- end of content -->

<?php //get_sidebar( 'home' ); ?>

<?php get_footer(); ?>

sidebar-home.php

左右サイドバーにBootstrapのカラムを指定

<!-- begin left sidebar -->
<div class="hidden-sm col-md-3">

<!-- 左サイドバー -->

</div>
<!-- end left sidebar -->

<!-- begin right sidebar -->
<div class="col-xs-12 col-sm-4 col-md-3 pull-right">

<!-- 右サイドバー -->

</div>
<!-- end right sidebar -->

footer.php

.containerの閉じタグを追加

<!-- begin footer -->

</div><!-- end of main -->
</div><!-- end of container -->

<div id="footer">
<!-- フッター -->
</div><!-- end of footer -->

</div>

<!-- end of wrap -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/bootstrap.min.js"></script>
<?php wp_footer(); ?>
</body>
</html>

上記のような修正を加えると、Welcartのデフォルトテンプレートでもレスポンシブレイアウトを実装することが可能です。