ECpress テーマ・ECP2シリーズの設定マニュアル


 こちらのマニュアルでは、「ECP2シリーズ」の共通マニュアルです。弊社「ECP2シリーズ」テンプレートを使って、当サイトで紹介しておりますデモサイトと同じ状態まで設定する場合の方法をご紹介しております。

当ページでは、ワードプレスの基本的な操作方法が理解できている事を前提としております。ワードプレスの操作方法や、welcartプラグインについては、当ページでは割愛致しますので、各々公式サイトや参考書などで調べて頂けたらと思います。

また、新たなカスタマイズ(機能追加や、デザインの調整)に関しましても、自己責任の上、ご自身で情報を習得して頂くようお願い致します。

ワードプレスのインストール

 下記公式サイトより、ダウンロードして、ご契約のサーバーに設定していただくか、ご契約のサーバーのインストールサービスを利用して、ワードプレスを設置して頂きます。

ワードプレス公式サイトはこちら

プラグイン「Welcart」のインストール

  下記「Welcart公式サイト」より、Welcartをご自身のWordpressにインストールします。

Welcart公式サイトはこちら

「ECP シリーズ」テーマのアップロード

themeinstall

固定ページの作成

 ECサイト(ネットショップ)に必要な、固定ページを作成します。

必要な固定ページ例(ショップの業態、業界に応じて作成してください)
・会社概要(店舗情報)
・プライバシーポリシー
・特定商取引法に基づく表記
・お問い合わせ
・よくある質問(FAQ)
etc

固定ページの作成の仕方に関しましては、下記「ワードプレスマニュアル」をご参考ください。

ワードプレスのマニュアルはこちら

Welcart基本設定&商品登録

 ECサイト(ネットショップ)に必要な「基本設定」「配送設定」「決済設定」「メール設定」をします。また、上記基本設定が完了したら、「商品登録(商品カテゴリー、商品説明、商品名、画像など)」を行います。
基本情報~商品情報登録までの手順は、下記「Welcartマニュアル」ご参考くださいませ。

Welcartのマニュアルはこちら

プラグインのインストール

plugininstall

 ECP 2シリーズのデモサイトにインストールされているプラグインは、下記の通りでございます。

デモサイト、インストールプラグイン一覧
・TinyMCE Advanced(リッチエディタと自動整形無効)
・contact form 7(お問い合わせフォーム)
・easy fancybox(light box系の画像をポップアップして拡大表示)
・Yet Another Related Posts Plugin (関連商品を表示する)
・Dynamic Widgets(ページ毎のウィジェットの表示非表示の設定)
・Meta slider(トップページのスライドショー)
・Dynamic To Top(トップへ戻るボタン)
・AddToAny Share Buttons (SNSシェアボタン)
・Breadcrumb NavXT(パンくずリンクの表示)

上記のプラグインの設定に関しましては、各プラグイン公式サイトもしくは、インターネットよりご確認くださいませ。また、上記のプラグインは、必ずしも全て必須ではございませんので、ご自身のECサイト(ネットショップ)の仕様に応じて、インストールしてください。

ロゴの設定

ホームページで使用するロゴ画像は、事前にメディアにアップロードして頂くか、画像を選択する際に、ロゴ画像をアップロードしてください。

logocustmize

メイン(グローバル)メニューの設定

menucustmize

  「Main Navigation」にチェックを入れると、その内容が、メイン(グローバル)メニューに表示されます。フッターエリアや左サイドエリアにメニューを作りたい場合は、上記の手順を必要なメニューの数分、繰り返します。
メイン(グローバル)メニュー以外の設置方法に関しましては、後述の「ウィジェットの設定」で説明してあります。

ウィジェットの設定

widgetcustmize

各エリアに、任意のメニューを表示する設定

画像内の「カスタムメニュー」は、WordPressのバージョンによって「ナビゲーションメニュー」と表示されます。

widgetmenu

・左サイドメニュー⇒ウィジェットエリア【左サイドエリア】
・フッターメニュー⇒ウィジェットエリア【フッターエリア】

 トップページのウィジェットの設定

・スライダーのウィジェット(Meta slider)⇒ウィジェットエリア【トップページメインビジュアルエリア】

 商品詳細ページのウィジェットの設定

・関連商品のウィジェット(Related posts(YARPP))⇒ウィジェットエリア【商品詳細ページの下部エリア】

 yappの設定

yapp

 その他の共通ウィジェットの設定

・パン屑リンクウィジェット(【Breadcrumb NavXT】ウィジェット)⇒ウィジェットエリア【〇〇ページの上部エリア】
※ウィジェットエリア【固定ページの上部エリア】に表示させる場合は、【カスタムHTML】ウィジェットに、下記のコードを入力

<section class=”container”>
<div class=”row”>
<div class=”col-md-12″>
[breadcrumb]
</div>
</div>
</section>

・バナーや文字の表示(【カスタムHTML】ウィジェットに、任意の文字列やhtmlを入力)⇒ウィジェットエリア【左サイドエリア】
・検索のウィジェット(【検索】ウィジェット)⇒ウィジェットエリア【左サイドエリア】
・ログインボックス(【Welcartログイン】ウィジェット)⇒ウィジェットエリア【左サイドエリア】
・商品カテゴリー(【Welcartカテゴリー】ウィジェット)⇒ウィジェットエリア【左サイドエリア】

※上記はあくまで、ECP シリーズ テーマのデモサイトに基づいたウィジェット配置です。また、デモサイトの各ページのウィジェット表示は、プラグイン「dynamic widget」で、コントロールしております。

10トップ(フロント)ページの設定

事前に、「固定ページ」の「新規追加」で、フロントページを作成。

フロントページの内容は任意に作成してください。以下は、デモサイトのトップページのHTMLコードです。

<section class=”container”>
<div class=”row”>
<div class=”col-md-12″>
<div class=”title-box”>
<h1 class=”title1 center”>Pick Up 商品</h1>
</div>
</div>
</div>
<div class=”row”>[recent_items class=archive-list cat=itemreco col=4 num=4]</div>
</section>
<section class=”container”>
<div class=”row”>
<div class=”col-md-12″>
<div class=”title-box”>
<h1 class=”title1 center”>最新商品</h1>
</div>
</div>
</div>
<div class=”row”>[recent_items class=archive-list col=4 num=4]</div>
<div class=”btn-box”></div>
</section>
<section class=””>
<div class=”overlay”>
<div class=”overlay-contents-center overlay-white4″>
<h2 class=”center”>見出し2みだし2title2</h2>
<p class=”center”>本文テキスト文章が入ります。本文テキスト文章が入ります。本文テキスト文章が入ります。本文テキスト文章が入ります。</p>
<div class=”btn-box center”><a class=”btn-l btn-main” href=”#”>CTAボタン</a></div>
</div>
<img src=”https://webloco.webolha.com/ecp_bc/wp-content/uploads/2019/11/sample-image.jpg” alt=”” /></div>
</section>
<section class=”container”>
<div class=”row”>
<div class=”col-md-12″>
<div class=”title-box”>
<h1 class=”title1 center”>最新のお知らせ</h1>
<p>[recent_posts class=recent-posts num=3 dsp=cat]</p>
</div>
</div>
</div>
</section>
<section class=”container”>
<div class=”row”>
<div class=”col-md-12″>
<div class=”title-box”>
<h1 class=”title1 center”>BLOG</h1>
</div>
</div>
</div>
<div class=”row”>[recent_image_posts class=archive-list col=4 num=4 dsp=cat]</div>
</section>

フロントページ作成後、管理画面の「設定」⇒「表示設定」で、フロントページを設定

frontpage

11ショートコードの解説

商品表示ショートコード

[recent_items class=archive-list cat=itemreco col=4 num=4]

パラメータ

・class:任意のクラスを挿入する事が可能
・cat:表示するカテゴリースラッグを設定可能
・col:表示するカラムを設定可能(範囲:1~6)
・num:表示する商品数を設定可能

投稿表示ショートコード

[recent_posts class=recent-posts num=3 dsp=cat]

パラメータ

・class:任意のクラスを挿入する事が可能
・dsp:「タグ」or「カテゴリー」表示する設定(「cat」or「tag」)
・num:表示する投稿数を設定可能

投稿表示(画像付き)ショートコード

[recent_image_posts class=archive-list col=4 num=4 dsp=cat]

パラメータ

・class:任意のクラスを挿入する事が可能
・dsp:「タグ」or「カテゴリー」表示する設定(「cat」or「tag」)
・col:表示するカラムを設定可能(範囲:1~6)
・num:表示する投稿数を設定可能

12フッターエリアのSNSアイコンの表示

管理画面の「外観」⇒「カスタマイズ」の中の「twitterのURL」「facebookのURL」「instagramのURL」の中に任意のURLを設定して「保存」

frontpage

13モバイル時のヘッダーエリアのカートボタンの表示

管理画面の「外観」⇒「カスタマイズ」の中の「スマホのヘッダーエリアのCTA」に任意のURLを設定して「保存」

frontpage