Welcartのトップページをカスタマイズする方法

2014-09-16

Pocket

WelcartはWordpressに無料プラグインを追加するだけでネットショップの機能を追加できるもの。もちろん決済の設定や配送設定などもできるので、きちんとしたECサイトを構築することも可能。

またドキュメントの豊富なWordpressを使用しているためカスタマイズも比較的簡単です。Welcartの導入方法などについては一番簡単なWelcartのはじめ方・使い方をご覧ください。

このページではトップページのカスタマイズ方法についてまとめていきます。

Welcartのトップページをカスタマイズ

トップページテンプレート home.php の構造

トップページのテンプレートはhome.php内に記述されています。このテンプレート内には大まかに以下のようなコンテンツが表示されています。

ヘッダーテンプレートの読み込み
サイドバーテンプレートの読み込み
トップページの画像表示
おすすめ商品表示
フッターテンプレートの読み込み

テンプレート内のコードを簡単に記述するとこんな感じになります。

<?php
// ヘッダー読み込み
get_header();

// サイド読み込み
get_sidebar( 'home' );
?>

<div id="content" class="three-column">
  <!-- トップ画像 -->
  <div class="top_image">
    <img src="#" alt="<?php bloginfo('name'); ?>" />
  </div>

  <!-- おすすめ商品 -->
  <div class="title"><?php // タイトル ?></div>
  <div class="clearfix">

      <!-- おすすめ商品 -->

  </div>

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

<!-- フッター読み込み -->
<?php get_footer(); ?>

デフォルトでは以上のようになっていますが、WelcartではSmaryなどを使用していないため、Wordpressをカスタマイズする感覚で必要なコンテンツを追加可能です。

ヘッダーテンプレート header.php のカスタマイズ

トップページから読み込まれるヘッダーテンプレートでは、ページタイトルやナビゲーションメニューが表示されます。

大まかなコードの記述はこんな感じ。

<body <?php body_class(); ?>>
<div id="wrap">
<div id="header">
  <!-- タイトル -->
  <h1 id="site-title">
    <a href="#" title="#" rel="home"><?php bloginfo( 'name' ); ?></a>
  </h1>
  <!-- 説明文 -->
  <p class="discprition"><?php bloginfo('description'); ?></p>

  <?php if(function_exists('wp_nav_menu')): ?>

    <!-- メインメニュー -->

  <?php endif; ?>

  <?php if(usces_is_membersystem_state() || usces_is_cart()): ?>

    <!-- サブメニュー -->

  <?php endif; ?>

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

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

タイトルや説明文はWordpressタグそのままなのでわかりやすいでしょう。ナビゲーションは管理画面で設定していない状態では上記の画像のように表示されます。

メニューの設定方法は、外観->メニューでナビゲーションに表示したいリンクを設定すればOK。その際、テーマの位置でヘッダーナビゲーションを選んでおきます。

サブナビゲーションではmembersystem_stateが有効になっている場合に、ユーザ名やログインリンクなどが表示されます。

また、カートに商品が入っていればカートページへのリンクと購入リンクが表示されます。コードを簡単に記述すると以下のような感じです。

<ul class="subnavi clearfix">
  <!-- stateがtrueなら以下を表示 -->
  <?php if(usces_is_membersystem_state()): ?>

    <li>
      <?php 
        if(usces_is_login()){
          // ログイン済みならユーザ名を表示
        }else{
          // そう出なければguestを表示
        } 
      ?>
    </li>
    <li><?php usces_loginout(); ?></li>

    <!-- ログインしている場合は以下を表示 -->
    <?php if(usces_is_login()): ?>
      <li>
        <a href="#"><!-- ユーザ名を表示 --></a>
      </li>
    <?php endif; ?>

  <?php endif; ?>

  <!-- カートに入っていれば以下を表示 -->
  <?php if(usces_is_cart()): ?>
    <li>
      <a href="#"><!-- カート --></a>
    </li>
    <li>
      <a href="#"><!-- チェックアウト --></a>
    </li>
  <?php endif; ?>
</ul>

サイドバー sidebar-home.php のカスタマイズ

サイドバーで表示されるコンテンツは主にウィジェットになります。ウィジェットがない場合はテンプレートで設定されているデフォルトコードが出力されます。

<!-- 左サイドバー -->
<div id="leftbar" class="sidebar">
<ul>
<?php if ( ! dynamic_sidebar( 'homeleft-widget-area' ) ): ?>

  <!-- homeleftエリアにウィジェットがない場合に表示 -->

<?php endif; ?>
</ul>
</div>
<!-- end left sidebar -->

<!-- 右サイドバー -->
<div id="rightbar" class="sidebar">
<ul>
<?php if ( ! dynamic_sidebar( 'homeright-widget-area' ) ): ?>

  <!-- homerightエリアにウィジェットがない場合に表示 -->

<?php endif; ?>
</ul>

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

ウィジェットの配置を変更するには外観->ウィジェットページから行います。不要なウィジェットの削除や順番を変えたい場合はここから設定できます。