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

Pocket

welcartのカスタマイズ方法

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 のカスタマイズ

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

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

<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。その際、テーマの位置でヘッダーナビゲーションを選んでおきます。
welcartのヘッダーナビゲーションの設定方法

サブナビゲーションでは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 -->

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

もちろんWelcart以外のウィジェットを配置することも可能。またテンプレートに直接コードを書いてバナーを貼付けたりすることもできます。このあたりはWordpressのカスタマイズと同じですね。

フッターテンプレート footer.php のカスタマイズ

最後にフッターです。フッターテンプレートで表示されているのはナビゲーションとコピーライト。ナビゲーションはヘッダーと同じものなので、メニューの項目を変更する場合はフッター用メニューを作成し、選択項目でフッターナビゲーションにチェックを入れておきます。
welcartのフッターメニュー設定方法

コピーライトはテンプレートに直接記述しても良いですが、管理画面からも設定できます。welcart shop->基本設定のショップ設定欄にコピーがあるのでそこに記述します。
welcartのコピーライト設定方法

このあとは・・・

ここまででWelcartのトップページのカスタマイズができたので、このあとは商品ページやカートページのカスタマイズについてまとめていきます。