ワードプレスの投稿記事にイージーマイショップのショッピングカートを付けちゃおう

普通にブログをやっている人で自分の投稿記事内で何かを売りたい時ってないですか?

単に何かを売りたいなら「メルカリ」なんかを使えばいいんですけど、自分のブログの記事内で商品についていろいろ書いて、そこに直接ショッピングカートボタンを設置する。

これをやってみたい人に簡単に出来る方法を教えちゃいますね。

イージーマイショップを使う

実際にクレジットカード決済にも対応出来るようにECサイト作成ソフト「イージーマイショップ」を使います。

なんか手間がかかりそう?

大丈夫「イージーマイショップ」の設定は15分あれば出来るんで心配ないです。

ショッピングカートボタンを設置するという事はその裏で商品の決済システムが動かないといけないので、その部分を全部「イージーマイショップ」におまかせします。

「イージーマイショップ」は高機能のECサイト作成ソフトなんで豪勢な機能を使うには有料です。

でも今回使う部分は無料プランで出来ちゃうので問題なし。

無料プランで申し込んでも2ヶ月はお試しで有料機能が使えるのでネットショップに興味のある人はいろいろ試してみると面白いですよ。

無料出店でかんたんネットショップ開業【イージーマイショップ】

イージーマイショップを開設して商品登録をする

イージーマイショップなら本当に15分でカート付きのネットショップが開業?無料で使ってみた
何年か前、ぼくがお客さんのサイトを作っていたときに大変だったのが商品を売るためのページ。 クレジットカード決済や銀行振込ができるようにして自動で案内メールがいくようにというシステムを自前で作っていた。 かなり大変で時間もコス...

↑こちらの記事を参考にイージーマイショップを開設して商品登録をします。

イージーマイショップの紹介記事へいったら目次の5 無料申し込みの流れ(実際に作ってみた)へ行ってください。

それより前はネットショップ開業の情報についてい書いてますが今回はショッピングカートを投稿記事に貼り付けるのが目的なのでとばしてください。

イージーマイショップの設定自体は最短15分程度で出来るんですが、売りたいものの写真を撮ったりして商品一覧ページに載せてとか、なんだかんだ30分くらいみといてもらった方がいいですね。

さあ、頑張ってイージーマイショップの設定と商品登録をやっちゃってください。

出来たら、またこのページに戻って来てください。

待ってますよ〜

 

出来ましたか?

そしたらその商品を自分のブログ記事から買ってもらえるようにショッピングカートの設置を始めます。

ショッピングカートの貼り付け

今回の自分のブログ記事にショッピングカートを設置する手順です。

  1. イージーマイショップの商品一覧へ行く
  2. カートボタン貼り付け用コードを入手する
  3. 自分のブログの記事に貼り付けてショッピングカートを設置する

ここまでは多分5分程度で出来るんじゃないかなと思います。

イージーマイショップの商品一覧へ行く

さて、それでは早速スタートしますよ。

イージーマイショップ管理画面からスタートです。

ページ上のメニューの「商品管理」から「商品一覧」へ移動します。

商品一覧ページで「カートボタン貼り付け用コード」を入手する

商品一覧ページへ来たら、商品リストの一番右側、「その他」ボタンから「カートボタン貼り付け用コード」を選択。

カードタグ

次のようなカードタグ画面が開きます。

貼り付け用コードは「カートボタン」と左上に書いてある灰色のエリア内全部をコピーします。

しっかりと全部コピーしてくださいね。1文字でも欠けると動作しませんよ。

自分のブログ記事にコードを貼り付ける

自分のブログ記事をテキスト表示に切り替えてください。

ワードプレスだったら「ビジュアル」「テキスト」というように切り替えが出来ますよね。

「アメブロ」だと「通常」「HTML」の切り替えで「HTML」にします。

「アメブロ」の記事に貼り付けたら「禁止タグが含まれています」って出てエラーになりました。

 

貼り付けた結果はこんな感じ



数量:


こんなに簡単に出来ちゃいます。

でも殺風景だな〜

そこはしょうがないです。デザイン何にもしてませんから。

CSS設定は各自で1から出来るようにハダカの状態になっています。

こっからCSS設定をして見栄えを整えていってください。

注意

後から気づいたんですが投稿記事をテキストモードにしてコードを貼り付けてそれをビジュアルモードにします。
そうしてもう一度テキストモードにして確認するとコード内のformタグの記述が消えてました。

テキストモードからビジュアルモードに切り替えるときにワードプレスが自動成型をするためです。

それを防ぐ一番簡単な方法は記事を全部書いて完成状態にしたあとにテキストモードに切り替えて保存します。

そして2度とビジュアルモードにしない事。

これで解決するのですが、面倒くさいですよね。
今解決策を模索中です。

↑「形式」のところが「HTML形式」になってますよね。

その右側の設定ボタンで「JavaScript形式」に変更出来るようになってるんです。
しかし無料プランでは「JavaScript形式」には変更出来ないみたいです。

JavaScriptコードだったら消えない気がするんですけど・・・・

わかったらまた別記事に書きますので、それまでは、その記事だけは「ビジュアルモードにしない」という鬼の戒律を守っていてください。


以上「ワードプレスの投稿記事にイージーマイショップのショッピングカートを付けちゃおう」という記事でした。
気に入ってもらえたらシェアしてくれると嬉しいです。