WordPress の勉強がてらショッピングサイト的なものを作ってみた
このブログは 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 2.7 カスタマイズブック (Web Designing BOOKS)
- 大藤 幹
毎日コミュニケーションズ
WordPress の右も左もわからない状態で最初に買ったのがこの本。 デフォルトのテーマが詳しく解説されているので、MTと比べてどこで何をやっているのかを理解するのに助かりました。 ただ、PHP による独自カスタマイズについてはそれほど詳しく解説されてないので、今回の cocona のようなサイトを WordPress で構築したい人にはさらに一歩踏み込んだ本が必要になるかも。
トラックバック URL: http://www.tratxt.com/mt/mt-tb.cgi/73
Posted by けんけん
すばらしくおしゃれで素晴らしいサイトを作られますね！
私もwordpressでサイトづくりに挑戦しているのですが、思うようなサイトになかなか到達しません・・。
タケノービさんが作成されたcoconaですが、私が作りたいイメージのサイトに近いです。基盤にされたthemeとか、おありになるのでしょうか？
今後とも宜しくお願いいたします。
Posted by takenobi
>けんけんさん
お褒めいただき恐縮です！
一応「WordPress Default」を基盤のテーマにはしたのですが、増改築してゆくうちにまったく原型を留めていない状態になっています。 cocona の場合は、テーマよりもこのエントリーで挙げているプラグインの機能にだいぶ助けられた面がありますね。
「ここがわかんねぇ」などの具体的な疑問があれば、cocona を例に解説記事書きますよ。（僕がお答えできるような疑問であればですけど… ^ ^;）
Posted by ちえ
はじめまして。
実験的と仰っているショッピングサイトを拝見しました。
私ももしも＋WPで作成しているので参考にさせていただいているのですが、
まさに理想の機能をもったサイトです！
私はPHPの知識もなくWPも初めてなので戸惑うことばかりです。
しかし、列挙してくださったプラグインは実際にインストールしてみて、
確かにおお！と驚くものばかりでした。
ところで質問なのですが、商品一覧ページにあるもしもの画像は
どのように引っ張ってこられていますか？
もしもAPIでそのまま引っ張ってきてもこうならないのですが、
挙げられているGUIのプラグインでURL指定されているのでしょうか？
もしお時間があればこのようなショッピングサイトをカスタマイズする講座を開いてはいただけないでしょうか？
お手を煩わせるようなことを言ってしまい申し訳ありません。
Posted by takenobi
> ちえさん
コメントありがとうございます！
このサイトを制作しているときは、まだもしもの 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
ショッピングサイトとってもいい感じですね。
私も値段とかで並べ替えしてくてWP Smart Sortを使用したのですが、
正常に動かない？プラグインPHP内の136行目がエラーが出てくるみたいでして。
どうやってるんですか？
Posted by 今井 良
ショッピングサイトと聞いて、Welcartを連想してしまいました
勉強になりました！！ありがとうございます
Posted by りぃ
はじめまして。
いつもこちらのサイトを参考にサイトを作っていますが、何点かうまくいかないので、アドバイスもらえたら嬉しいです。
１．関連商品の画像部分が http://www.moshimo.com/item_image//1/m.jpg にすると、そのページの画像が表示され、関連商品の画像が表示されません。
ID, 'article_image', 'post_id','item_id', true); ?>
とフォードを設定しているんですが、間違っていますでしょうか？
2.販売終了を表示させたい。
販売状況の部分で販売終了だけ表示されないのでさせる方法ないでしょうか？
また、販売状況を画像表示させる方法あるでしょうか？
忙しいので、メールで返事できればお願いします。
Posted by りぃ
訂正
http://www.moshimo.com/item_image/＜?php echo $image; ?＞/1/m.jpg
Posted by 浪波 仁
とても参考になるページをありがとうございます。
http://www.cocona-shop.com/products/20100423_170915/
のページやショッピングインフォメーションの部分とても参考になるのですが
どのように作るといいのか悩んでいます。
とてもキレイにできていて理想的なので
どのようにやっているのか教えていただけないでしょうか。
よろしくお願いします。
Posted by すごう
初めまして！cocona拝見しました！まさに自分が理想していたサイトです！色々と教えて欲しいのですがメールに是非御連絡頂けたら光栄です。