• 基本設置マニュアル
  • MT設置マニュアル
  • WP設置マニュアル
  • ちょっと便利な使い方

WordPressへの導入マニュアル

SKELETON CART（スケルトンカート）なら、WordPressとの連携もスムースに始められます！

SKELETON CARTではセキュリティ上の理由から、商品情報ページ（HTML等）とは別に、カートプログラムが商品情報を参照するファイル（item.dat）が必要になります。
WordPressはデータを全てDBから動的に取得する仕様となっているため、SKELETON CARTとWordPressを連携させる場合、通常はFTP等を利用して商品データファイル（静的ファイル）を別途アップロードする必要がありました。

WordPress連携プラグイン　SKELETON CART Connector for WP

SKELETON CART Connector for WP（無償）を使用すると、商品情報（item.dat）をWordPressダッシュボード上からクリック1回で自動的に静的ファイルとして書き出せるため、そのような繁雑な作業が不要になり、SKELETON CARTをWordPressのショッピングカートプラグインとして利用できます！

完成イメージ本マニュアルは以下の構成になっています。

  • 1. WordPress、SKELETON CARTのインストール
  • 2. SKELETON CART Connector for WPの初期設定とインストール
  • 3. 商品情報ページのテンプレート作成
  • 4. 商品情報の登録
  • 5. 動作確認とCSS等の調整

なお、実際にSKELETON CARTをWordPressと連携させている動作サンプルはこちらでご覧いただけます。
WordPress(ver2.9.2)連携動作デモ
WordPress(ver3.0)連携動作デモ

1. 必要なプログラムの入手とインストール

【1】WordPressのダウンロードとインストール

WordPress用プラグイン「SKELETON CART Connector for WP」はWordPress 2.8.6～3.0で動作を確認しています。ご利用には最新版をお薦めします。

最新版のダウンロードはこちら　http://ja.wordpress.org/（2010/6/22時点の最新版3.0）
インストール方法の解説はこちら　http://ja.wordpress.org/install/

本マニュアルでは、http://www.example.com/wordpress/がWordPressのサイトルートとなるようにインストールしています。
ご利用の環境にあわせて読み替えてください。
インストール後、WordPressが正常動作することを確認してください。

【2】SKELETON CARTのインストール

WordPressとは別にSKELETON CARTもインストールを行ってください。
プラグインの動作については、試用版でも動作確認出来ますのでご利用ください。

SKELETON CART試用版のダウンロード、製品版のご購入はこちら　http://skeleton.juxtaposition.jp/download/
インストール・設定の解説はこちら　http://skeleton.juxtaposition.jp/manual/

本マニュアルでは、http://www.example.com/wordpress/cart/がSKELETON CARTの設置ディレクトリとなるようインストールしています。
ご利用の環境にあわせて読み替えてください。
インストール後、商品サンプルページを使用して正常動作することを確認してください。

【3】WordPress用プラグインのダウンロード

「SKELETON CART Connector for WP」を以下よりダウンロードしてください。

ダウンロードはこちら　http://skeleton.juxtaposition.jp/download/
本プラグインはSKELETON CARTご利用者様全てが無償でご利用いただけます。

2. SKELETON CART Connector for WPの初期設定とインストール

【1】初期設定ファイル「config.php」の編集

プラグインファイルのダウンロード後、解凍して出来たフォルダの中にある「config.php」をテキストエディタで開き、初期設定を行ってください。

ファイル一覧

■SKELETON CARTの商品データファイルまでのパス
WordPressのルートディレクトリ（wp-config.phpが存在する位置）からSKELETON CARTの「item.dat」ファイルまでの相対パスを記載してください。
後述する操作でこの場所に商品情報ファイルを自動的に書出します。
init.phpに記載している格納先・ファイル名と同じディレクトリ及びファイル名にしてください。

$Cfg['WP_ItemDat_Path'] = './cart/data/item.dat';

■WordPressの商品記事のカテゴリID
商品情報ファイルを出力する際、以下のカテゴリIDの記事のみを抽出して書出します。
（以下例は「3」ですが、ご利用環境に合わせて変更してください。）

$Cfg['WP_ItemDat_Category'] = '3';

■WordPress商品記事の各項目設定】
WordPress記事入力画面で「商品データ」として使用するフィールドの設定を行います。

【設定形式】　$Cfg['WP_ItemDat_ItemXXX'] = 'post:xxx' or 'custom:xxx'  or 'xxx'

各設定形式のフィールドは以下になります。
1.「post:」　＝ID,post_title,guid,などWordPress記事のフィールド名を指定可能
2.「custom:」＝WordPress記事のカスタムフィールドを指定可能
3.「固定値」 ＝値を固定して出力

config.phpの初期設定では以下のようになっています。
ご利用形態に合わせて変更してください。

$Cfg['WP_ItemDat_ItemID']      = 'post:ID';         // 商品IDに「記事ID」を使用する
$Cfg['WP_ItemDat_ItemName']    = 'post:post_title'; // 商品名に「記事タイトル」を使用する
$Cfg['WP_ItemDat_ItemPrice']   = 'custom:price';    // 価格に「カスタムフィールドの"price"」を使用する
$Cfg['WP_ItemDat_ItemGroupId'] = '1';               // 商品グループIDは「固定値の"1"」を記載する

例えば、「商品IDにカスタムフィールドの"item_id"を使用する」場合は、以下のように設定します。

$Cfg['WP_ItemDat_ItemID'] = 'custom:item_id'; // 商品IDに「カスタムフィールドの"item_id"」を使用する

【2】SKELETON CART Connector for WPをアップロード

WordPressのプラグインフォルダ（/wp-content/plugins/）に「SkeletonCartConnector」のフォルダごとアップロードしてください。

【3】item.dat格納ディレクトリのパーミッション変更

config.phpで設定した商品データファイル（item.dat）を格納しているディレクトリのパーミッションを「777」に変更してください。

【4】インストールの確認

WordPressのダッシュボードへログインし、プラグインを有効化した後、左メニュー内「設定」の中に「Skeleton Cart Cnt」があることを確認してください。

以上で初期設定とインストールは完了です。

3. 商品情報ページのテンプレート作成

商品ページを出力するためのテンプレートを作成します。
今回は通常の記事と商品情報の記事を別のテンプレートで表示出来るよう作成します。
商品情報として使用するWordPressのカテゴリは「ID:3」、テーマはデフォルトの「/themes/default/」をカスタマイズして作成します。

完成後のファイル構成は以下のようになります。
single.php（通常の個別記事表示用テンプレート。この中身をカスタマイズします。）
single_default.php（今回のカスタマイズで使用する通常の記事用テンプレート）
single_item.php（今回のカスタマイズで使用する商品情報の記事用テンプレート）

【1】single_default.php、single_item.phpの新規作成

single.phpをテキストエディタなどで開き、「single_default.php」と「single_item.php」を複製してください。
（この時点では3つのファイルの中身が同じになります）

【2】single.phpの書き換え

single.phpをテキストエディタなどで開き、以下のとおりに内容を書き換えてください。

<?php
  $post = $wp_query->post;
    if ( in_category('3') ) {
      include(TEMPLATEPATH . '/single_item.php');
    } else {
      include(TEMPLATEPATH . '/single_default.php');
    }
?>

上記は、その記事が「カテゴリID:3」の記事だったらsingle_item.phpを、そうでなければsingle_default.phpを使用してページを表示するという内容になります。

【3】single_item.phpの編集

single_item.phpをテキストエディタなどで開き、商品購入ボタン（カートへ入れる等）を追加してください。
以下はそのサンプルです。
（SKELETON CARTの初期設定「init.php」でオプション項目「カラー」「サイズ」の2つを設定している場合の例です）

<form method="post" name="newdat" enctype="multipart/form-data" action="http://www.example.com/wordpress/cart/cart.php?qp0=idx&qp1=ad">
<p>商品名：<?php the_title(); ?></p>
<p>価　格：<?php echo post_custom('price'); ?> 円（税込）</p>
<p>カラー：<select name="cart_item_opt1" style="width:50px;">
<option value="青" selected="selected">青</option>
<option value="赤">赤</option>
<option value="黄">黄</option>
</select>
　サイズ：<select name="cart_item_opt2" style="width:50px;">
<option value="S" selected="selected">S</option>
<option value="M">M</option>
<option value="L">L</option>
</select>
　数　量：<select name="cart_item_amount" style="width:50px;">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></p>

<!--商品情報データ-->
<input type="hidden" name="cart_item_item_id" value="<?php the_ID(); ?>" />
<!--カートへ入れる-->
<p><input type="submit" value="カートへ入れる" /></p>
</form>

【4】プラグインファイルのアップロード

上記3つのテンプレートをテーマフォルダ「/themes/default/」にアップロードしてください。
以上でテンプレートの作成は完了です。

4. 商品情報の登録

【1】新規ブログ記事作成画面で商品情報を入力

WordPressのダッシュボードへログインし、新規投稿で商品情報を登録してください。
上記プラグインの初期設定で行った「カテゴリ」、その他商品情報フィールドを入力してください。

【2】商品データ「item.dat」のパブリッシュ

記事保存後、ダッシュボードの左メニュー「設定」にある「Skeleton Cart Cnt」を開いてください。
「更新」をクリックすると、初期設定ファイルで指定した位置に「item.dat」が静的ファイルとして書出されます。

WordPressでの商品情報登録（商品ページ作成）後は、必ずこのパブリッシュ（書出し）作業を行って、item.datを最新の状態に保ってください。
以上で商品登録は完了です。

5. CSSを調整して作業完了

ここまでの作業が完了したら、実際に商品情報ページへアクセスし、テンプレートの分岐・カートへの接続が正しく行えていることを確認してください。

商品サンプル

最後にWordPressテンプレートのCSS、SKELETON CARTのCSS等をお好みで調整し設置完了となります。

これで商品登録からカート接続までを一連の作業内で行える環境が整います。
SKELETON CARTと本プラグインを利用して、WordPressの操作に不慣れな方やHTMLタグにあまり詳しくない方でも、簡単にECサイトを運営することが可能となります。
ぜひお試し下さい。

上記の設定を行った動作サンプルは以下でご覧いただけます。
WP ver2.9.2 動作デモ　http://skeleton.juxtaposition.jp/demo/wordpress/
WP ver3.0 動作デモ　http://skeleton.juxtaposition.jp/demo/wordpress3/