Welthemes

Theme for Wordpress + Welcart

テーマのご利用ありがとうございます。

ここでは、当テーマを利用する場合に必要な設定方法のみを解説しています。Wordpressのインストール、Welcartそのものの動作や機能についてはそれぞれのサイトのドキュメントが便利です。

Wordpress本体の設定マニュアル・タグ：WordPress Codex 日本語版
Welcartのインストール、設定、使い方：Welcart 公式オンラインマニュアル

Wordpressは準備できているという前提で、Welcartのインストールから初期設定、テーマカスタマイズまで解説します。想定所要時間は15分〜30分です。

このマニュアルは、WordPressやWelcartのアップデートに合わせ随時内容を更新していきます。

Welcartの準備

Welcartのインストールに従ってWelcartプラグインをインストールします。

ショッピングサイトとしての基本的な準備

どんなテーマを利用するかに関わらず、まずはショップとしての基本設定を行なってください。

Welcart公式マニュアル「準備最初にすべきこと」

基本設定には店舗情報、支払い方法、クレジット決済設定、配送設定、メール設定などがあります。少なくとも基本設定と配送設定だけ設定があれば、ショッピング機能が動作するようになります。その他まだ確定していない情報についても、設定欄だけ確認しておくと便利です。デフォルトテーマでショッピングサイトの動作が確認できたら、テーマを変更しましょう！

テーマのインストール

親テーマ「welcart_default」の確認

/wp-content/themes/　の中に「welcart_default」があるかどうか確認します。

2020年10月現在、Welcartプラグインをインストールしても専用テーマは自動的にインストールされないようになりました。
インストール済みのプラグインフォルダ（/wp-content/plugins/usc-e-shop/theme/ の中　）あるいは、こちらからダウンロードしたプラグインフォルダの中に、テーマ「welcart_default」がありますので、このテーマフォルダを /wp-content/themes/ の中にアップロードしてください。

2022年7月25日リリースのWelcart2.7より「welcart_default」の配布が終了しておりますが、それ以前よりご利用の方はそのままご利用いただけます。

管理パネルの「外観」から”Welcart Default Theme”を有効化します。

サイトデザインが右のようなものになれば、インストールは完了です。

テーマファイルをアップロード

Welthemesからダウンロードしたテーマフォルダを /wp-content/themes/ ディレクトリに解凍したテーマフォルダをアップロードします。あるいは、zipファイルのまま管理画面の「テーマのアップロード」からインストールします。

アップロードしたテーマが管理画面に現れたら「有効化」をクリックします。

不要なデフォルトCSSを無効にする

Wordpress管理画面　> Welcart Shop > システム設定 > usces_cart.css の無効化 という所にチェックを入れ、ページ下部の「設定を更新」をクリックして完了です。

usces_cart.cssとは、Welcartのデフォルトテーマの一部で主にカート画面やメンバー画面を管理しているスタイルシートです。テーマファイルよりも後に読み込まれるようになっているため、テーマでいくらデザインしても書き換えられてしまいます。システム側で無効にできるようになっているので、デザインをカスタマイズしたい場合は必ず無効にしておきましょう！

メディアサイズの設定

Wordpress管理画面　> 設定 > メディア > サムネイルを実寸法にトリミングする のチェックを外し、サムネイルサイズを230にして変更を保存します。

これは、高さと幅をこのテーマに合わせ、サムネイルが意図しない場所でトリミングされてしまわないようにする設定です。もしサムネイルサイズだけをご自分でカスタマイズしたり、トリミングされた方が都合が良い場合などは自由に変更して頂いて構いません。

デザインの確認

サイトを表示させてデザインが変更されていれば完了です。

カテゴリー設定（商品管理用とブログ用を作成する）

商品カテゴリーの作成

Wordpress管理画面　> 投稿　> カテゴリー　へ移動します。

Welcartのカテゴリー構成にあるように、Welcart では商品データを「商品（item）」というカテゴリーで括っています。商品の配下には「お勧め商品（itemreco）」、「新着商品（itemnew）」、「商品ジャンル（itemgenre）」というカテゴリーがあります。
商品をさらに細かいカテゴリーに分けたい場合は「商品ジャンル」の配下にジャンルカテゴリーを作っていくことになります。

例えば「インテリア」「キッチンツール」「ステーショナリー」という商品カテゴリーがある場合、それぞれを新規に作成し「親」として「商品ジャンル」を指定します。

商品登録の際、設定した子カテゴリーだけでなく、親となる「商品」にもチェックを入れてください。

ブログ用のカテゴリー作成

Welcartでは、商品それぞれも１つの投稿として扱われるという特徴があるため、ブログを書く場合はブログ記事と明確に分類する必要があります。

初期設定カテゴリーでは商品に関するものしか作成されていないので、ここで「ブログ」というカテゴリーを作成しておきます。スラッグは「blog」としてください。「親」はなしで独立したカテゴリーとして管理します。

ここまでの設定で、ひとまず商品情報の登録や商品画像のアップロードを始めても大丈夫です。1つ2つの商品をアップして確認してみてください。

固定ページ作成（必要となるページを作成する）

ブログトップページの作成（ブログがある場合は必須）

Welcartのデフォルト状態では、ブログトップページというものがありません。お知らせの文章だけが唐突に表示されるという形式になっています。ショッピングサイトとブログを分かりやすく共存させるため、ブログトップページを作成します。

Wordpress管理画面　> 固定ページ　> 新規作成　で「ブログ」という名前のページを作成します（このタイトルは自由なもので構いません）。本文は空欄のまま、右側にあるページ属性を「BLOG TOP」に設定します。そして公開をクリックして完了です。

特定商取引法ページの作成（必須）

Wordpress管理画面　> 固定ページ　> 新規作成　で「特定商取引法に基づく表記」という名前のページを作成します。本文は空欄のまま、右側にあるページ属性を「LEGAL INFO」に設定します。そして公開をクリックします。

販売業者名、所在地等はシステム設定で入力したものが自動的に反映されます。その他の項目を編集するには、テーマファイルの中の「page_legal.php」を直接編集します。

ご利用ガイド（必要であれば）

特定商取引法ページと同じように、ご利用ガイドも一般的な雛形を用意しています。

Wordpress管理画面　> 固定ページ　> 新規作成　で「ご利用ガイド」というページを作成し、右側にあるページ属性を「SHOPPING GUIDE」に設定します。中身はテーマファイルの中の「page_guide.php」を直接編集します。

お問い合わせフォーム（必要であれば）

Welcartにシンプルなお問い合わせフォーム機能が搭載されています。

Wordpress管理画面　> 固定ページ　> 新規作成　で「お問い合わせ」というページを作成し、右側にあるページ属性を「INQUIRY」に設定します。

Welcartで用意されているのは名前、メールアドレス、内容のみのシンプルなフォームとなります。もしより複雑なフォームが必要であればお好みのプラグインをご利用ください。

その他

その他、「お店の紹介」「ご利用ガイド（お支払い方法、配送料）」を自分で作成したい場合などがあれば自由に作成してください。ページ属性を「なし」とすることで本文欄に入力したものが反映されます。

もし原稿が用意できていなくても、最初にタイトルだけでページ作成しておくと整理しやすくなります。

ナビゲーション設定（好きな項目だけを並べる）

ここまでの状態で、サイトには多くのナビゲーションが並んでいると思います。これを必要なものだけ選んだ最低限のナビゲーションにします。

Wordpress管理画面　> 外観　> メニュー　に進み、「メニューの名前」に「mainnavi」など適当な名前を入力し「メニューを作成」をクリックします。（※1）
左側に固定ページやカテゴリーの名前が出ていますので、必要なものにチェックを入れて「メニューに追加」をクリックすると、左側にある先ほど作成した mainnavi に追加されていきます。

メインメニューに商品カテゴリーを並べることもできますし、「ご利用ガイド」や「ブログ」といった固定ページを並べてるのも良いでしょう。ポイントは商品カテゴリーや固定ページを混在させず、情報を体系的にしっかりと分けることです。商品カテゴリー数が３個、４個とあるのであればサイドエリアに縦方向にリストした方がよいでしょう。次の項でサイドエリアについて開設します。

２カラム（商品カテゴリーをサイドバーに並べるタイプ）

２カラムレイアウトでサイドバーに商品カテゴリー名を並べる場合、予めサイドバーに商品カテゴリーが表示されるようになっています。または、「外観 > ウィジェット」にある「Welcart カテゴリー」を利用することでも同じ効果が得られます。
例）minimum のサンプル

商品カテゴリーはあまり細分化しても探しづらくなってしまいます。カテゴリーごとに商品が数個しか表示されないより、おおまかに分類してそれぞれのカテゴリー画面で出来るだけ多くの商品を一覧できるようにした方が探しやすい場合が多いです。

１カラム（商品カテゴリーをヘッダーナビに収納するタイプ）

サイドバーを持たないテーマの場合、ヘッダーナビの１つに商品カテゴリーを収納しドロップダウンで表示するのがよいでしょう。例えば「PRODUCTS」という項目の入れ子として各商品カテゴリー群を入れておくことで、マウスを乗せた時に全てのカテゴリーが表示されます。
例） Novel のサンプル

このレイアウトの場合は、ヘッダーナビにその他の情報ページも全てまとめることになるので、出来るだけ入れ子構造を活用してシンプルにしましょう。あまりに項目が多いと横幅の狭い画面では表示が崩れてしまうことがあります。

※1：レスポンシブでメニューが収納式になっているテーマ（Hipster, Novel等）では、responsive.cssにてメニュー名をクラス名として利用していますので、メニュー名は「ItemNav」としてください。

トップページ設定（トップページにお勧め商品を表示する）

トップページにはカテゴリー「お勧め商品」に属する商品が表示されます。（「お勧め商品」というカテゴリーはWelcartインストール時に自動生成されるカテゴリーです。）

トップページで一番に見せたい商品について、商品登録画面のカテゴリー欄で「お勧め商品」にチェックを入れて保存します。レイアウト上、3件、6件が綺麗に表示されます。

初期状態では最大8件までとなっています。変更する場合、home.php を開き「posts_per_page'=>8」という部分を探してみてください。この数字が最大件数となります。

「お勧め商品（itemreco）」ではないカテゴリーをトップページ表示させたい場合、home.phpの「'category_name'=>'itemreco'」という部分を、変更したいカテゴリーのスラッグ名に変更します。

ウィジェット設定（サイドエリアを活用する）

Welthemesのテーマでは、初期設定には商品カテゴリーで設定した「商品カテゴリーの一覧」と「最近のブログ記事」のみを表示するようにしています。

Wordpress管理画面　> 外観　> ウィジェット　に進むと、左側にはいろいろなウィジェットが用意されています。これを右側「全体のサイドバー」にドラッグ&ドロップすることで、好みの機能を利用することができます。

Welcartでは、Home Left, Home Right, Other Left, Cart MemberLeft　というように左右に、またページ毎にウィジェット内容を別管理する仕様になっています。左右両側にサイドバーがあり商品エリアが狭くなってしまう３カラムレイアウトを廃止するのはもちろん、ページ毎に表示内容が変わるのも、ページを訪れた人を混乱させてしまうため、Welthemesでは「Home Left」のみを利用可能にしています。（Welcartの設定に干渉しすぎないようにするためウィジェット枠はあえて残したままになっています）

初期状態ではテーマのコンセプトに合わせたウィジェットをセレクトしています。１つでも右側に設置すると、デフォルト設定を無視してあなたの設定を適用するようになります。右側から全て取り除けば初期状態に戻ります。

サイドエリアはシンプルに

Welcartでは、ウィジェットに沢山の機能が用意されています。例えば

おすすめ商品
カレンダー
ベストセラー
会員ログイン

などなど。あったらあったで便利なような気がする機能ばかりですが、とことんシンプルにすることをオススメします。視界に余計なものがないほど商品写真や文章が浮き出てきますし、その場の雰囲気が出てくるからです。チラシやセール情報が張り巡らされたお店も売る物によっては良いかもしれませんが、上質な空間でモノ選びを楽しめるショップ作りは、オンラインでも伝わってくるものです。

テーマカスタマイザーを使う

このテーマは、管理画面から出来上がりを確認しながらデザイン調整できるテーマカスタマイザーに対応しています！
Wordpress管理画面　> 外観　>　現在のテーマの所にある「カスタマイズ」　をクリックするとテーマカスタマイズモードになります。

サイトタイトルとキャッチフレーズ

Wordpress本体での設定と連動しています。ここを変更するとお店名、サイト内の全てのタイトルが置き換わります。

タイトルをショップのロゴ画像にする

テキストでは物足りませんか？デザインされたロゴをお持ちの場合、ここから簡単にロゴをアップロードすることができます。新規アップロードを選び、点線の枠内に画像ファイルをドラッグアンドドロップしてください。右側のプレビューで表示を確認して「公開して保存」をクリックします。サイズがフィットしない場合は画像の縦横サイズを調整します。

背景の色を変える

背景の色をパレットから自由に変更できます。テキストや色付けされたパーツはテーマに沿って色付けされていますので、見やすさも注意して変更してください。

右側のプレビューで表示を確認して「公開して保存」をクリックします。サイズがフィットしない場合は画像の縦横サイズを調整します。

トップページのヘッダー写真を変える

トップページヘッダー写真は、Wordpress管理画面　> 外観　>　ヘッダー 　からアップロードできます。縦横比の違う写真をアップロードしても、その場で切り抜きをして保存することができます。また、複数の画像をアップロードしておき、「ランダム」を設定しておくと読み込みごとにランダムに表示されます。（複数ある場合にスライドギャラリーにする方法について、次の項で解説します）

テーマカスタマイズモードでは、既にアップロードされた写真を選びながら、ワンクリックで切り替えることができます。テーマごとに適切なヘッダーサイズを指定してありますが、もしサイズを変更したい場合、テーマファイル「function.php」にてサイズ指定している箇所がありますのでそこを変更してください。

ワンポイント

トップページの大きな写真は、ショップのイメージに直結します。写真にこだわり、また文字を入れる場合は慎重にデザインしましょう！

背景をテクスチャ画像にする

ベタ塗りの背景ではなく、模様などのテクスチャ画像を設定することができます。

背景用のテクスチャイメージを配布しているサイト（Subtle Patternsなど）から画像をダウンロードし、こちらでアップロードしながら試してみてください。

その他

テーマ「Walden」のカスタマイズについて

「ナビゲーション」は既に前項で設定済み、「固定フロントページ」はWelcartでは利用しません。

おすすめカスタマイズ

トップの画像をスライドギャラリーにする（minimum等の場合）

トップページのヘッダー写真を複数アップロードし、ランダムに設定します。

そして、テーマファイルの中の home.php の中にある topbanner のソースを以下のものに入れ替えます。（初期状態では home.php 内にコメントアウトした状態で用意してあります。どちらかが不要であれば削除してください。）

 



<?php
$headers = get_uploaded_header_images();
$active = ' active';
foreach ( $headers as $header ) {
    echo '';
    $active = '';
}
?>

そして、Wordpress管理画面　> 外観　> ヘッダー　から用意した画像をアップロードします。（選択した画像がどんなサイズでも、テーマにちょうどいいサイズにクロップする機能が付いています。）ここでアップロードした画像が全てスライドギャラリーとして表示されます。

アップロードした複数のヘッダー画像がフェードインフェードアウトで自動的に切り替わるようになります。これは、商品詳細ページで使用している JavaScript ライブラリを呼び出して流用しているため、新たにスライド用のライブラリを用意する必要はありません。

トップの画像をスライドギャラリーにする（Hipsterの場合）

「Hipster」など、デモサイトなどで最初からスライドギャラリーとなっているテーマではこのカスタマイズは不要です。

静止画にしたい場合はヘッダー画像を１つだけ、スライドギャラリーにしたい場合は複数アップロードしていってください。

商品が１つ以上登録されていないとヘッダー画像が表示されません。

ヘッダーサイズの変更

テーマのレイアウトによって、デフォルトヘッダーの縦横サイズを決めています。横幅はレイアウトで決まってきますが、高さはお好みで替えることもできます。テーマファイル function.php の28行目で指定していますのでもし必要であれば調整してください。※変更後にアップロードした画像から適用されます。

カテゴリーごとにヘッダー画像を表示させる

商品カテゴリーごとに専用ヘッダー画像があると、商品を探す時によりワクワクしながら見て回れるようなサイトになります。ここではプラグインを使って簡単にカテゴリー画像を設定する方法を解説します。

Wordpress管理画面　> プラグイン　> 新規追加　からTaxonomy Images II （作成者 Simon Wheatley ）というプラグインを検索してインストールします。
Wordpress管理画面　> 設定　にある「Category Images II 」に移動し、幅（Maximum side dimension of thumbnail）を750にし、「カテゴリー」にチェックを入れいます。幅設定については、レスポンシブ対応テーマでは自動的に小さく表示しますので、最大値という意味合いで設定しておきます。
Wordpress管理画面　> 投稿　> カテゴリー　> 商品ジャンルに設定したカテゴリー名　をクリックすると、画像をアップロードする項目が出来ています。ここで作成したヘッダー画像をアップロードします。
テーマファイルの「archilve.php」の、ヘッダー画像を表示させたい場所に次のタグを挿入します。
```
 
		 
```
カテゴリーページを確認して、アップロードした画像が表示されていれば完了です。

高さは値で指定してていませんので、各カテゴリーヘッダー画像を作成する時点で統一すると綺麗に見えます。

2013年9月現在「Category Images II 」は2年以上更新されていないプラグインとなっています。今後WordPressのアップデートによって動作しない可能性があります。カテゴリー画像を設定するプラグインはその他いろいろありますので、お好みで選定しご利用ください。

商品一覧やブログページでの最大表示件数を設定する

一覧ページでは、設定した件数を超えるとページ分割されページ送りナビゲーションが付くようになっています。商品一覧、ブログ記事一覧それぞれで最大件数を分けて設定できます。

商品一覧

Wordpress管理画面　> 設定　> 表示設定　に1ページに表示する最大投稿数という項目があります。これが、商品一覧ページでの最大表示件数です。

ショップの商品数などに合わせて設定してください。

ブログ記事一覧

「page_blog.php」というファイルの23行目付近にある、「posts_per_page=5」というコードを探してみて下さい。この最後にある「5」という数字の部分が１ページ辺りの記事件数です。

例えば、毎日のようにブログを更新する場合は10件くらい表示しておかないとすぐに埋もれてしまいます。1ヶ月に1度のような頻度の場合、10件では10ヶ月前の記事もずっと表示されるようなことになってしまうので、少なめにしておくほうがよいでしょう。

Welcartは投稿データとして商品を登録しているため、ブログ記事と商品との分類をテンプレート上で明確に指定していく必要があります。この部分では、本来は管理画面の設定数がブログにも適用される所、ブログ専用テンプレートで上書き指定しているというイメージです。

以上にて、テーマの設定・テーマカスタマイザーを利用したカスタマイズの解説は完了です。

気に入っていただいたデザイン済みのテーマをご購入頂いている上で、ロゴや背景などを少し調整が完了すれば、既にかなり素敵なオリジナルオンラインストアが出来上がっているのではないでしょうか？

HTMLやCSS、WordpressやWelcartの知識があれば、更にカスタマイズすることも可能です。デフォルトテーマを変えていくのは相当な時間を要する大変な作業ですが、最初から好みに近いテーマをベースであれば楽しい作業になります。自分の手で完成度の高い素敵なショッピングサイトを作りましょう！

ショップオープンまであと少し！運営するための実務的な準備

商品の登録、クレジットカード決済の設定、SSL設定など、オンラインショップが稼動状態になるまではまだまだ大切な作業があります。これらの方法やWelcart 公式オンラインマニュアルにて丁寧な解説がありますので、こちらを参考にしながら少しずつ進めてみてください。

トラブルシューティング

商品画像がそのまま縦に並んでしまう

商品登録時のカテゴリー設定で、「商品」にチェックが入っているか確認してください。

スライドギャラリーなどに利用するjQueryライブラリは、必要な画面のみで読み込むように設定しています。functions.php にて条件分岐の記述があり、初期設定では商品ページかどうかの判断にカテゴリー「item（商品）」を指定しています。
商品登録時のカテゴリー設定で、「商品」にチェックが入っていない場合、この条件分岐から漏れてしまいスライドギャラリーが表示されない場合があります。必ずチェックを入れて頂くか、functions.phpにてご自分の商品カテゴライズに合わせて調整ください。

SSLでエラーが出る

function.php にある「http://」で読み込んでいる部分を全て「https://」に変更してください。

Welcart 1.7 でサイドバーに不具合が出る場合

/themes/welcart_default/ の中にある次の３つのファイルを削除してください

sidebar-home.php
sidebar-other.php
sidebar-cartmember.php

その他、トラブルの時は

Wordpress管理画面　> 外観 > テーマ から、まずはデフォルトテーマに戻してみてください。その状態で同じ問題が出るかどうか試してみてください。もし同じであれば、その原因はWelcartの設定や使い方自体に問題がある可能性が高いです。多くの場合は同じようなトラブル例がネットに共有されていますので、まずは検索して原因を探ってみてください。どうしても分からない時は、Welcartの質問フォーラムなどで聞いてみるのもよいでしょう。