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 -->
ウィジェットの配置を変更するには外観->ウィジェットページから行います。不要なウィジェットの削除や順番を変えたい場合はここから設定できます。
もちろんWelcart以外のウィジェットを配置することも可能。またテンプレートに直接コードを書いてバナーを貼付けたりすることもできます。このあたりはWordpressのカスタマイズと同じですね。
フッターテンプレート footer.php のカスタマイズ
最後にフッターです。フッターテンプレートで表示されているのはナビゲーションとコピーライト。ナビゲーションはヘッダーと同じものなので、メニューの項目を変更する場合はフッター用メニューを作成し、選択項目でフッターナビゲーションにチェックを入れておきます。
コピーライトはテンプレートに直接記述しても良いですが、管理画面からも設定できます。welcart shop->基本設定のショップ設定欄にコピーがあるのでそこに記述します。
このあとは・・・
ここまででWelcartのトップページのカスタマイズができたので、このあとは商品ページやカートページのカスタマイズについてまとめていきます。