カラーミーのWordPressプラグインで商品情報を埋め込むサンプル

カラーミーWPプラグイン

カラーミーショップ公式「WordPressプラグイン」にはショートコードがしっかり用意されています。
WordPressの固定ページや個別ページ(投稿記事のページ)に商品情報表示用ショートコードを書きこむと、カラーミーショップの商品情報を表示することができます。

一例ですが、ページ内に[colormeshop_product product_id="136251061" data="name"] [colormeshop_product product_id="136251061" data="regular_price"] [colormeshop_product product_id="136251061" data="stocks"]と書くと、

テスト商品その3(販売していません) 300 1

と表示されます。マニュアルには載っていませんが、colormeshop_productのパラメータ data="stocks" で在庫数が表示できます
商品情報表示用ショートコードの詳細については、プラグインをインストール後に表示されるマニュアルを参照ください。複数のショートコードとHTML・CSSを組み合わしてレイアウトも可能です。

これだけでもまぁまぁ便利ですが、毎回コピペしているうちに、商品情報を埋め込むのに10~20行コピペするのも手間だなぁと気づきます。

このプラグインのよいところは「PHPで自分用テンプレート(雛形)をあらかじめ用意しておくと、ショートコードで呼び出して使える」というところです。
今回はこの便利機能を使うテンプレートのサンプルコードを紹介します。

プラグイン機能の概要については、先の記事を参照ください。
参考)カラーミーショップのWordPressプラグインの機能と使い方を解説します

デフォルトのテンプレート

マニュアルの例に従って商品情報を表示させてみましょう。使うショートコードはこんな感じ。
[colormeshop_page product_id="136251061" template="default"]

テスト商品その3(販売していません)

テスト商品その3の商品説明文です。

価格: 300 円





ここまでがショートコードで表示した部分です。
見出し行<h2>もそうですが、CSSでスタイルを入れないと全体的に崩れ気味です。

テンプレートファイル(default)は以下のディレクトリにあります。
/wp/wp-content/plugins/colormeshop/templates/product/default.php

default.php

<div id="primary" class="content-area">
  <main id="main" class="site-main" role="main">
    <h2><?php echo $product['name'] ?> </h2>
    <?php echo $product['expl'] ?><br/>
    <br/>
    価格: <?php echo $product['sales_price'] ?> 円 <br/>
    <br/>
    <img src="<?php echo $product['image_url'] ?>">
    <br/>
    <?php echo do_shortcode( '[colormeshop_cart_button product_id=' . $product['id'] . ']' ); ?>
    <br/>
    <hr>
  </main>
</div>

これをベースに自分用テンプレートを作成しておけば、次からはショートコードを一行書くだけで使えます。

「今回作成するテンプレート(PHPファイル)」と「固定ページや個別ページ(投稿記事のページ)」では書き方が違いますので、その点難しく感じますが、レイアウトは基本的にはHTML・CSSですので、なんとなくいじれるかと思います(PHPコードの部分はほぼいじりません)。
相違1)商品情報が連想配列に入っている $product['キー']
相違2)カートの呼び出し方 <?php do_shortcode('[ショートコード名]') ?>

テンプレートの作例

テンプレートファイルの名前は任意です。今回はcustom.phpとします。ショートコードで呼び出す際のテンプレート名になります。

作成したファイルの置き場所はdefault.phpと同様に
/wp/wp-content/plugins/colormeshop/templates/product/

custom.php

<style>
.cswpp {
  border: 1px solid #eee;
  font-size: 14px;
  margin: 0 auto;
  padding: 2em;
  width: 100%;
}
.cswpp .image {
  background-position: center center;
  background-size: cover;
  border: 1px solid #eee;
  border-radius: 4px;
  float: right;
  height: 108px;
  margin: 0 0 0 20px;
  overflow: hidden;
  position: relative;
  width: 108px;    
}
.cswpp .title {
  font-size: 1.2em;
  font-weight: bold;
}
.cswpp .title a{
  color: #333;
}
.cswpp .expl {
  font-size: 0.8em;
}
/* カートボタン周りを整えるCSS */
.cart_code div {
  width: 100%!important;
}
.cswpp table {
  border: none!important;    
  margin: 0!important;
} 
.cswpp th, .cswpp td {
  border: none!important;
  padding: 0!important;
  padding-right: 0!important;
} 
.cswpp .cartjs_cart_in {
  margin-bottom: 0!important;     
  margin-top: 1em!important;     
  text-align: left!important;    
}
</style>

<div class="cswpp">
  <div class="image">
    <img src="<?php echo $product['image_url'] ?>">
  </div>
  <div>
    <p class="title">
      <a href="https://naeco.jp/cswpp?colorme_item=<?php echo $product['id'] ?>"><?php echo $product['name'] ?></a>
    </p>
    <p class="expl">
      <?php echo $product['expl'] ?>
    </p>
    <p class="sales_price">¥<?php echo $product['sales_price'] ?>-</p>
    <div class="cart_code"> 
      <?php echo do_shortcode( '[colormeshop_cart_button product_id=' . $product['id'] . ']' ); ?> 
    </div>
  </div>    
</div>

 

ショートコードは以下のとおり。パラメータ product_id、templateの指定は適宜変更してください。
[colormeshop_page product_id="136251061" template="custom"]

テスト商品その3(販売していません)

テスト商品その3の商品説明文です。

¥300-

おわりに

設置先のCSSが反映しますので、コピペしただけではきれいにレイアウトできていないかもしれません(各自でちょっと手直しが必要かも)。

読み物記事にはもっとさりげないテンプレートを作って設置するとよさそう(カートボタンばっかりだとちょっとイヤですよね)。

執筆者

えーじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身で、第一種情報処理技術者
カラーミー歴10年目/カラーミーショップ公認パートナー。
好きが高じてブログを書いていますが、カラーミーの中の人ではありません。