ブログの投稿記事をカラーミーに埋め込む（最新版）

情報発信やSEOの観点から、取り扱い商品に関連した記事を書いたりすることがよくあります。
これまでは、ロリポップ！などのレンタルサーバーを借りて、WordPressをインストールするショップが多かったかと思います。

2023年10月から、カラーミーショップのアプリ「カラーミーWPオプション」が無料（＝レギュラープラン以上の場合は追加費用なし）で使えるようになりました。

このアプリを使うと、簡単にブログサイトを開設できます。
ショップサイトに埋め込んで、記事への導線を確保すればより効果的です。

今回は、カラーミーWPオプションを使って、投稿した記事情報を埋め込む方法について紹介します。
カラーミーWPオプションにかぎらず、RSS配信できる一般的なブログは同じ方法で埋め込めます。

コピペすれば簡単に動作するわけではありません。
勉強したい人向けの内容になっています。

カラーミーWPオプションについて

カラーミーWPオプション（アプリ）を導入すると、サーバーやドメインを別途契約する必要なく、ネットショップと同ドメインにWordPressを開設できます（SEOに向いています）。

このアプリを使うとWordPress（＝世界的に一番よく使われているブログ機能）がサーバーにインストールされ、記事ページを作ったりできるようになります。

WordPressは多機能なため、凝ったページを作る場合は難易度が高くなりますが、記事を書くなどの基本的な部分だけでよければ、慣れれば簡単に使えます。

パソコンが苦手な方にとっては、インストール～初期設定がわかりにくいですが、カラーミーショップ公式YouTubeチャンネルの動画を参考にして進めていくと、なんとかなりそうです。

下記の動画は要点がよくまとまっていますので、参考にしてみて下さい。

コーディング前に知っておく知識

処理の流れ

一般的なブログにはRSS（Rich Site Summary）という機能がついていて、投稿した記事情報をXML形式と呼ばれるテキストデータで出力しています（これをRSSフィードと呼びます）。

このサイトでは https://naeco.jp/feed というURLで、RSSフィードにアクセスできます。
カラーミーWPオプションのブログサイトだと、https://your-domain.jp/apps/note/feed というURLになります（カラーミー以外の場合、ブログサービスによって異なることがあります）。

アクセスするとファイルがダウンロードされます。
テキストエディタで開くことができます（下記画像はRSSの一部を抜粋）。

このテキストデータがブログの記事情報（見出し、日付、記事概要、サムネイル画像など）で、記事投稿すると随時更新されて最新の情報が登録されます。
このRSSフィードから必要な情報を取得して、カラーミーショップに埋め込む、という流れになります。

WordPressのRSSフィードについて

お使いの無料ブログサービスによっては、サムネイル画像が含まれていなかったり、表示件数が少なかったりして、使いづらいことがあります。設定をいじれないことが多いので、そういう場合はあきらめることになります。

WordPressの場合は、サムネイル画像の情報がなかったり、画像を取り出しにくかったりしますので、WordPressのRSSフィードの出力部分に手を加えます（詳しく知りたい場合はネット検索して下さい）。

やることはコードを追加するだけで、わりと簡単です。どちらかわかりやすいほうを選びます

「Code Snippets」プラグインを入れて、そこにコードを入れる
functions.php内の任意の場所にコードを入れる（コピペ場所は一番下がわかりやすい）。

functions.php ファイルはディレクトリ「/wp/wp-content/themes/使用テーマ」のあたりです。
子テーマを作ってから、そちらに入れるのが一般的です。

RSSのdescriptionにサムネイル画像をセット

function rss_post_thumbnail($content) {
  global $post;
  if(has_post_thumbnail($post->ID)) {
    $content = '<p>' . get_the_post_thumbnail($post->ID) . '</p>' . $content;
  }
  return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');

WordPressのダッシュボード内にもRSSに関する設定箇所があります（設定＞表示設定）。
デフォルトで10件表示するようになっています。表示件数を増やしたい場合などはここをいじります。

サンプルコード

カラーミーショップ側

埋め込みたい場所に設置します。トップページ、サイドバー、フリーページに入れるのがよさそうです。
jQueryの読み込みが必要です（カラーミーショップの場合は、読み込み済みです）。

<div class="blog-wrapper">
  <ul id="blog"></ul>
</div>
  
<style>
.blog-wrapper {
  margin: 100px 0;
}
.blog-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 15px;
  row-gap: 40px;
  list-style: none;
}
.blog-wrapper li {
  width: calc(33.3333% - 10px);
  box-sizing: border-box;
}
.blog-date {
  font-size: 12px;
  padding-top: 5px;
}
</style>
  
<script>
$(function() {
  $.ajax({
    type: 'GET',
    url: 'https://your-domain.jp/apps/note/get-rss-feed.php?max_num=9&callback=?',
    dataType: 'jsonp',
    success : function(json) {
      // success
      $.each(json,function(i,item){            
        $("#blog").append('<li class="blog-card"><a href="' + item.link + '"><img loading="lazy" src="' + item.thumb + '" alt="' + item.title + '" class="blog-img"><div class="blog-date">' + item.date + '</div><div class="blog-title">' + item.title + '</div></a></li>');
      });
    }
  });
});
</script>

30行目…https://your-domain.jp/apps/note/get-rss-feed.php?max_num=9&callback=?
URLはPHPファイルの置き場所を指定します。max_num=9は、最新記事を9件取ってくる指定になります。

35行目…ここにHTMLタグを入れて、レイアウトを作り込みます。
例ではシンプルに並べるCSSを入れています。作り込めばスライドショーにもできます。

サーバー側

PHPを使ってコードを書きました。
PHPファイルは「https://your-domain.jp/apps/note/」の直下に入れておくと、リンク先がわかりやすいです。
リンク先はカラーミーショップ側のコードで指定しています。

記事データを切り出す部分（下例コードの16-28行目）は、サイトごとに異なることが多いので、自前で用意する必要があります。RSSフィードを開いて、どうやって切り出すか検討して下さい。

アドレスバーに、URLとパラメータ（https://your-domain.jp.jp/apps/note/get-rss-feed.php?max_num=9&callback=?）を入れてやると、結果が返ってきます。結果が返ってこないときは、記事情報を切り出すところが間違えている可能性があります。

get-rss-feed.php

<?php
//エラーを表示してくれるコード 以下2行
//ini_set("display_errors", 1);
//error_reporting(E_ALL);

define ('MAX_NUM', $_GET['max_num']); //表示件数

//以下にRSSフィードを配信しているURLを指定
$rss = simplexml_load_file('https://your-domain.jp/apps/note/feed', 'SimpleXMLElement', LIBXML_NOCDATA);

$i = 0;//カウンタ

//date description thumbは、各自のRSSフィードの状態に応じて書き換える必要がある
foreach($rss->channel->item as $item) {
  if ($i >= MAX_NUM) {break;}
  $date = date("Y-m-d H:i", strtotime($item->pubDate.'+9hour')); //日時 9時間ずれることがある
  $description = $item->description ; //記事概要、適当に加工する必要がある
  $thumb = ""; //画像がない場合のURLを指定するとよい
  if( preg_match_all('/<img([\w\W]+?)>/is', $item->description, $matches) ){
    foreach( $matches[0] as $img ){
      if ($img === reset($matches[0])) {//最初の画像にマッチしたもの
        if( preg_match('/src=[\'"](.+?(gif|jpe?g|png|webp))[\'"]/i', $img, $m) ){
          $thumb = $m[1]; //サムネイル画像
          $thumb = preg_replace('/-[0-9]{3}x[0-9]{3}\.(gif|jpe?g|png|webp)$/i', '.$1', $thumb);
        }
      }
    }
  }
  //文字型でキャストするのはsimplexml_load_fileで取り出した際にobjになっているため
  $output[] = array('title' => (string)$item->title,
                    'link'  => (string)$item->link,
                    'date'  => $date,
                    'desc'  => $description,
                    'thumb' => $thumb);
  $i++;
}

//出力用配列にセット
header( 'Content-Type: text/javascript; charset=EUC-JP' );
echo $_GET['callback'] . '(' . json_encode($output). ')';

3-4行目…たとえば、デベロッパーツールのコンソールで Internal Server Error 500 が出ている場合は、PHPファイルのエラーの可能性もありますので、エラー表示させてみるとよいです。

9行目…「https://your-domain.jp/apps/note/feed」RSSフィードを配信しているURLを指定します。

16行目…カラーミーWPオプションの時間が9時間ずれているので、strtotime($item->pubDate.'+9hour')
通常は、strtotime($item->pubDate)

17行目…記事概要に不要なテキスト（もっと見るなど）が含まれていることが多いので通常は取り除く処理が必要です。また、文字数上限を決めて末尾に...をつけてテキストを切り落としたりすることもあります。

18行目…No Image画像を作ってURLを指定しておくと、サムネイル画像がない場合に表示できます。

19-29行目…この部分は、サイトごとに結構違います。RSSフィード（テキストファイル）の中を見て、それに合わせて作り込む必要があります。

おわりに

ディスク容量が10GBなので、ちょっと少ないかなという気もしますが、これで十分足りるショップも多いはずです。

また、すでにブログサイトがある場合も、カラーミーショップに最新記事を埋め込むことが可能です。
作業は上述したとおりで、同じ流れです。勉強しながら作業を進めるとよいと思います。

動作しない場合は、Chromeのデベロッパーツールや、PHPのエラーを吐き出すコードを入れて、メッセージを読んで対応します。

お仕事のご依頼は下の記事を参考にどうぞ。
ブログの最新記事をカラーミーに埋め込む【プロダクトページ】

ブログの最新記事をカラーミーに埋め込む

執筆者

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

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

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