Welcart Paneteria 1.0
ドキュメント
リンク

テーマカスタマイザー

Welcart Paneteria は、Wordpress 標準機能である「テーマカスタマイザー」を使用してカスタマイズすることができます。ここでは、Welcart Paneteria で追加されたオプション機能のみを解説しています。


テーマカスタマイザーは、管理画面 > 外観 > カスタマイズ を選択してください。

拡張された機能

サイト基本情報

theme-customizer-main

サイトタイトル(WordPress標準機能)

WordPressをインストールした際に設定した「サイトタイトル」は、設定→一般のページで編集できますが、テーマカスタマイザーでも変更が可能です。

キャッチフレーズ(WordPress標準機能)

「キャッチフレーズ」もサイトタイトル同様に、設定→一般のページで編集できますが、テーマカスタマイザーでも変更が可能です。

サイトアイコン(WordPress標準機能)

Webアイコン、いわゆるファビコンを登録することができます。

サイトのフォント設定

カスタマイザーで操作できるページ 全ページ
フォント名を選択する

サイト全体のテキスト部のフォントを切り替えることが可能です。「ゴシック体」「明朝体」「丸ゴシック体」からお選びいただけます。
※PCなどに指定のフォント等がインストールされていない場合、異なる表示になる場合もあります。

管理画面フロント
logo-add logo-front
サイトタイトルのフォント

サイトのタイトル部分のフォント(欧文)のみ、本テーマに合わせた、Modak© フォントに切り替えることが可能です。

管理画面フロント
logo-add logo-front

ロゴ画像

カスタマイザーで操作できるページ 全ページ

サイトタイトルをロゴ画像に変更することができます。
ロゴ画像が登録されていない場合は、テキストでサイトタイトルが表示されます。
※登録の際注意していただくことは、表示される画像の最大高は52ピクセルとなりますので、縦長の画像はお勧めできません。プレビューを見ながら調整してください。

管理画面フロント
logo-add logo-front

ウィジェットカートを表示する

※この項目は、オプションプラグイン「WCEX Widget Cart」がインストールされている場合のみ表示されます。

カスタマイザーで操作できるページ カートアイコンが表示されているページのみ

ヘッダにあるカートアイコン(モバイルの場合はドロワー内)に「WCEX Widget Cart」の機能を適用することが出来ます。ただし、サイドバーなど他のウィジェットエリアなどで使用している場合は重複を避け、適用を外していただくことをおすすめします。

管理画面フロント
logo-add logo-front

フッターに説明文エリア表示

カスタマイザーで操作できるページ 全ページ

フッター部分の左側にサイト名やロゴ画像、テキスト情報を挿入することが可能です。何も登録されていない場合はエリア自体が無くなります。

管理画面フロント
Facebook-add Facebook-front
フッターにサイトタイトルを表示

サイトタイトルの表示非表示の切り替えが可能です。画像が登録されていない場合はテキストで表示されます。また、上記「サイトタイトルのフォント」で Modak© を適用している場合は、こちらにも適用されます。

管理画面フロント
Facebook-add Facebook-front
フッター用ロゴ画像登録

タイトル部分に画像を登録することが可能です。
※登録の際注意していただくことは、背景が暗いので明るい色の画像をお勧めします。また、表示される画像の最大高は48ピクセルとなりますので、縦長の画像はお勧めできません。プレビューを見ながら調整してください。

管理画面フロント
Facebook-add Facebook-front
フッターにサイト説明文を挿入

タイトル下に、住所や営業時間などお店の情報や文言等を挿入することが可能です。テキストボックス内には、HTMLタグを使用することができます。

管理画面フロント
Facebook-add Facebook-front

Welcart Panetteria では、各パーツに割り当てられた1グループ7色からなるカラーバリエーションを選択するスタイルになっています。

custom-color-add

カスタマイザーで操作できるページ 全ページ

カラーバリエーション

「 Monotone(モノトーン)」「Sienna(シエナ)」「Cardinal(カーディナル)」「Verdigris(ヴァーダァグリィス)」「Canaria(カナリア)」「Spray(スプレー)」の6種類のカラーバリエーションと、任意で7色を設定できる「カスタムカラーバリエーション」をご用意しています。

custom-color-add

カスタムカラーバリエーションを適用する際は色の濃さに注意してください。視認性が低くなる可能性がありますので、下表の参考濃度に近い割合で設定していただくことをおすすめします。

カラーバリエーション
色番適用箇所参考濃度
C1ページローディング背景、カート内商品数通知、グローバルナビカレント文字とライン、オプションタグNew、キャンペーンタグ、トップページパブリックリレーションズアイコン、見出しタイトルのライン等、商品詳細説明タイトル、メインボタン、ラジオボタン、ウィジェットパーツ内、その他濃度30%
C2オプションタグHot、サブボタン、商品レビュータイトル、ウィジェットパーツ内、その他濃度50%
C3ヘッダー上部ライン、ヘッダー部テキストサイトタイトル、グローバルナビ文字とライン、トップページキービジュアルキャッチコピー、オプションタグLow、売り切れ背景、トップページカテゴリーリスト背景とボタン、トップページパブリックリレーションズタイトルとライン、フッター背景、フローティング・パレット背景、リンク文字、見出しタイトル、カートボタン、カート内ナビゲーションカレント背景、ドロワーサイドメニュー内アイコン、その他濃度75%
C4グローバルナビテキスト、オプションタグSale、トップページコンテンツ見出し、その他濃度90%
C5カート内通貨背景、ドロワーサイドメニュー背景濃度5%
C6body背景濃度10%
C7カート内ナビゲーション背景濃度15%

ヘッダー画像のビデオ設定

Welcart Panetteria では、ヘッダー画像(メインビジュアル)エリアに自前のMP4ビデオやYouTubeビデオを表示することができます。

theme option theme option
カスタマイザーで操作できるページ トップページ

※デフォルトでは「表示しない」が選ばれており、その場合、通常のヘッダー画像が適用されています。

MP4動画を適用

ヘッダー画像エリアに動画を表示から「MP4動画を適用」をクリックしますと、「MP4動画のアップロード」のパネルが現れます。

theme option

MP4動画のアップロード

「ファイルを選択」からお持ちの動画をアップロードもしくは、選択してください。最大約10MBのMP4動画をお勧めします。

管理画面フロント
page-loading-add page-loading-front
コントローラの表示

動画に、再生、ストップ、音量、拡大、ダウンロード、ピクチャーインピクチャーなどのボタンとタイムラインが表示されます。プルダウンより「表示する」「隠す」が選択できます。表示条件は、自動再生を停止にする必要があります。

管理画面フロント
page-loading-add page-loading-front
自動再生の有効化

動画を自動再生させることができます。プルダウンより「自動再生」「停止」が選択できます。自動再生の条件としては、ミュートをONにする必要があります。

ミュートのON/OFF

プルダウンより「ミュートする(ON)」「ミュートしない(OFF)」が選択できます。

ループ再生の有効化

動画を自動で繰り返し再生させることができます。プルダウンより「ループする」「停止」が選択できます。

スタート画面の画像設定

動画に静止画を表示することができます。設定した画像は動画が再生された時点で消え、一時停止しても再度表示されることはありません。「画像を選択」から画像をアップロードもしくは、メディアから画像を選択してください。

管理画面フロント
page-loading-add page-loading-front
インライン再生の有効化

スマートフォンで Webサイトページに埋め込まれている動画を再生しようとすると、強制的に全画面表示になってしまう動作をその場で再生可能にするのがインライン再生です。プルダウンより「有効にする」「停止」が選択できます。有効化するには、自動再生とミュートをONにする必要があります。

管理画面フロント
page-loading-add page-loading-front
ビデオ読み込み設定選択

サイトを読み込む際に、事前に動画ファイルを読み込ませるかを指定します。プルダウンより「なし」「メタデータ」「自動」が選択できます。

なし事前のファイルの読み込みを禁止
メタデータ長さやファイルサイズなどのメタ情報(動画の情報)だけを読み込む
自動初期値:動画ファイルを事前にダウンロードする
ブラックスクリーン配置

拡大表示の際、動画の劣化をアミ掛け処理を行い目立たないようにする効果を持たせます。プルダウンより「しない」「する」が選択できます。なお、ブラックスクリーンを配置することによりコントローラの操作ができなくなります。

管理画面フロント
page-loading-add page-loading-front

YouTube 動画を適用

ヘッダー画像エリアに動画を表示から「YouTube 動画を適用」をクリックしますと、「YouTube 動画を適用」のパネルが現れます。

theme option

※動画は自動再生、自動ループとなります。
※コントロールバーを非表示に設定しております。
※再生直後、動画の上部と右下にロゴマーク等の情報が表示されます。

YouTube ID

テキストボックスに、YouTube の ID名を挿入します。
ID名は動画URL「https://www.youtube.com/watch?v=○○○○○」末尾、○○○○○の部分にあたります。

管理画面フロント
page-loading-add page-loading-front
ループ再生の有効化

動画を自動で繰り返し再生させることができます。プルダウンより「ループする」「停止」が選択できます。

音量の選択

プルダウンより「無音」「最大音」が選択できます。

ブラックスクリーン配置

拡大表示の際、動画の劣化をアミ掛け処理を行い目立たないようにする効果を持たせます。プルダウンより「しない」「する」が選択できます。なお、ブラックスクリーンを配置することにより再再生の操作ができなくなります。

管理画面フロント
page-loading-add page-loading-front

SNS ボタン設置

各SNSの設定を行なうことで、ヘッダーまたはフッターエリアにアイコンマークを表示させる事ができます。

SNS Button

カスタマイザーで操作できるページ 全ページ

各種SNSマークの表示

こちらは指定したリンク先ページを表示させる機能になります。

Facebookの表示

表示する場合はチェックを入れFacebookページ名を入力してください。
【例】https://www.facebook.com/page-name/

管理画面フロント
SNS Button SNS Button
Twitterの表示

表示する場合はチェックを入れユーザー名を入力してください。
【例】https://twitter.com/user-name/

管理画面フロント
SNS Button SNS Button
Instagramの表示

表示する場合はチェックを入れユーザー名を入力してください。
【例】https://www.instagram.com/user-name/

管理画面フロント
SNS Button SNS Button
YouTubeのチャンネル表示

表示する場合はチェックを入れディレクトリ名を入力してください。
【例】https://www.youtube.com/channel/directory-name/

管理画面フロント
SNS Button SNS Button
LINE@のシェアボタン表示

表示する場合はチェックを入れサイトのURLを入力してください。
【例】https://www.welcart.com/

管理画面フロント
SNS Button SNS Button

SNSアイコンの表示位置

ヘッダーまたはフッターにアイコンボタンの表示位置を切り替えることができます。プルダウンより「ヘッダーに表示する」「フッターに表示する」が選択できます。

管理画面フロント
SNS Button ヘッダー部/フッター部
SNS Button

フロントページ設定

フロントページに設定可能なカスタマイザーです。なお、Wordpress管理画面の
設定 > 表示設定 > ホームページの表示 > 最新の投稿
が選択されている場合にのみ有効になります。

Front Page

カスタマイザーで操作できるページ フロントページ

商品一覧カテゴリー

特定のカテゴリーに属する商品の一覧を表示することができます。

管理画面フロント
Front Page Front Page
商品一覧の表示

商品一覧自体の表示非表示が可能です。

表示する特定カテゴリの選択

Welcart が用意している「商品」カテゴリーを親に持つサブカテゴリーがプルダウンメニューに表示されます。その内の1つを選択することができます。

カテゴリータイトルの表示

「表示する特定カテゴリの選択」で選んだカテゴリー名の表示非表示ができます。

商品一覧表示件数

商品の表示件数を入力することができます。

スライダーの実装

商品一覧をスライド形式で表示することができます。

ブログ記事一覧

特定のカテゴリーに属する記事の一覧を表示することができます。

管理画面フロント
Front Page Front Page
記事一覧の表示

ブログ記事一覧自体の表示非表示が可能です。

表示する特定カテゴリの選択

Welcart が用意しているカテゴリー以外のカテゴリーおよび、それを親に持つサブカテゴリーがプルダウンメニューに表示されます。その内の1つを選択することができます。

記事一覧表示件数

ブログ記事の表示件数を入力することができます。

イメージ画像

ブログ記事一覧の右下に画像を表示することができます。画像が登録されていない場合は表示されません。
※最適な画像サイズは800×830ピクセルですが、プレビューを見ながら調整してください。ウインドウサイズによって右側の切れ具合が変わるため注意してください。

上部、中央部、下部 パブリックリレーションズ(PR)エリア

内部のコンテンツをトップページコンテンツ上部、中央部、下部の3箇所でアピールし誘導を促します。設定できる記事の対象は固定ページとなります。
また、表示される内容は、固定ページのタイトル、アイキャッチ画像、抜粋のテキストです。

管理画面フロント
Front Page Front Page
パブリックリレーションズの表示

パブリックリレーションズエリアの表示非表示ができます。
※上部、中央部、下部の3箇所それぞれで設定が可能です。

表示する固定ページの選択

存在する固定ページからプルダウンメニューで選択します。
※上部、中央部、下部の3箇所それぞれで設定が可能です。

アイキャッチ画像の配置

固定ページに登録されたアイキャッチ画像の配置(PCでは左右、スマホなどでは上下)を選択することができます。
※上部、中央部、下部の3箇所それぞれで設定が可能です。

タイトルや背景色の変更

「タイトルとアイコン」「文章」「背景」の色が任意で変更できます。
※上部、中央部、下部の3箇所それぞれで設定が可能です。

投稿方法

表示させたい固定ページを開き、「タイトル」「アイキャッチ」「抜粋」を設定してください。

Front Page

Front Page

テーマオプション

ページ共通のカスタマイザーです。

theme option

カスタマイザーで操作できるページ 全ページ

ページローダーの表示

ページ読み込み時にローディング機能を実装することができます。

管理画面フロント
Instagram-add Instagram-front

ヘッダーの固定

ヘッダーのナビゲーションを固定(追従)で表示することができます。

管理画面フロント
Instagram-add Instagram-front

フローティング・パレット

フッターにフローティングウィジェットを固定(追従)で表示することができます。

管理画面フロント
Instagram-add Instagram-front

内容の登録は、
外観 > ウィジェット > フッターウィジェット
にウィジェットを挿入します。
フローティング・パレットを実装していない場合は、通常のウィジェットとして機能します。

Instagram-add Instagram-front

フローティング・パレットにはクローズボタンが付いており、クリックすると隠すことができます。また、オープンボタンが常駐しますので、クリックして再度表示させることも可能です。

Instagram-add Instagram-front

背景画像

ページの背景に固定のイメージを設置することができます。
※ファイルサイズの大きい画像を適用しますと、サイト自体に影響し、表示スピード低下に繋がることもありますので十分にご注意ください。
※また、V1.0.3において、画像が表示されない不具合があります。簡易的な解決方法としまして、同じテーマオプションにあります、「404エラーページ画像」で一度画像を登録していただくと、背景画像も表示されます。

管理画面フロント
header-fixed-add header-fixed-front
イメージのアップロード

「画像を選択」から画像をアップロードもしくは、メディアから画像を選択してください。

背景画像を動かす

「背景画像を動かす」にチェックを入れると、設置した背景画像がズームイン、ズームアウトします。
※PCなどのデバイスに負荷がかかる場合もありますので実装は十分にご注意ください。

コンテンツ上部の装飾変更

管理画面フロント
header-fixed-add header-fixed-front
画像のアップロード

「画像を選択」から画像をアップロードもしくは、メディアから画像を選択してください。ファイルは単色のSVGをお勧めします。
※SVGファイルは設定部のプレビュー、メディアでのサムネイル表示はされません。

管理画面フロント
sidebar-add sidebar-front
装飾とコンテンツの背景色

装飾画像をSVGでアップした場合、装飾とコンテンツ部の背景色をカラーピッカーにより変更することができます。

管理画面フロント
sidebar-add sidebar-front

ページスクロール画像

ページスクロールの画像を変更することが可能です。また、PC時やスマホ時での表示非表示を設定することもできます。

管理画面フロント
sidebar-add sidebar-front
画像のアップロード

「画像を選択」から画像をアップロードもしくは、メディアから画像を選択してください。
※画像には透過が可能な、48×48ピクセルのSVGまたはPNGファイルが適しています。

表示切り替え

プルダウンにより「全て」「PCのみ」「PC以外」「表示しない」から選択することができます。

404エラーページ画像

カスタマイザーで操作できるページ 404 エラー ページ

Not Found ページに画像を設置することができます。登録されていない場合は画像のみ表示されません。
※設定した画像をプレビューするには、Not Found ページを表示させる必要があります。

管理画面フロント
sidebar-add sidebar-front

商品ブロック内の表示

カスタマイザーで操作できるページ トップ / カテゴリー / 検索結果 ページ
売り切れの表示

商品売り切れ時の「売り切れ 問い合わせる」の表示
※設定した項目をプレビューするには、売り切れ商品を登録する必要があります。

管理画面フロント
sidebar-add sidebar-front
商品ステータスの表示

グリッド内に商品ステータスのタグを表示することができます。このタグは、商品一覧と、商品詳細ページにも同じように表示されます。
※設定した項目をプレビューするには、下記項目に該当する商品を登録する必要があります。

管理画面フロント
sidebar-add sidebar-front

※表示項目は New Hot Low sale の4種類になります。

new / 商品カテゴリー「新着商品(itemnew)」が適用されている商品に表示されます。

hot / 商品カテゴリー「お勧め商品(itemreco)」が適用されている商品に表示されます。

Low / 在庫状態が「在庫僅少」になっている場合に表示されます。
    SKUが複数ある場合は、一つでも在庫僅少のものが有ればこのタグが表示されます。

sale / セール(キャンペーン)期間中の対象商品に表示されます。

※セール(キャンペーン)対象商品の設定については、こちらをご覧ください。
※キャンペーン・スケジュールの設定は、こちらをご覧ください。

カートボタンの文言

※この項目を表示するには、カスタマイザーのプレビュー画面から商品詳細ページへ遷移してください。

カスタマイザーで操作できるページ 商品詳細ページ

カート投入ボタンのラベルを変更することができます。初期状態は「カートに入れる」になっています。

管理画面フロント
information-add information-front

在庫状況表示

※この項目を表示するには、カスタマイザーのプレビュー画面から商品詳細ページへ遷移してください。

カスタマイザーで操作できるページ 商品詳細ページ

商品の在庫状態を表示することができます。

管理画面フロント
topics-add topics-front

商品お問い合わせボタン

※この項目を表示するには、カスタマイザーのプレビュー画面から商品詳細ページへ遷移してください。

カスタマイザーで操作できるページ 商品詳細ページ
お問い合わせボタンの表示

商品に関するお問い合わせボタンの表示非表示が可能です。
※設定した項目をプレビューするには、売り切れ商品を登録する必要があります。

管理画面フロント
information-add information-front

カート投入ボタンは通常、売り切れになるとボタンが消え「只今お取り扱いできません」というメッセージが表示されます。 このオプションを適用する事で、売り切れメッセージを「お問い合わせ」ボタンにすることができます。 お問い合わせボタンを表示する場合は、セレクトボックスからリンク先の固定ページを選択してください。お問い合わせボタンのラベルも変更することができます。

Contact Form 7 との連携

お問い合わせボタンのリンク先を、Contact Form 7 で作成したお問い合わせページに設定することで、お問い合わせボタンから問い合わせいただいたメールに限り「商品名」が自動的にメール本文に追加される仕様になっております。

contactform-mail

Contact Form 7 とは

Contact Form 7 プラグインとは、サイトを観覧されているユーザーがお問い合わせを行なう場合に使用するメールフォームを簡単に作成できるプラグインです。使い方はこちらを参照ください。

売り切れ時の文言

※この項目を表示するには、カスタマイザーのプレビュー画面から商品詳細ページへ遷移してください。

カスタマイザーで操作できるページ 商品詳細ページ

通常売り切れ時に表示される文言を編集できます。
※設定した項目をプレビューするには、売り切れ商品を登録する必要があります。
※「商品お問い合わせボタン」が有効になっている場合は反映されません。

管理画面フロント
information-add information-front

商品レビュー表示

※この項目を表示するには、カスタマイザーのプレビュー画面から商品詳細ページへ遷移してください。

カスタマイザーで操作できるページ 商品詳細ページ

商品詳細説明エリアにタブ切り替えにより、商品レビューを表示することができます。

管理画面フロント
information-add information-front

商品レビュー機能について

商品レビュー機能は、会員にログインしている場合にのみレビューを書きこむことができる様になります。会員システムを利用していないサイトでは、レビュー機能はご利用いただけません。
以下の手順に沿って設定ください。

1ディスカッション設定

レビュー機能は、WordPress コメント機能を利用しています。レビュー機能を使用する場合は、管理画面「設定」のディスカッション画面より、コメントに関する設定を行なう必要があります。

管理画面 > 設定 > ディスカッション設定
以下を参考に設定ください。

review-front

他のコメント設定
項目 説明
コメントの投稿者の名前とメールアドレスの入力を必須にする レビュー機能では、名前とメールアドレスを入力する箇所はございませんので、チェックを外してください。チェックした状態でレビューを送信するとエラーが発生します。
ユーザー登録してログインしたユーザーのみコメントをつけられるようにする こちらのユーザーに関しては、Welcart会員の事ではございませんので、チェックを外してください。

2商品情報編集画面 / 新規商品追加画面

item-page

商品情報編集画面または新規商品追加画面から、ディスカッションボックス「コメントの投稿を許可する。」にチェックを入れてください。
※ディスカッションボックスが表示されていない場合は、画面右上の「表示オプション」から「ディスカッション」にチェックを入れてください。

3テーマカスタマイザー

最後に、テーマカスタマイザーから商品詳細ページを表示して「テーマオプション」メニューの「商品レビューを表示する」にチェックを入れてください。

レビュー機能の表示画面について

テーマカスタマイザーのプレビュー画面では、レビュー機能を正常に確認することができません。実際のレビュー機能の表示画面を確認する場合は、WordPressの管理画面をログアウトして、フロントの方でご確認ください。

管理者のニックネームを変更したい場合

レビュー欄のユーザー名をニックネームに変更する場合は、管理画面 > ユーザーから編集画面に入っていただき、「ブログ上の表示名」をニックネームに変更してください。

「買い物を続ける」ボタンのリンク先

※この項目を表示するには、カスタマイザーのプレビュー画面からカートページへ遷移してください。

カスタマイザーで操作できるページ カートページ
リンク先の変更

カートページに表示される「買い物を続ける」ボタンは、通常商品詳細ページへのリンクとなっています。このリンク先を自由にに変更することができます。

「リンク先を変更する」にチェックを入れ、「リンク先のURL」に遷移先のURLを http:// または、https:// から入力してください。URLが空白だった場合トップページへ遷移します。

管理画面 フロント
cart-page-link-add cart-page-link-front

サイドバーレイアウト設定

カスタマイザーで操作できるページ 商品一覧ページ、商品詳細ページ、記事一覧ページ、記事詳細ページ、固定ページ、検索結果ページ、404エラーページ

※商品一覧ページの場合、カテゴリーにスラッグの item (商品)が選択されているかを判断しますので、商品登録の際、必ず「item」をチェックしてください。

theme-customizer-main

サイドバーを簡単に表示させることができます。表示されるサイドバーの内容は下記の通りです。

サイドバー1 商品一覧ページ、商品詳細ページ、検索結果ページ
サイドバー2 記事一覧ページ、記事詳細ページ、固定ページ、404エラーページ

サイドバーを設置したいページを選択

チェックボックスにチェックを入れたページにサイドバーが設置されます。
※この項目を表示するには、カスタマイザーのプレビュー画面から各ページへ遷移してください。

管理画面 フロント
cart-page-link-add cart-page-link-front

サイドバーの位置設定

上記で選ばれたサイドバーの位置(左右)を設定することができます。

管理画面 フロント
cart-page-link-add cart-page-link-front