カラーミー 2023年02月08日 naeco.jp WordPress カラーミーショップ

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

2018年に公開されたカラーミーショップ公式「WordPressプラグイン」。
商品一覧ページの自動生成だけでなく、個別投稿ページからも商品情報を呼び出せるように、ショートコードが用意されています。

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

Sofa Chair　2,000　51

と表示されます（ちなみに、マニュアルには載っていませんが、colormeshop_productのパラメータ data="stocks" で在庫数が表示できます）。

商品情報表示用ショートコードの詳細については、プラグインをインストール後に表示されるマニュアルを参照ください。複数のショートコードとHTML・CSSを組み合わしてレイアウトも可能です。

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

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

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

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

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

↓表示結果

Sofa Chair

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

価格: 2000 円

ここまでがショートコードで表示した部分です。
見出し行<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: 20px 0 20px 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="171261602" template="custom"]

↓表示結果

Sofa Chair

￥2000－

おわりに

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

執筆者

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

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら