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


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

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

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

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

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

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

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

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

Welcart公式サイトはこちら

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

themeinstall

必要なプラグインのインストール

plugininstall

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

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

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

固定ページの新規作成

必要に応じて、自社のECサイト(ネットショップ)に必要な、固定ページを新規作成します。

必要な固定ページ例
・会社概要(店舗情報)
・プライバシーポリシー
・特定商取引法に基づく表記
・お問い合わせ
・よくある質問(FAQ)
etc

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

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

固定ページのテンプレートに関しまして

ECP3シリーズでは、3つの固定ページ用テンプレートがあります。掲載するコンテンツの質や固定ページの用途に合わせてご使用ください。

デフォルトテンプレート 1カラムで、コンテンツ幅は、containerと同じ幅になっています。
また、デフォルトテンプレートの場合のみ、アイキャッチ画像を設定すると、ヘッダータイトルの背景画像として表示されます。
フリースタイル 画面を一杯に使えるフルワイドのテンプレートです。幅の制約はなく、自由にコーディング出来ます。
2カラム 2カラムで、コンテンツ幅は、containerと同じ幅になっています。左側がメインコンテンツで、右側がサブコンテンツとなります。

Welcart基本設定&商品登録

 ECサイト(ネットショップ)に必要な「基本設定」「配送設定」「決済設定」「メール設定」をします。また、上記基本設定が完了したら、「商品登録(商品カテゴリー、商品説明、商品名、画像など)」を行います。

基本情報~商品情報登録までの手順は、下記「Welcartマニュアル」ご参考くださいませ。

 

Welcartのマニュアルはこちら

ロゴの設定

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

logocustmize

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

menucustmize

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

ウィジェットの設定

widgetcustmize

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

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

widgetmenu

 右サイドエリアのウィジェットの設定

・検索フォーム(検索【※welcartキーワード検索ではない】)⇒ウィジェットエリア【右サイドエリア】

・商品カテゴリー(welcart商品カテゴリー)⇒ウィジェットエリア【右サイドエリア】

・営業日カレンダー(welcartカレンダー)⇒ウィジェットエリア【右サイドエリア】

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

・フッターメニュー(ナビゲーションメニュー)⇒ウィジェットエリア【フッターエリア1】

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

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

 yappの設定

yapp

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

・パン屑リンクウィジェット(【Breadcrumb NavXT】ウィジェット)⇒ウィジェットエリア【〇〇ページの上部エリア】
※ウィジェットエリア【固定ページの上部エリア】に表示させる場合は、【カスタムHTML】ウィジェットに、下記のコードを入力。
このまま貼り付けても利用できません。ダブルクォーテーションは、全角「”」から半角「”」に変更してください。

<section class=”container”>
[breadcrumb]
</section>

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

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

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

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

フロントページの内容は任意に作成してください。以下は、デモサイトのトップページのHTMLコードです。
このまま貼り付けても利用できません。ダブルクォーテーションは、全角「”」から半角「”」に変更してください。

<section class=”frontpage-header”>
<div class=”big-scale”>
<img src=”https://webloco.webolha.com/demoecpress/3series/wp-content/uploads/sites/4/2020/07/sample-image.jpg” alt=””>
</div>
<div class=”header-container overlay-black4″>
<div class=”container sequence-fadeUp”>
<h1 class=”mb-s fadeUp”>サンプル見出し</h1>
<h2 class=”mb-s fadeUp”>Sample Title</h2>
<p class=”mb-s fadeUp”>Here is the message.Here is the message.</p>
<div class=””><a class=”btn-l btn-main” href=”#”>CTAボタン</a></div>
</div>
</div>
</section>
<section class=”mt-ll”>
<div class=”container”>
<h1 class=”title1 mb-l”>Pick Up 商品</h1>
[recent_items class=”sequence-fadeUp” cat=itemreco col=4 num=4]
</div>
</section>
<section class=”section-ll”>
<div class=”container”>
<h1 class=”title1 mb-l”>最新商品</h1>
[recent_items class=”sequence-fadeUp” col=4 num=4]
</div>
</section>
<section>
<ul class=”column-3″>
<li><a href=”#” class=”hover-scale h-50 h-75-mobile”>
<img src=”https://webloco.webolha.com/demoecpress/3series/wp-content/uploads/sites/4/2020/07/3series_img5-1024×683.jpg” alt=”” width=”1024″ height=”683″ class=”alignnone size-large wp-image-1666″ />
<div class=”hover-contents flex flex-middle flex-center overlay-black4″>
<div class=”p-s center”>
<div class=””>見出しテキスト</div>
<h3 class=””>TITLE</h3>
<div class=”mt-s btn-l btn-sub bc-white solid”>詳しくはこちら</div>
</div>
</div>
</a>
</li>
<li><a href=”#” class=”hover-scale h-50 h-75-mobile”>
<img src=”https://webloco.webolha.com/demoecpress/3series/wp-content/uploads/sites/4/2020/07/3series_img1-1024×684.jpg” alt=”” width=”1024″ height=”684″ class=”alignnone size-large wp-image-1662″ />
<div class=”hover-contents flex flex-middle flex-center overlay-black4″>
<div class=”p-s center”>
<div class=””>見出しテキスト</div>
<h3 class=””>TITLE</h3>
<div class=”mt-s btn-l btn-sub bc-white solid”>詳しくはこちら</div>
</div>
</div>
</a>
</li>
<li><a href=”#” class=”hover-scale h-50 h-75-mobile”>
<img src=”https://webloco.webolha.com/demoecpress/3series/wp-content/uploads/sites/4/2020/07/sample-image-1024×683.jpg” alt=”” width=”1024″ height=”683″ class=”alignnone size-large wp-image-1667″ />
<div class=”hover-contents flex flex-middle flex-center overlay-black4″>
<div class=”p-s center”>
<div class=””>見出しテキスト</div>
<h3 class=””>TITLE</h3>
<div class=”mt-s btn-l btn-sub bc-white solid”>詳しくはこちら</div>
</div>
</div>
</a>
</li>
</ul>
</section>
<section class=”bg-center” style=”background:url(https://webloco.webolha.com/demoecpress/3series/wp-content/uploads/sites/4/2020/07/3series_img4.jpg)”>
<div class=”overlay-black3 section-ll”>
<div class=”container center”>
<h2 class=””>見出し2みだし2title2</h2>
<p class=””>本文テキスト文章が入ります。本文テキスト文章が入ります。<br>本文テキスト文章が入ります。本文テキスト文章が入ります。</p>
<p class=””>本文テキスト文章が入ります。本文テキスト文章が入ります。<br>本文テキスト文章が入ります。本文テキスト文章が入ります。</p>
<div class=”btn-box”><a class=”btn-l btn-sub” href=”#”>CTAボタン</a></div>
</div>
</div>
</section>
<section class=”mt-ll”>
<div class=”container”>
<h1 class=”title1 mb-l”>NEWS</h1>
<div>[recent_posts class=”recent-posts sequence-fadeRight” num=3 dsp=cat]</div>
</div>
</section>
<section class=”section-l”>
<div class=”container”>
<h1 class=”title1 mb-l”>BLOG</h1>
[recent_image_posts class=”sequence-fadeUp” 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