Welcart無料テーマのデモが出来ました！
スポンサーリンク
先日「Welcartのテーマ・テンプレート（有料・無料）まとめ」というエントリーを書きました。
その中では無料テーマではあまり自分が気に入るものはなく、それなら「よし、自分が作ったろう」となんとなく今月頭から作り始めたのですが、ようやく形になってきましたので、デモを公開します。
現在WordPress.orgにテーマ申請中（4/30～)です。審査合格までもう少々お待ち下さい。6/28 厳しい審査になんとか合格して公開されました！こちらからダウンロードできます。
テストもこのデモサイトで行っているので、データ転送中などで表示が不安定になることがあると思います。その場合は時間を置いてアクセスしてみて下さい。
無料テーマを作るにあたって
私はかれこれ3年ほど、Welcartでオンラインショップを運用しています。「こうだったらもっといいな」とカスタマイズしてきた技術をかなり詰め込みました。
- カゴ落ち対策（当ブログで紹介した方法の中から、テーマに入れられたもの）
- スマートフォン対応のレスポンシブデザイン
- ブログとの共存
- なるべくプラグインを使わない→表示速度UP
- 「商品」と「商品ジャンル」カテゴリーを、パンくずリストに表示しない
- その他多数
自分が動かすWelcartなら自分が必要な所だけを作れば良かったのですが、配布用テーマは様々な人が運用することを想定しないといけないので、形になるまでが想像以上に大変でした。WordPress.orgでテーマを配布している人たちはすごいですね。
demoで使用中のWordPressプラグイン
- Akismet
- Welcart e-Commerce
- WP Multibyte Patch
- zippaddr-jp
実際のWelcartショップなら、ContactForm7（コンタクトフォーム）やサイトマップ生成プラグインも追加するのが現実的なところかと思います。
「パンくずリスト」「ページャー（ページ送り）」「関連商品」「トップに戻る」はテーマに実装されていますので、それらのプラグインは不要です。
ブログとの共存
「blog」というスラッグをつけたカテゴリーを作り、投稿記事はそのカテゴリーに属させることによって、ブログ用のテンプレートが適用されるようになっています。
（5/13更新）WordPress公式テーマディレクトリ申請中に、色々と指摘があったため、設計を変えました。「blog」スラッグをつけたカテゴリーを作らなくても、ブログはブログだけで表示させるようにしました。
Welcartは商品のカテゴリー分けにWordPressのカテゴリーを利用する仕様のため、タグ・日時アーカイブ・検索結果等でテンプレートを振り分けるのが結構大変でした。
そもそもWelcartがカスタムタクソノミー（標準の「カテゴリー」「タグ」の他に、任意の分類科目が作れるWordPressの機能）を使ってくれてたら、みんな苦労しないのにな～、とか思わなくもありません・・・。
確認できたブラウザ
表示確認は以下のブラウザで行っています。
Windows 7
- Internet Explorer 11
- Google Chrome 34
- Firefox 27
iOS 5.1.1（数年前のiPod touch）
- Safari5.0 （古くて申し訳ない。ガラケー派なもんで）
テーマはHTML5で作っていますが、IE8以下でも対応させられるjQueryファイルを読み込んでいます（自分はIE10以前を所有していないため未確認）。
参考までに、運用中のWelcartショップのIE8.0以下のアクセスの割合は4%程度です。WindowsXPのサポート終了で、恐らくこれから0%に近づいていくでしょう・・・（勝手な推測）。
ショップのアクセス解析では、ブラウザで一番多いのはSafari（iPhone）で、全体の25%以上あります。全体でもスマホからのアクセスは45%程度で、PCを若干上回っています。時代はスマホですね。
色々試してみて下さい
という訳で、公開までしばらくはこのデモを触ってみて下さい。
メンバーページへのリンクはデモにはつけていませんが、設定はしてあります。ここまで読んで下さった方はゲストアカウントでのアクセスをどうぞ。
- メンバーログイン：http://demo.welcustom.net/?page_id=5
- ゲストアカウント: guest@welcustom.net（実在しません）
- パスワード：123456
最後に：制作で参考にさせて頂いたサイト
パンくずリスト
パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない（コード 付き）（WebDesignRecipies）
丁寧にまとめられた素晴らしい記事です。WordPressがどのような仕組みでカテゴリーのリンクや名前を取り出しているのかを学びながら、パンくずリストを作るコードを作り上げていきます。
新着商品を表示する為の「○日以内の記事」を取得するコード
WordPress: Using Filters With get_posts()（Viper007Bond.com）
WordPress用プラグインも多数開発している、米オレゴンのWebディベロッパー、Alexさんのブログです。なんと、当ブログでも使っているsyntaxhighlighterの開発者さんでした！びっくり！
数量増減のボタン
Magento quantity increments – jQuery edition（Jigowatt）
MagentoというECサイト構築オープンソースでの数値増減ボタンのコードですが、jQueryのコードなのでもちろんWordPressやHTMLサイトにも流用出来ます。Welcartへの適用方法は、こちらの記事で紹介しています。
テーマ作成お疲れさまでーす★
無料ながら素晴らしい出来ですね！
Welthemesの有料テンプレ買いましたけれども、やはりカスタマイズが結構必要でしたので、
すでにカスタマイズ済みのここのテンプレはサイトオープンに時間が短縮できて、有り難い存在かと思います！！
コメントありがとうございます。公開までにはもう少し時間がかかりそうですが、頑張ります！
素晴らしいです…！
丁度、オンラインショップの解説を検討し、
BASEを利用するか、自分で作るか迷っていたところだったので…
こちらの無料テーマが使えるようになったら、
Welcartで作りたいと思います！
とてもありがたいです。
コメントありがとうございます！実はちょうどWordPress.orgからがっつりダメ出しが来たところでして・・・しばらく修正作業です～（泣）気長にお待ち頂けたら嬉しいです♪
まめこさま、はじめまして♪
初心者で、やっとwelcartの設置まで辿りつきましたが、デザインが納得行かなくていろいろ探しておりました。
有料も考えておりますが、まめこさまの無料のテーマがすごく素敵でぜひ使って勉強させていただきたいと思いました。
Twitterのフォローもありがとうございました(*^^*)
これからもよろしくお願いします♪
楽しみにしております*\(^o^)/*
コメントありがとうございます！WordPress.org（の中のボランティアでチェックして下さる方）のダメ出しが想像以上に厳しく要求レベルが私の技術力を超えていて、もう心が折れそうです（笑）。地道に一つずつクリアしていかないといけないのでまだ時間がかかりそうですが（私的には完成しているんですけどね・・・）、もうちょっと頑張ってみます～＞＜
お返事ありがとうございました。
頑張ってください♪
激しく応援しております*\(^o^)/*
まめ子さま
welcartでネットショップを作ろうと考えていて、
いろいろ調べていたら、こちらのブログに辿り着きました。
まめ子さんのテンプレート、とてもオシャレで、
公式テンプレートや他社の有料のものよりも惹かれます！
公開される日が来るのを待ってます♪
wordpress.orgの審査があまり厳しいようでしたら、
ブログでzipファイルを公開するとかでも大歓迎です！！
コメントありがとうございます！私はプロのウェブ屋さんではないので・・・プロの方が作ったもののほうが安心ですよ？（笑）
WordPress.orgへ再々提出するために今は必死に修正しています。何やってもダメそうだったら、ここでの公開も考えるかも！？ですが、気長にお待ち頂ければ有難いです♪
まめ子さま、はじめまして。
Welcartを利用してだいぶ経ちますが、無料ではこれというものがなく、ワードプレスのテーマではカートなどwelcartが使えず、有料で考えていたところ、このサイトを知って感激です。楽しみです(^-^)//~~
コメントありがとうございます。何だかたくさんの方にお楽しみにして頂いて恐縮です^^;今はWordPress.orgへ再々提出用に修正版を作っているところです（それでもまたきっとダメ出しが来るでしょうけど・・・）。プラグイン併用のテーマは一筋縄ではいかないので難しいですが、合格目指して頑張ります！
OKがでたとのこと、おめでとうございます！
ひとつ質問なのですが…
現在のでもページでは、上部のナビゲーションは
「CONTACT、ABOUT、GUIDE、BLOG」のみですよね？
これだと、
ショップ内の全商品を全て見てみたい、と思った時は見れないのでしょうか？
下の方に「CATEGORIES」というのがあって、
そこからカテゴリー別であれば商品を見ることができるのですが、
ショップ内の全商品、または取り扱い商品のメインページを表示できるようなナビゲーションボタンがあった方が
親切かな？と思うのですが…
どうでしょうか？
ナビゲーションはWordPressのカスタムメニュー機能を、フッターはWordPressのウィジェット機能を使っているので、これらは自由に設定が可能です。全ての商品を表示するには、Welcartの「商品」のカテゴリーページを表示します。承認はされたんですが、公式ディレクトリに掲載されるのにはタイムラグがあるので、狐につままれた感じではあります^^;
お返事ありがとうございました。
そうなんですね！
WordPressも初心者なもので…スミマセン！
公式ディレクトリに掲載されるまでには、まだライムラグがあるのですね…
楽しみに待っています！
いえいえ。WordPressは最近のケータイ並みに？機能が多くて複雑ですが、一冊参考書をやるだけでもかなり違ってくると思います^^無事公開された際には是非使いこなして下さいね！
まめ子様、はじめまして！
初心者ながら、WelcartのオリジナルテーマでのECサイト製作を目指しておりまして、カスタマイズ方法など、とても参考にさせていただいています！
ブログはカテゴリーではなく、他の方法での設置に修正されたようですが、カスタム投稿タイプを利用されたのでしょうか？
でも、URLを見ると、ブログ一覧ページは固定ページ（?page_id=○○）、個別ページは個別投稿ページ（?p=○）になっているようなのですが・・・どのように実装されたのでしょうか？
テーマとして申請されているのにこんな事お聞きしていいのか分かりませんが、教えて頂けたらうれしいです。
初めまして、コメントありがとうございます。ブログはカスタム投稿タイプではなく、普通の投稿です。［設定］＞［表示設定］＞［フロントページの表示］のところで、［フロントページ］はサイトトップ用に作った固定ページ（テンプレートfront_page.php）、［投稿ページ］はブログ一覧用に作った固定ページ（テンプレートはhome.php）を読み込むようにしています。更にfunctions.phpで、home.phpでブログ記事に混ざって商品が一覧に表示されてしまわないように、クエリを書き換えるフィルターフック（pre_get_posts)を使っています。
実装方法については現在記事としてまとめておりまして、来週辺りに公開する予定ですので、少々お待ち下さいませ！
なるほどです！配布するテーマにするに当たって、わざわざカテゴリーを作らなくても良いようにした、と言うことですね。
さっそく試してみましたが、表示設定＞固定ページ＞投稿ページにしたページは、home.phpを読み込むんですね！？トップページにだけ関わってくるテンプレートかと思っていました。
blog.phpとかのテンプレートを指定してもそっちを読み込まずhome.phpを読み込むのはなんでなんでしょう・・・もうちょっと優先度を勉強します;
そして、フィルターフックで商品は表示されないようにすると・・・自分でも色々しながら、まめ子様の記事を待つことにします！ありがとうございました！
そうなんです、WordPress.orgの公式ディレクトリに登録されるには、「プラグインなしで普通に動く」ことが大前提とのことでしたので、結果的にそうなりました。検索結果やアーカイブページなども、商品とブログ記事とで別々になるようにするのにも骨が折れました。優先順以外のテンプレートの読み込みを指定するには、これまたフィルターフックを使う必要があります。この辺も記事で取り上げる予定です。
こんにちわ。こちらのWelcart無料テーマ、無料との事なのですが、会社のHPに使用させていただく事は可能でしょうか？
もし可能なら、フッターも編集させていただきたいのですが・・・・
また、テーマ検索時のキーワードも教えていただけると助かります。
こんにちは。WordPressテーマはGPLに準拠したライセンスのみが認められることから、当テーマもライセンスはGPLとなり、ライセンス範囲内での使用・改変が可能です。GPLライセンスにつきましては以下のサイト等をご参考下さい。
また、テーマは「承認」されていますが「公開」になっていないため、検索してもまだ出てきません。「公開」になった際にはブログでも告知しますので、ご確認頂けましたら幸いです。
GPLやMITやCCなど主要ライセンスの内容と意味のまとめ － ITキヲスク
ありがとうございます！
大変助かります。
ECサイトのホームとして使わせていただけると助かります。
公開が待ち遠しいです。
自分ではこんなにしっかりしたものは作れないので・・・・
何卒よろしくお願いいたします。
フッターの著作者リンクにつきましては、差し支えなければ出来る限りそのままにして頂ければ有難く存じます。恐れ入りますが宜しくお願い致します。
まめ子 様
はじめまして。
Welcart用の無料テーマでレスポンシブル対応のものをずっと待ってました。
Welcartの標準テーマではアイキャッチ画像には対応していないし(function.phpに追加して対応しています)、PayPal Vermilionも標準テーマよりは全然良いのですが、レスポンシブルではないので、スマホやタブレット表示をどうしようかと思っていました。
まめ子様のテーマは公開されるときのテーマ名はなんというテーマ名で公開されるのか教えていただければありがたいです。
また、公開前にダウンロードできるようにしていただいて、事前に利用することは可能でしょうか？
無理なお願いとは思いますが、ご検討していただければさいわいです。
よろしくお願いいたします。
こんにちは。コメントありがとうございます。テーマは多くの方にお待ち頂いておりますが、飽くまでもWordPress.org公式ディレクトリの公開をお待ち頂きたいと存じます。もちろん、物理的に当サイト上で公開することは可能です。ただ、WordPressの公式ディレクトリ以外で私的に配布されているテーマには、悪意のあるプログラムが埋め込まれていることが非常に多いです。私は皆様に安心してお使い頂きたいので、このような形を取らせて頂いております。ご理解頂けましたら幸甚です。
また、公開につきましては、残念ながら私は一切コントロール出来ません。WordPress.orgのテーマ担当の方が、その方の判断の元に行って下さいます。スタッフの方もテーマの作家同様に皆ボランティアで、それぞれお仕事やご家族がある中、時間を割いて無償でテーマチェックをして下さっています。いつになったら必ず、といったお約束も出来ない状況ですが、気長にお待ち頂ければ有難く存じます。テーマ名につきましては、実際に公開された際にブログ上でお知らせしたく考えております。
まめ子様
回答ありがとうございます。
公式公開までじっくり待たさせていただきます。
早く公開されるように祈ってます！
ありがとうございます。リストの上のほうには載っているので、まだあと1ヶ月以上ということはないかとは思いますが・・・？？W杯が始まったので、WordPress.orgの更新も滞るかもですね（笑）
まめ子様、こんにちは。
たまたまテーマを見ていたら、最新のところに公開されているみたいです！！
早速ダウンロードさせていただきました！
おめでとうございます！！！
早速DLありがとうございます。いやはや、提出から2ヶ月もかかってしまいました・・・。ブログでは週明けにでも紹介したいと思います。お店作りのお役に立てれば嬉しいです。
wordpressでECサイトを作ろうと思って色々を調べていたトコロ、まめ子様のブログにたたどり着き感激しました!!
Welcartかwoocommerceかで悩んでいたのですが、テーマが非常に良くて早速ダウンロードさせて頂きWelcartを使ってみようと思います。
素晴らしいテーマ、本当にありがとう御座いますm(uu)m
ダウンロードありがとうございます。お店作りの一助になれば嬉しいです！
ダウンロードさせていただきました。
ありがとうございます。
さっそく使用したのですがカートページ設定をいじっても商品コードが表示されません。
もしお時間がある時でいいのでどうやったら表示されるか教えて頂けれたらと思います。よろしくお願いします。
まめ男様
ダウンロードありがとうございます。カートページ設定で「商品コード」にチェックを入れると、私の環境ではカートページ内にて商品コードが表示されますが・・・。ちょっとわかりません、すみません。ちなみに商品ページではコードは表示されない仕様です。
今後のご質問等は、WordPress内のフォーラムにて頂ければ有難く存じます。よろしくお願い致します。
こちらのテーマをダウンロードして使用させていただいております。大変使いやすくオリジナルECサイト初構築の私でもなんとか形になりそうです。一つ確認お願いしたいのですが、レスポンシブ対応ということですごく気に入っているのですが、私のiPhone5sのSafariで確認したところ商品ページのメイン画像が最初のアクセスでは表示されないのです。
画像を表示するはずの所をタップしてやると別ウインドウには表示されます。また、サブ画像登録してあるとサブは表示しますので、それをさわるとメインも表示します。もしかするといじっているうちにおかしくしてしまったかと思い、まめ子さんのサンプルをiPhone5sで表示させたところ同じ症状がでました。
iPhoneのOperaで表示させるとこの症状はでません！Safariだけのようです。PCの方はどのブラウザでも問題なく表示しております。
これは、私のiphone5s固有の問題でしょうか？
iOS8になってからか、同様の症状と思われるいくつかの報告がございました（こちらやこちらなど）。残念ながら私はiPhoneを所有しておらず、症状を確認することが出来ません。また、症状が見られたという方からのその後のご報告なども現時点では受けておりません。もし原因がわかりましたら、お知らせ頂ければ有り難く存じます。ブラウザやブラウザ設定等との兼ね合いのあたりかもしれないですね。
（追伸）別記事へのコメントご投稿は、ほぼ同じ内容でした為に削除させて頂きました（こちらの返信を書いた後にご投稿がありましたことに気が付きました）。悪しからずご了承下さいませ。