WordPress の勉強がてらショッピングサイト的なものを作ってみた

cocona(ココナ)オープンしました

このブログは Movable Type というブログツールで作っているのですが、ブログツールのもう一方の雄といえば WordPress です。

そんなこともあって、次にサイトを作るときは WordPress で構築してみたいなぁと常々思っていたんですよ。

ブログをもうひとつ立ち上げることも考えたのですが、そうそう書くネタもないですし、どうせなら CMS 的な使い方がどの程度できるのか試してみたかったので、今回はショッピングサイト作りにチャレンジしてみました。

まあ、ショッピングサイトといっても自分で商品を仕入れて在庫を管理するなんてとてもできないので、ドロップシッピングを利用したんですけどね ^ ^

と言うわけで、できあがったサイトがこちらです。

おしゃれ雑貨セレクトショップ cocona[ココナ]
http://www.cocona-shop.com/

ホントはドロップシッピングで儲けたければ、ジャンルを絞った方が良いみたいな話は良く聞くのですが、今回は儲けより実験的な意味合いが強いので、作っていて楽しそうな雑貨屋を開いてみました。

今回初めて WordPress をさわってみましたけど、同じブログツールでも Movable Type とはだいぶ印象が違いましたね。

元々 WordPress は、本体の機能は極力シンプルにして、プラグインを使って機能を拡張してゆくという考え方らしいので、MTだと簡単にできることが、WordPress だとプラグインを追加しないとできないなんてことが多かったです。

今回のように WordPress をブログとしてではなく、ショッピングサイトの CMS 的に使おうとすると、僕みたいに PHP の知識がほとんどない人にとっては、最初はわからないことだらけでけっこう苦労するかもしれません。

逆に言えば、PHP の知識さえあればカスタマイズの自由度はかなり高く、いじりがいのあるツールだと思います。 また、普通にブログツールとして使うだけなら設定も簡単ですごく使いやすいですね。

一気に色々作業したので、忘れないうちに備忘録みたいなのを残そうと思っていますが、取り急ぎ今回制作したしたサイト「cocona(ココナ)」で使用したプラグインだけでも晒しておきます。

WP-DB-Backup

データベースをバックアップするプラグイン。 MT と違って WP は動的生成となるので、万一に備えてのデータベースのバックアップは必須です。 これはそれをサポートしてくれるプラグイン。

Breadcrumb Navigation XT

いわゆるパンくずリスト(トピックパス)を表示させるプラグイン。 最初自力でやろうとしたんですけど、うまくいかずに挫折したので。

WP-PageNavi

商品一覧(アーカイブ)や検索結果画面を複数ページに分割するときのナビゲーション(ページネーション)を表示させるプラグイン。

HeadSpace2 SEO

description や keywords などの設定を一括、または個別に細かく設定できるようにするプラグイン。

Yet Another Related Posts Plugin

見ているページと関連するページを自動で抽出してくれるプラグイン。 cocona では「関連商品」の部分で利用しています。

Custom Field GUI Utility

cocona では商品の画像データ、キャッチコピー、価格、などなど、投稿に付属する細かいデータを WP のカスタムフィールドという機能で管理しているのですが、これはそのカスタムフィールドを使いやすくしてくれるプラグイン。 これナシでは cocona の制作を諦めてたかも。。。

Duplicate Post

書いた投稿の内容を複製して新しい投稿を作るプラグイン。 WP をブログとして使用するぶんにはあまり使う機会はないでしょうけど、cocona では同じ商品の色違い、サイズ違い商品ページを作るときにかなり重宝してます。

WP Smart Sort

アーカイブページをカスタムフィールドの値で並べ替えるプラグイン。 商品の一覧ページで「価格の安い順」で並べ替えなどを実現させてます。

My Category Order

カテゴリーの並び順を自由に変更できるようにするプラグイン。 商品カテゴリーの分類や配置はショッピングサイトとして重要なので。

FeedBurner FeedSmith

WPのフィードを FeedBurner に置き換えてくれるプラグイン。フィードの購読者数などがわかるので、ショッピングサイトとしては必要かなと思ったのですが... ちょっとうまく動いてないみたいので調整中。

Google XML Sitemaps

Google などの検索エンジン向けに公開する XML サイトマップを自動生成してくれるプラグイン。 まあ、基本ということで。

こんな感じで、全 11種類のプラグインを使用しました。
商品の売上という、わかりやすい結果が見えるサイトをひとつ持てたので、UI の変更や SEO の実験など、色々なことを試してみようと思います。

これからもコツコツと商品と機能を拡充してこうと思っているので、気になる商品があれば買ってやってください。 楽天や Amazon と比べて奇跡的に安かった時でかまわないので ^ ^

その後、WordPress でもう一丁サイト作ってみました

WordPress の右も左もわからない状態で最初に買ったのがこの本。 デフォルトのテーマが詳しく解説されているので、MTと比べてどこで何をやっているのかを理解するのに助かりました。 ただ、PHP による独自カスタマイズについてはそれほど詳しく解説されてないので、今回の cocona のようなサイトを WordPress で構築したい人にはさらに一歩踏み込んだ本が必要になるかも。

コメント

Posted by けんけん

  • July 12, 2010 10:10 PM

すばらしくおしゃれで素晴らしいサイトを作られますね!
私もwordpressでサイトづくりに挑戦しているのですが、思うようなサイトになかなか到達しません・・。
タケノービさんが作成されたcoconaですが、私が作りたいイメージのサイトに近いです。基盤にされたthemeとか、おありになるのでしょうか?
今後とも宜しくお願いいたします。

Posted by takenobi takenobiさんのホームページへ

  • July 14, 2010 1:04 AM

>けんけんさん

お褒めいただき恐縮です!
一応「WordPress Default」を基盤のテーマにはしたのですが、増改築してゆくうちにまったく原型を留めていない状態になっています。 cocona の場合は、テーマよりもこのエントリーで挙げているプラグインの機能にだいぶ助けられた面がありますね。

「ここがわかんねぇ」などの具体的な疑問があれば、cocona を例に解説記事書きますよ。(僕がお答えできるような疑問であればですけど… ^ ^;)

Posted by ちえ

  • September 4, 2010 8:14 PM

はじめまして。
実験的と仰っているショッピングサイトを拝見しました。
私ももしも+WPで作成しているので参考にさせていただいているのですが、
まさに理想の機能をもったサイトです!
私はPHPの知識もなくWPも初めてなので戸惑うことばかりです。
しかし、列挙してくださったプラグインは実際にインストールしてみて、
確かにおお!と驚くものばかりでした。
ところで質問なのですが、商品一覧ページにあるもしもの画像は
どのように引っ張ってこられていますか?
もしもAPIでそのまま引っ張ってきてもこうならないのですが、
挙げられているGUIのプラグインでURL指定されているのでしょうか?
もしお時間があればこのようなショッピングサイトをカスタマイズする講座を開いてはいただけないでしょうか?
お手を煩わせるようなことを言ってしまい申し訳ありません。

Posted by takenobi takenobiさんのホームページへ

  • September 8, 2010 7:23 PM

> ちえさん

コメントありがとうございます!
このサイトを制作しているときは、まだもしもの API が公開される
前だったので、もしも API の類は一切使用してません。
使いこなせれば在庫管理とかすごく楽なんでしょうけど…

なので、ご明察の通り cocona では投稿ページのカスタムフィールドに
もしもが提供する写真の URL に含まれる 13桁の数字を登録し、

例)カスタムフィールド名を「cf_prodImgID」にした場合
ttp://www.moshimo.com/item_image/<?php echo post_custom('cf_prodImgID')?>/1/r.jpg

商品一覧であれば上記のように 150x150 の 「r.jpg」を
呼び出すようにしています。

このほかに、「商品ID」「キャッチコピー」「リード文」
「希望小売価格」「販売価格」「発送目安」などなど、商品に紐付く
多くの情報をカスタムフィールドに入力して管理しているため、
この記事で紹介した Custom Field GUI Utility が必須というワケなんですよね。

お役に立てるかわかりませんが、時間のある時にもう少し詳しい
エントリーを書いてみますので気長にお待ちください。

Posted by sam

  • October 11, 2010 3:01 AM

ショッピングサイトとってもいい感じですね。

私も値段とかで並べ替えしてくてWP Smart Sortを使用したのですが、
正常に動かない?プラグインPHP内の136行目がエラーが出てくるみたいでして。

どうやってるんですか?

Posted by 今井 良 今井 良さんのホームページへ

  • December 30, 2010 12:48 AM

ショッピングサイトと聞いて、Welcartを連想してしまいました
勉強になりました!!ありがとうございます

Posted by りぃ

  • June 12, 2011 5:47 PM

はじめまして。

いつもこちらのサイトを参考にサイトを作っていますが、何点かうまくいかないので、アドバイスもらえたら嬉しいです。

1.関連商品の画像部分が http://www.moshimo.com/item_image//1/m.jpg にすると、そのページの画像が表示され、関連商品の画像が表示されません。

ID, 'article_image', 'post_id','item_id', true); ?>
とフォードを設定しているんですが、間違っていますでしょうか?

2.販売終了を表示させたい。

販売状況の部分で販売終了だけ表示されないのでさせる方法ないでしょうか?

また、販売状況を画像表示させる方法あるでしょうか?

忙しいので、メールで返事できればお願いします。

Posted by りぃ

  • June 12, 2011 5:50 PM

訂正
http://www.moshimo.com/item_image/<?php echo $image; ?>/1/m.jpg

Posted by 浪波 仁

  • June 16, 2011 10:51 PM

とても参考になるページをありがとうございます。
http://www.cocona-shop.com/products/20100423_170915/
のページやショッピングインフォメーションの部分とても参考になるのですが
どのように作るといいのか悩んでいます。
とてもキレイにできていて理想的なので
どのようにやっているのか教えていただけないでしょうか。

よろしくお願いします。

Posted by すごう

  • November 26, 2011 6:07 AM

初めまして!cocona拝見しました!まさに自分が理想していたサイトです!色々と教えて欲しいのですがメールに是非御連絡頂けたら光栄です。

Posted by よし よしさんのホームページへ

  • June 12, 2012 10:20 AM

wordpress 商品紹介を検索して
cocona[ココナ]のサイトに辿り着きました。

こんな方法で商品を紹介出来るとは凄いですね。
参考にさせて頂きます。

Posted by kanon

  • October 22, 2012 8:36 AM

大変参考になりました!
ありがとうございます★★★

Posted by たすちん

  • January 31, 2014 4:50 PM

はじめまして!たすちんと申します。
有用な記事をありがとうございます><
こちらの記事を参考にさせていただいて、商品一覧ページを作成しようと思っているのですが、商品一覧ページは何かプラグインを使用して表示しているのでしょうか?(1行に4商品並んでいると思いますが、それを実現したいのです。)
ご教示いただけると嬉しいです。

Posted by Robert

  • January 16, 2017 4:40 PM

I actually got into this post. I located it to be fascinating and loaded with exclusive points of interest. I like to read material that makes me believe. Thank you for writing this fantastic content.

Posted by Daniel Danielさんのホームページへ

  • January 17, 2017 9:03 PM

on the other hand, you could find inexpensive features allow me to explain allow a topline model and you desire to create quilts just for your special Hermes Evelyne travelling bag include.

Posted by Mark Markさんのホームページへ

  • January 18, 2017 9:54 PM

That alone wwas an egregious oversight on thheir own part, since

Posted by Thomas Thomasさんのホームページへ

  • January 19, 2017 11:00 PM

Every weekend i used to pay a visit this website, for the reason that i wish for enjoyment, for the reason

Posted by Michael Michaelさんのホームページへ

  • January 20, 2017 10:46 PM

I appreciate you sharing this article.Thanks Again. Really Cool.

Posted by John Johnさんのホームページへ

  • January 22, 2017 5:28 PM

Thanksamundo for the post.Really thank you! Awesome.

Posted by Robert Robertさんのホームページへ

  • January 28, 2017 9:39 AM

Really informative blog article.Really thank you! Want more.

Posted by William Williamさんのホームページへ

  • February 1, 2017 12:45 AM

I simply couldn't depart your site prior to suggesting that I actually loved the standard info an individual supply for your guests? Is going to be back regularly in order to inspect new posts.

Posted by William Williamさんのホームページへ

  • February 1, 2017 12:45 AM

I simply couldn't depart your site prior to suggesting that I actually loved the standard info an individual supply for your guests? Is going to be back regularly in order to inspect new posts.

Posted by William Williamさんのホームページへ

  • February 1, 2017 12:46 AM

I simply couldn't depart your site prior to suggesting that I actually loved the standard info an individual supply for your guests? Is going to be back regularly in order to inspect new posts.

Posted by William Williamさんのホームページへ

  • February 1, 2017 12:47 AM

I simply couldn't depart your site prior to suggesting that I actually loved the standard info an individual supply for your guests? Is going to be back regularly in order to inspect new posts.

Posted by William Williamさんのホームページへ

  • February 1, 2017 12:47 AM

I simply couldn't depart your site prior to suggesting that I actually loved the standard info an individual supply for your guests? Is going to be back regularly in order to inspect new posts.

Posted by William Williamさんのホームページへ

  • February 1, 2017 12:48 AM

I simply couldn't depart your site prior to suggesting that I actually loved the standard info an individual supply for your guests? Is going to be back regularly in order to inspect new posts.

Posted by William Williamさんのホームページへ

  • February 1, 2017 12:48 AM

I simply couldn't depart your site prior to suggesting that I actually loved the standard info an individual supply for your guests? Is going to be back regularly in order to inspect new posts.

Posted by William Williamさんのホームページへ

  • February 1, 2017 12:49 AM

I simply couldn't depart your site prior to suggesting that I actually loved the standard info an individual supply for your guests? Is going to be back regularly in order to inspect new posts.

Posted by William Williamさんのホームページへ

  • February 1, 2017 12:50 AM

I simply couldn't depart your site prior to suggesting that I actually loved the standard info an individual supply for your guests? Is going to be back regularly in order to inspect new posts.

Posted by William Williamさんのホームページへ

  • February 1, 2017 11:07 AM

I simply couldn't depart your web site prior to suggesting that I actually loved the usual info a person supply for your guests? Is gonna be again continuously in order to check up on new posts.

Posted by William Williamさんのホームページへ

  • February 1, 2017 11:10 AM

I simply couldn't depart your web site prior to suggesting that I actually loved the usual info a person supply for your guests? Is gonna be again continuously in order to check up on new posts.

コメントを残してください

コメント入力フォーム

必須 = Required

 

トラックバック

トラックバック URL: http://www.tratxt.com/mt/mt-tb.cgi/73

管理人について

タケノービ

タケノービ(takenobi)/東京都 墨田区在住/O型/おとめ座/寅年
more

連絡先