感謝しております (*^_^*). Inc. All Rights Reserved. レスポンシブデザイン対応で、とても柔軟性のあるWelcart Basic。そんなWelcart Basic の子テーマを作成したときの備忘録です。今までやっていたWordPressの子テーマ作成方法にとらわれていたらつまづいてしまったので、時間をかけず簡単に、更にスムーズにできるようにメモしました。 兵庫県加古川市発のローカル地域情報サイトです。地方が楽しくなる情報を加古川から発信します!, 知らず知らずの間、昨年の2015/12/29に公開された新テーマ。美しくエレガントになり、スマホにも対応したレスポンシブなテーマです。これがフリーで扱えるのは嬉しいですね。フルカスタマイズするにも素人だと難しい面が多いので、極力画像やレイアウトの変更で済ましたいものです。以前のデフォルトのテーマも便利ではあったのですが、見た目も古くなり、新しいフリーのテーマがでないかなと思ってたんですよね。うれしいわ!, WordPress専用ショッピングカート Welcart公式、2015年12月リリースのレスポンシブ対応テーマです。 シンプルなデザインで、「子テーマ」を自分で作ることによってデザインを追加して楽しむタイプ。もちろんそのままでも使えます。 Welcart Basic 1.2.12 をリリースしました。 Google Chrome メールアドレス・パスワードの自動入力機能の無効化部分の不具合修正 カートページの「数量更新」にフィルターフック追加 ヘッダーの「 […] 2019/10/21. SSLの利用:常時SSL ©Copyright2020 横尾さん!僕、泳いでますか? | 兵庫県加古川市の地域情報サイト.All Rights Reserved. この表示を2列(上部3商品、下部3商品)にしたいです。 のですが、トップページの画像がSSL化されていなかったことが原因でした。アップロードし直したら解決!, なので、ショッピングサイトを立ち上げるときはワードプレスをインストールした後すぐにSSL化しました。, その後にインストールするテーマや画像は自動でSSL化してくれるので、楽でしたよ^^, なので、どのワードプレステーマを使っていてもウェルカートを導入できるのですが、相性の良し悪しがあります。ページがきれいに表示されるかどうかなどがかかってきます。, ということで、テーマにはwelcart basicというテーマを使うのがおすすめです!, ワードプレスには無数のテーマがあります。その中のひとつに、ウェルカートと相性の良いWelcart Basicというテーマがあります。, wordpress内のテーマ検索では出てこないので(2017年2月現在)、webで検索してみてください。, 購入ありがとうございます的なメールが来ますが、実際には費用はかからないのでご安心を。 Welcart Plugin Produced By Collne 変更させたい部分(セレクタ)にどのようなスタイルが効いているかを確認することができますので、 Welcart Basic テーマは今後も修正版がリリースされます。テーマを直接変更してしまった場合、アップグレードを行うとせっかくのカスタマイズが失われてしまいます。子テーマを作成してカスタマイズを行えば、Welcart Basic テーマを最新版に入れ替えてアップグレードすることができます。 症状を確認したブラウザ: 子テーマを作成してテンプレートを修正するかになってくるかと思われます。 このページ... カラーミーショップはHTMLとCSSの編集ができ、オリジナルデザインのショップを構築することができるECサービスです。TetraThemesではレスポンシブに対応したデザインテンプ... カートトップ:wc_templates/cart/wc_cart_page.php, お客様情報:wc_templates/cart/wc_customer_page.php, 配送設定:wc_templates/cart/wc_delivery_page.php, 確認ページ:wc_templates/cart/wc_confirm_page.php, 完了ページ:wc_templates/cart/wc_completion_page.php, 会員ログイン:wc_templates/member/wc_login_page.php, 新規入会フォーム:wc_templates/member/wc_new_member_page.php, メンバーページ:wc_templates/member/wc_member_page.php. WelcartはWordpressに無料プラグインを追加するだけでネットショップの機能を追加できるもの。もちろん決済の設定や配送設定などもできるので、きちんとしたECサイトを構築することも可能。, またドキュメントの豊富なWordpressを使用しているためカスタマイズも比較的簡単です。Welcartの導入方法などについては一番簡単なWelcartのはじめ方・使い方をご覧ください。, トップページのテンプレートはhome.php内に記述されています。このテンプレート内には大まかに以下のようなコンテンツが表示されています。, デフォルトでは以上のようになっていますが、WelcartではSmaryなどを使用していないため、Wordpressをカスタマイズする感覚で必要なコンテンツを追加可能です。, トップページから読み込まれるヘッダーテンプレートでは、ページタイトルやナビゲーションメニューが表示されます。, タイトルや説明文はWordpressタグそのままなのでわかりやすいでしょう。ナビゲーションは管理画面で設定していない状態では上記の画像のように表示されます。, メニューの設定方法は、外観->メニューでナビゲーションに表示したいリンクを設定すればOK。その際、テーマの位置でヘッダーナビゲーションを選んでおきます。, サブナビゲーションではmembersystem_stateが有効になっている場合に、ユーザ名やログインリンクなどが表示されます。, また、カートに商品が入っていればカートページへのリンクと購入リンクが表示されます。コードを簡単に記述すると以下のような感じです。, サイドバーで表示されるコンテンツは主にウィジェットになります。ウィジェットがない場合はテンプレートで設定されているデフォルトコードが出力されます。, ウィジェットの配置を変更するには外観->ウィジェットページから行います。不要なウィジェットの削除や順番を変えたい場合はここから設定できます。, もちろんWelcart以外のウィジェットを配置することも可能。またテンプレートに直接コードを書いてバナーを貼付けたりすることもできます。このあたりはWordpressのカスタマイズと同じですね。, 最後にフッターです。フッターテンプレートで表示されているのはナビゲーションとコピーライト。ナビゲーションはヘッダーと同じものなので、メニューの項目を変更する場合はフッター用メニューを作成し、選択項目でフッターナビゲーションにチェックを入れておきます。, コピーライトはテンプレートに直接記述しても良いですが、管理画面からも設定できます。welcart shop->基本設定のショップ設定欄にコピーがあるのでそこに記述します。, ここまででWelcartのトップページのカスタマイズができたので、このあとは商品ページやカートページのカスタマイズについてまとめていきます。. 中小企業に勤める社内Web担当者. functions.php に以下の赤いコードを追加し、親テーマの usces_cart.css を読み込む。, 第3引数の array('parent-style', 'usces_default_css') を指定しているのは、usces_cart.css よりも style.css を先に読み込ませるためです。usces_default_css と言うのは Welcart が出力しているもので、こちらも usces_cart.css の前に読み込まれます。スタイルシートの読み込み純は次の通りとなります。, 【方法1】、【方法2】どちらの方法でも構いませんが、親テーマの usces_cart.css を読み込み、変更したいところだけを子テーマの usces_cart.css に記述する【方法2】が、WordPress の style.css の扱いとほぼ同じ仕様となりますので扱いやすいかと思います。, Welcart1.6 までのバージョンを利用している場合は、このフォルダ(wc_templates)内のテンプレートは全て必須となりますので、親テーマ(Welcart Basic)からコピーして子テーマに置いてください。 ホーム › フォーラム › テンプレート(テーマ) › Welcart Basic のカスタマイズ, このトピックには2件の返信が含まれ、2人の参加者がいます。7 ヶ月、 1 週前に  Nakataro さんが最後の更新を行いました。, Welcart Basicバージョン: 1.2.12で、ネットショップを開店したいと思っております。 管理画面 > 外観 > ウィジェットの web初級者でも、welcartを使ってショッピングサイトを開設することは可能です!, こんにちは、ショコラティエのきょうこです。ボンボンショコラ専門のチョコレート教室をやっています。ボンボンショコラ専門のチョコレート教室をやっています。, 今年2017年のバレンタインは、Wordpressの無料プラグイン・welcart(ウェルカート)を使ってショッピングサイトを作りました。, おおかた問題なく開設&運用できたのですが、やはり壁にぶつかることもありました・・・, ということで今日は、バレンタインを振り返って、welcart(ウェルカート)導入前にしておくと良いと思うことを5つ、お伝えします。, ちなみにWelcartはブログと同居できる(=ブログそのものにお買い物サイトを埋め込める)便利なプラグインですが、私はあえて本ブログとは別にしました。, 既にショップ用のドメインを調達済み、もしくは今のブログにウェルカートを導入したい人はここをすっ飛ばして2番目へ進んでください。, 私は独自ドメインというものを使っており、このサイトのドメインは【kyonchoco-wine.com】です。世界にひとつしかない、私だけのドメインです。, ウェルカートはプラグインという拡張機能なので、もちろんこのドメインのページ(つまり本ブログ)にショッピングサイトを埋め込むことも可能です。, ということで、私はこのブログとは別に、shopという文字列を含んだドメインを用意しました。, まず、前者の【"●●.shop"のドメインを取る】ですが、この.shopドメインは2016年に登場したものです。 自前で作りたいショップオーナー WelcartのEC部分のテンプレートはwc_templates内にあるようです。ページのタイトルや表示したい文章については管理画面から設定できますが、レイアウトなどは各テンプレートファイルをカスタマイズする必要があります。 無料のWelcartテーマ Welcart専用親テーマ Welcart Basic. ショッピングサイト開設時に使うのは、後者のビジネスアカウントです。, 売り上げを自分の銀行口座に落とすときは多少の手数料が発生しますが、 '/usces_cart.css', array('parent-style', 'usces_default_css') ); Welcart Basic テーマは今後も修正版がリリースされます。テーマを直接変更してしまった場合、アップグレードを行うとせっかくのカスタマイズが失われてしまいます。子テーマを作成してカスタマイズを行えば、Welcart Basic テーマを最新版に入れ替えてアップグレードすることができます。, 子テーマの作成は難しくありません。子テーマを使用することでWordPressのテーマの開発を良い形で学ぶことができます。. 「ホームウィジェット」という各ウィジェットエリアの中身が Welcart Basic テーマを親テーマとして、子テーマを作成して Welcart Basic をカスタマイズしましょう。, ここでご説明する子テーマの作り方は、Welcart Basic を親テーマとした場合の作成方法です。, まずは、Welcart Basic テーマをダウンロードしてインストールしておいてください。Welcart Basic テーマのダウンロードはこちら, 子テーマのディレクトリ名です。自由に命名できますが、どのテーマの子テーマであるかが分かるようなディレクトリ名が良いかと思います。このディレクトリの設置場所は、****/wp-content/themes/ (親テーマと同じ階層)となります。, ここで重要なのは、Template です。 ‍♀️cottaアンバサダー これは室内で写真撮影するのに便利そう!シリコン製ディフューザー「MagSphere」と 「MagBounce」これはちょっと使ってみたい機材です!, ツナおにぎりの最高峰だ!新発売「ツナづくし!一口めからツナごはん」セブンイレブンのおにぎりを食べてみたよ〜!. Webに必須の高品質な写真素材を無料でダウンロードできるサイトを10本集めてみました。 テーマをダウンロードしたら、いったんパソコンに保存します。それをwordpress内に取り込み、有効化すればOKです。, これは、もしあなたがショッピングサイト内にクレジット決済を導入したいという場合の話です。, ペイパルは支払いを行う個人アカウントと、支払い・受取の両方ができる事業用のビジネスアカウントの2種類が存在します。 子テーマを作成し要素検証を確認しながら(上書き)修正をおこなってみてください。, フッター上部の各ウィジェットエリアについてですが、 サーバー: 【方法1】 WordPress のバージョン:5.3.2 ご利用のテーマ:WelcartBasic Welcart Basic 1.2.11 をリリース. WelcartのEC部分のテンプレートはwc_templates内にあるようです。ページのタイトルや表示したい文章については管理画面から設定できますが、レイアウトなどは各テンプレートファイルをカスタマイズする必要があります。, Welcartのテンプレートカスタマイズ方法でも書いたように、まずはCSSのスタイル変更からはじめるのが簡単。, オンラインドキュメントでは各ページのid名やclass名とその内容についてまとめてあるのでそちらも参考にしてみてください。. 無料で作るオリジナルショッピングサイトWelcart, こんな方にオススメ Welcart 専用親テーマ Welcart Basicがアップされています。 知らず知らずの間、昨年の2015/12/29に公開された新テーマ。 プログラミングの基礎やスタイルシートの基本的な書き方などは、情報が混乱しますので控えていただきたいと思います。 Wordpressでのwelcart basicのカスタマイズについて初心者ながらWordpressでwelcart basicをいじっています。そこでいくつか質問があります。まず、商品の詳細ページ以外のページ(商品一覧や投稿、固定ページなど)のサイドバーをコメントアウトで非表示にしているのですが、サイドバー分 … WordPressを使うWeb製作者 トップページの下部にある商品カテゴリーを非表示にしたいです。 Welcartの「クーポン発行」をカスタマイズで導入する方法 おすすめのサービス! ブログ運営者のためのサポート保険 『Blog-Relief(ブログリリーフ)』 プロフィール. 商品ページの右上部にある商品カテゴリーを非表示にしたいです。, ——————————————- 親テーマ(Welcart Basic)の usces_cart.css を子テーマにコピーする。 Welcart 1.9.15がリリースされました 複数ショップの運営者、Web制作会社の方へ お得なまとめ買いパック・全テーマ無制限ダウンロードクーポン 既成テーマではなく、完全オリジナルのフルカスタマイズ制作を依頼したい フルカスタマイズ制作のお見積り依頼フォーム wp_enqueue_style( 'parent-cart', get_template_directory_uri() . Google ChromeやFirefoxなどのブラウザに付属している「要素検証」を利用することで、 #ボンボンショコラ を作りたい人の参考になれば嬉しいです☻ Collne Inc. All Rights Reserved. ‍♀️ぺっこにあ Web制作に限らずWebライティングでも必ず必要なのが写真素材。テキストコンテンツに画像を... カラーミーショップはスマホでもECショップを構築できる手軽さと、HTMLやCSSを編集しオリジナルデザインのショップを作成できる拡張性を両方兼ね備えたECサービス。 welcartにカスタム投稿・カスタ分類でブログを付けるカスタマイズTIPS。wordpress・welcart・カスタマイズTIPS! このペー... カラーミーショップは初心者でも簡単にショップを開設できるECサービス。HTMLやCSSの編集も可能なので頑張ればオリジナルデザインのショップを構築することも可能です。 Welcart Basic テーマは、WordPress のテーマカスタマイザ―機能を利用することができます。ライブプレビューを確認しながらリアルタイムに設定や変更が行なえます。このカスタマイザーで対応できない変更は、子テーマを作って対応することになります。 welcart basicは無料だけど会員登録をする必要があります。 wordpress内のテーマ検索では出てこないので(2017年2月現在)、webで検索してみてください。 購入ありがとうございます的なメールが来ますが、実際には費用はかからないのでご安心を。 WCEX Auto Deliveryの定期購入時の2回目以降の受注メールタイトルについて. Welcart e-Commerce のバージョン:1.9.28 Welcart1.7 以降を利用している場合は、編集したいテンプレートのみを子テーマにコピーするのがベストです。これにより親テーマの恩恵を最大限に継承することができます。, 以上の作業が完了したら管理画面 > 外観 > テーマから作成した子テーマを有効化してください。, トップページの front-page.php や、カテゴリーページ category.php など編集したいテンプレートは、子テーマにコピーしてカスタマイズを行います。, 親テーマ(Welcart Basic)には、各拡張プラグイン(WCEX)のスタイルシートが同梱されています。拡張プラグインを使用する際は、親テーマ内にある各拡張プラグイン専用のスタイルシートを子テーマにコピーしてください。. WordPress→外観→カスタマイズ→テーマオプション→トップページ商品リストカテゴリー→トップページ商品リスト件数を6に設定しております。 Welcart Basicバージョン: 1.2.12で、ネットショップを開店したいと思っております。 WordPress→外観→カスタマイズ→テーマオプション→トップページ商品リストカテゴリーは、お勧め商品に設定しております。 Copyright © 2012-2020. 空の場合にデフォルトのウィジェットを表示する仕様になっております。, 各ウィジェットエリア内にウィジェットを登録して表示内容を変更するか、 Copyright ©2016. 間隔等も均等にしたいです。, トップページの下部にあるランダムに表示されるお勧め商品を非表示にしたいです。 WordPress→外観→カスタマイズ→テーマオプション→トップページ商品リストカテゴリーは、お勧め商品に設定しております。 【方法2】 ここでは20... カラーミーショップは初心者でも簡単にショップを開設できるECサービス。HTMLやCSSの編集も可能なので完全オリジナルデザインのショップを自由に構築することができます。 Welcartの一番簡単なはじめ方・使い方まとめです。Welcartのインストール方法からサーバー選びのポイントなどを紹介します。 ということは、大幅にドメインをアレンジできるわけではないということです。, ということで私は後者を採用し、ドメインの前にshopを付けて【shop.kyondhodo-wine.com】というサブドメインを設定しました。, ドメインにshopをつけたいという方は、このどちらかの方法になるかと思うので、ご自身に合った方を選んでくださいね。, あとは独自ドメインの中にshopという単語を含ませるという選択肢もありますが、これは新規取得になるので、前者と同様、別途取得料や維持費が発生します。, SSL化とは、暗号化通信のことです。よくネットショッピングや何かを登録するときに、「このページはSSL化通信で暗号化されて送信されます」などと書いてありますよね。そのことです。, ショッピングサイトを運営するならSSL化は必須にです。多かれ少なかれ個人情報を扱いますし信用にもつながります。, また、クレジット決済を導入する場合にはSSL通信化してあることが必須条件となります。, このSSL化のタイミングですが、ショッピングサイト用のドメインを取得し、ワードプレスをインストールした後すぐに行うのがおすすめです。, ということは、何かひとつでもSSL化されていないと安全マークがつかないということです。, なので、テーマや画像の設定をしたあとにSSL化をするとチョットメンドクサイのです。, 私は本ブログでレッスン予約ページを作るときにSSL化を試みたら、設定自体はすんなりできるのですが、確認のためにページを開くと安全マークが出てきませんでした。, 結果松原潤一さんのブログを参考に完全SSL化ができた 生クリームの動物性・植物性ってどんな違いがあるの? 生クリームに書いてある数字35/47の意味をおしえて! こんにちは、東京・神奈川のチョコ... 唐辛子を触った手で目をこすってしまったー!助けて! タバスコが跳ねた!対処法は? 「唐辛子・タバスコがついた手で目を触ってしまい、激痛が走っ... こんにちは、ショコラティエのきょうこです。ボンボンショコラ専門のチョコレート教室をやっています。 今日は第4のチョコと言われる「ブロンドチョ... チョコレートを溶かす・・・単純な作業ですが、実は気をつけたいことがあるんです。 溶かす前にこれを読んで参考にしてね!... ホワイトチョコってチョコじゃないの?カカオは入ってる? ホワイトチョコレートの原料をおしえて! ↑当記事ではこんな疑問にお答えします。 こん... チョコレートは冷凍保存できる?方法や冷凍期間を知りたい ↑当記事では、こんな疑問にお答えします。 こんにちは、東京・神奈川のチョコレート教室... こんにちは、ショコラティエのきょうこです。 食レポを書くときやごはんの感想を言うとき、すぐに「美味しい!」と言っていませんか? もちろんそれ... 【welcart(ウェルカート)導入に向けて】その前にやっておくと良い5つのこと!, 5 ウェルカート導入に向けて5、商品写真として載せたい画像のファイル名を変えておこう. ひと目でお店とわかるのがいいですね!, この.shopドメインは、調べた限りですとムームードメインでのみ取得が可能のようです。, 私の場合は既にkyonchoco-wine.comを持っているので、.shopのために新規契約、取得料や維持費を支払わなくてはいけなくなります。二重費用になってしまいます。, これからドメインを取る人はこちらでもいいですが、ムームードメインで取得したものをロリポップ以外のサーバーで使う場合、手動の設定が必要になります。, 複雑な設定ではないけれど、ロリポップなら簡単につなげられるって仕組みになっています。, では後者の【今持っているドメインの前にshop.をつけて取得する】というのはどうでしょう。, 「いつも心にがみたかさん」のブログで知ったのですが、自分のドメインの中に子ドメインを作れるんです。, ただし、こちらは独自ドメインの前に何か文字列をつけるのみとなります。 ご理解いただければと思います。, 商品グリッドのレイアウト変更についてですが、 Welcart Basic 内にある「sidebar-home.php」が該当のテンプレートとなります。, 返信をありがとうございます。 #ボンボンショコラ #チョコレート教室, ◆ID検索でも友だち追加できます→ @kyonchoco で検索すると出てきます(^^), ワードプレスの無料プラグインWelcartを使うことにした!デメリットある?【ウェルカート】, 【実況】マジ増えた!