Trans

NPOやソーシャルビジネスの創業・経営・マネジメント

WordPressでECサイトっぽいテンプレートを作る。

WordPress

WordPressで企業などのECサイトのようなテーマを作るためには、どんなタグを使い、どのようにテンプレートを構成すればいいのかについて説明してみました。

ファイル構造

まず、ファイルの構造はこんな感じです。

index.phpは「ページ」、single.phpは「記事」、home.phpはトップページのものです。index.phpを会社概要や注文方法などについて用い、single.phpは個々の商品やイベント・展示会などのコンテンツに用います。あとのsidebar-3000.phpなどは「記事」が属するカテゴリごとにサイドバーのデザインを切り替えたいためだけに使っているので、特に必要はないかと思います。また、home.phpやfooter.phpはほとんどHTMLでマークアップしているので、説明を省きます。
また、CSSやJavaScriptを説明するのが今回の記事のテーマではないので、最後のほうでやんわりと解説するだけにしておきます。その上で、WPとあまり関係ないところは掲載せずにいきます。1つ1つのテンプレートにどういうふうなタグを使って、どういうふうに切り分けているのかを中心に説明します。それでは、個々のテンプレートの解説です。

header.php

<html>
<head>
<title><?php if (is_home()): ?>サイトの名称とコピー文<?php else: ?><?php wp_title(); ?><?php bloginfo('name'); ?><?php endif; ?></title>
<meta name="description" content="文章" />
<meta name="keywords" content="キーワード" />
</head>
<body>
<!-- page/ -->
<div class="page">


<!-- header/ -->
<div class="header">
  <div class="logo">
	<h1><a href="#"><img src="ロゴのURL" <?php if (is_home()): ?>alt="サイトの名称"<?php else: ?>alt="トップページ"<?php endif; ?> /></a></h1>
  </div>
<!-- /header --></div>


<!-- globalNavi/ -->
<ul class="globalNavi">
  <li>グローバルナビゲーション</li>
<!-- /globalNavi --></ul>
  • title要素はトップページとその他のページで読み分けています。bloginfoのnameにはサイトの名称だけを表示するようにWPの管理画面で設定しています。また、タイトルをサイト名の前に表示 « BirDesignで紹介されているプラグインでタイトルの並び順を変更します。
  • meta要素のdescriptionやkeywordsにはこのテンプレートではHTMLで直接書いていますが、title、metaをカスタマイズできるWordPressのプラグイン:wpSEO | コリスなどを使うほうがよいとは思います（サイト管理者にもよりますが）。
  • ロゴのalt属性もtitle要素と同じようにトップページとほかのページで切り分け、異なるテキストが入るようにしています。必要であれば、トップページではロゴのリンクをなくし、その他のページではリンクを貼るように書いてもよいかと思います。

index.php

<?php get_header(); ?>

<!-- content/ -->
<div class="content">

  <!-- mainContent/ -->
  <div class="mainContent">
    <p id="skipNavi">本文はここからです。</p>
    <div class="section">
	  <?php if (have_posts()) :while (have_posts()): the_post(); ?>
	  <h2><?php single_post_title(); ?></h2>
	  <?php the_content(); ?>
	　<?php endwhile; endif; ?>
	</div>
  <!-- /mainContent --></div>
 
<?php get_sidebar(); ?>
  
<!-- /content --></div>

<?php get_footer(); ?>
  • header.phpやsidebar.php、footer.phpを読み込んでいます。このテンプレートは主に会社概要や特定商取引法、注文方法などについて説明する「ページ」用のテンプレートです。
  • そのため、あまり複雑なことはせずに、WPの「ページ作成」をフルに使えるようにしています。

single.php

<?php get_header(); ?>

<!-- content/ -->
<div class="content">

  <!-- mainContent/ -->
  <div class="mainContent">
    <p id="skipNavi">本文はここからです。</p>
    <div class="section">
      <!-- startProducts/ -->

	  <?php if (in_category('2')): ?>	  
	  <?php if (have_posts()) :while (have_posts()): the_post(); ?>
	  <h2><?php single_post_title(); ?></h2>
	  <?php the_content(); ?>
	  <div class="productsPhoto">
	    <?php if (function_exists('gkl_postavatar')) gkl_postavatar(); ?>
	  </div>
	  <div class="productsDetail">
	    <ul>
		  <li><?php echo c2c_get_custom('set', 'セット内容／'); ?></li>
		  <li><?php echo c2c_get_custom('size', 'サイズ／'); ?></li>
		  <li><?php echo c2c_get_custom('material', '素材／'); ?></li>
		</ul>
		<p id="productsPrice"><strong><?php echo c2c_get_custom('price', '価格：'); ?></strong></p>
	  </div>
	　<?php endwhile; endif; ?>
	</div>
	ここに商品の配送方法や振り込みついての文章。

	<?php else: ?>

	<!-- startExhibit/ -->
	<?php if (have_posts()) :while (have_posts()): the_post(); ?>
	  <h2><?php single_post_title(); ?></h2>
	  <?php the_content(); ?><?php endwhile; endif; ?>
	</div>  
	<div class="section" id="contactArea">
	ここにお問い合わせについての文章。
	<!-- /endExhibit --></div>    
	<?php endif; ?>

  <!-- /mainContent --></div>

<?php if (in_category('6')) {
  include (TEMPLATEPATH .'/sidebar-3000.php');
} elseif (in_category('7')) {
  include (TEMPLATEPATH .'/sidebar-3500.php');
} elseif (in_category('8')) {
  include (TEMPLATEPATH .'/sidebar-4000.php');
} else {
  get_sidebar();
} ?>
  
<!-- /content --></div>

<?php get_footer(); ?>
  • 個々の商品についてのテンプレートです。商品は「記事」で扱います。ヘッダーなどを読み込むのは「ページ」のテンプレートと一緒です。
  • 「記事」のテンプレートは大きく2つの構造に分かれています。まず、本文のif (in_category('2')):で「記事」のカテゴリ2に属するものを出力し、else:から以降はカテゴリ2以外の「記事」。それをendif;で締めるというようなイメージ。
  • if (function_exists('gkl_postavatar')) gkl_postavatar();は、BorialisのBoroBoro日記 » Blog Archive » Post Avatar でオサレに着飾るで紹介されている、小さなアバターみたいな画像を使うためのタグです。これを価格や商品仕様の横に置いておき、CSSのfloatで写真は左、商品の仕様は右といったふうに流し込んでいます。
  • それからいくつか続くecho c2c_get_customというタグは、Get Custom Field Valuesというカスタムフィールドを拡張するためのプラグイン用のタグです。これをあらかじめ入れておくことにより、カスタムフィールドに任意を値を入れると、その値がこのタグ上に出てきます。そのため、その値に関係するHTMLにCSSを適用させておき、サイト管理者がHTMLを書けなくても、ちゃんとデザインされたものを表示することができます。ここで使っているのは、価格や素材などです。これは上のアバターにおいても同じ発想でやっています。もちろん、このようなある意味WPの柔軟性を削ってしまうような使い方は、サイト管理者や目的なども含めてあらかじめ話し合っておいたほうがよいと思います。
  • else:以降はカテゴリ2に属さない「記事」です。こちらは売るための商品というよりも、イベントや展示会などの案内を掲載するために書いています。
  • 最後に、サイドバー。「記事」が属するカテゴリごとに違うサイドバーが出てくるようにしています。

sidebar.php

  <!-- subContent/ -->
  <div class="subContent">
    <div class="section">
	  <h4><img src="#" alt="#" /></h4>
	  <dl id="localNavi">
	    <dt>ここに商品カテゴリなど</dt>
		  <dd>
		    <ul>
		    <?php $posts=get_posts('numberposts=10 & category=5'); ?>
		    <?php if ( $posts ) : foreach($posts as $post) : setup_postdata($post); ?>
			  <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
		    <?php endforeach; endif; ?>		
		    </ul>
		  </dd>
	  </dl>
	</div>
  <!-- /subContent --></div>
  • カテゴリごとに表示する内容は変えていますが、テンプレートタグはあまり変わらないので、代表的なものだけを説明します。
  • PHPの部分はカテゴリ5に属する記事10件をli要素で出力し、その「記事」のタイトルにパーマリンクをくっつけて、吐き出すようにしています。

で、結局何がしたいのよ？

もちろんECサイトにはASP型のソフトウェアを使ったり、osCommerceやEC-CUBEといった選択肢もあるとは思いますが、やはりWPのインターフェースは圧倒的に優れているし、テンプレートもいじりやすい。その点を考慮すると、WPによるECサイトもありなんじゃないかなと思っています。Movable Typeでは、九谷焼　和座本舗のようなサイトもあったりするわけですから。

おまけ（CSSとJavascriptのファイル）

内容はこんな感じです。

CSSはYahoo! UI LibraryのReset CSS、Base CSS、Fonts CSSをベースに、自分が今まで使っていたコードを付け加えています。また、layout.cssはざっくりとしたレイアウト用、module.cssは各ページの本文に用いる表現を記したもの。
JavaScriptはjqueryをベースに、interface.jsを読み込ませ、サイドバーでアコーディオン風のメニューを使うために、accordion.jsを外部ファイル化して、その動作を書いています。