第4回ワードプレスレッスン(2017.12-3)

引き続きワードプレスによるECサイト(ダンスシューズショップ)の作成です。

トップページのメニューバー(グローバルメニュー)のところに「カテゴリー」を並べたい

あるカテゴリーをクリックすると、登録した商品が5つ(など)並んでくれる

「商品を親カテゴリーとするカテゴリー」にしないといけない

「商品」カテゴリーの子に「1モダン〜」とつくっていく

いつもの記事納品では記事編集ページ内の「カテゴリー」をいじっているがそこではなく・・・

「投稿」>カテゴリー>・・・

前回登録した3つの商品を「編集」します

「親カテゴリー」のところ

「親カテゴリー」>「商品」のところをクリック

「名前」に「1モダンシューズ」などと入れてカテゴリー登録してみました

「更新」で登録されます

「2ラテンレディース」「3サルサレディース」「4ティーチャーズ」「5メンズモダン」

登録すみの商品、カテゴリーを選択し直し

ウェルカートの商品マスターへ行くと「カテゴリー」1〜5が選べるようになっている

カテゴリーを選び直して、トップページに商品が出るようにします

1モダンシューズ(銀)では親カテゴリー「商品」子カテゴリー「1モダンシューズ」の2つにチェックを入れる

2ラテンシューズ 「商品」親カテゴリー、「2ラテンシューズ」子カテゴリーに設定する。

「親カテゴリー」のチェックは残したまま、子カテゴリーにもチェック入れるのがポイントです!

外観>カスタマイズ

メニュー画面をつくりトップページにならべたいです

「カテゴリー」1モダンシューズ 2ラテンシューズ・・・と5種類ならべるようにします

「ダッシュボード」黒い編集画面(ワードプレス管理画面)から

外観>カスタマイズ

「メニュー」クリック、「新規作成」

「ヘッダー・ナビゲーション」にチェックを入れ

メニュー名は「ヘッダー」とか適当に入れておいて大丈夫(管理しやすくなるように)

「+項目を追加」というボタンがでてきました

固定ページ下の「カテゴリー」(投稿の下)を選択

5つのカテゴリー内容がでてきました

「1モダンレディース」を選択

「1、3、4」しかまだ用意していないので

 

「2」「5」もあったので、カテゴリーにたします

 

「ドラッグ」で、1、2、3、4、5の順に並び替えることが可能です^^。

 

固定ページもヘッダーメニューに追加可能です

たとえば「トップドリームとは」「お問い合わせ」のような固定ページも、ヘッダーにあるメニューに追加可能です

フッターナビゲーション(下の)もつくりましょう!

固定ページを置く

会社概要

アバウトページ トップドリームとは(会社情報)

お客さんにとってどうでもいい情報?をフッターにおく

まだ「会社概要」がないので「ホーム」をフッターにおいて代用します

「ホーム」クリックしただけで追加されている

 

オーダーメイド ヒール・デザイン・色素材

3サルサシューズ

セミオーダー 2ラテンシューズ

商品紹介ページとしてかかないといけない

非常にめんどうくさい

「トップドリーム」現行サイトより

(ショッピングカートでなく自社サイト内ページ。ドメイン2種ある)

韓国の工場でこのオーダー通りにつくる

返品不可。2週間とか日数もかかる

3000円でこの特注

このオプションサービスをwpで表現するのがなかなかむずかしい

この画像やページと同じのをつくって書くしかない

画像をいただいてつくることは可能

ジャバスクリプト、マウスオーバーをしこんであるページである

プログラマーさんの手腕が発揮されている

10年以上前のデザイン

SEOも当時いちおうがんばった

会社の名前で上に上がるように・・・だけどそうではないワードで

ダンスシューズ 購入 とかで上位にくるように

くつのいい点もごっちゃにして

「レスポンシブデザイン」にしようと思えばできる

画面の横幅に応じて、ページのデザインがかわる

スマホ対応 絵が3個

パソコンはよこに3つ スマホはたてに3つ

3つのヒールが1枚の絵に貼り付けている

1.jpg 2(同),3(同)と3つ切り出して名前をつける

文字入れ(太フレアとか)もしてある

このあとやること

・商品説明ページをつくるのか

・トップページをいろいろいじるのか

・全体デザイン(1ページ内かサイト全体か)をつくってみるのも良い勉強になる

プラグイン「ページビルダー」を入れます

カタカナではだめなので page builder by site origin

page builder と英語のスペルで検索

昔あったホームページビルダーのような直感的な作業でできる

「今すぐインストール」そして「有効化」

これで直感的に「レスポンシブ」デザインにしてくれる

コードをかかずにできる固定ページを追加する

 

 

「ウィジェッツト」を活用

ウィジェットごとに「文字のかたまり」「画像のかたまり」「文字のかたまり」とつくっていけばよい!

「ウィジェットの追加」で追加する

文字を入れたいときは「site origin editer」

文字をいれたいときには上段の真ん中

「サイトオリジンエディター」(site origin editer)を選びます

 

「リッチテキストエディター」とかいてあります

えらんだあと「編集」をクリック

「site origin ウィジェットのバンドル」がいります

「site origin ウィジェットのバンドル」が必要、といわれるので、青いリンクのところをクリックする

入れたあと「プラグインを有効化」します

「サイトオリジンエディター」(ウィジェット)に戻る

「固定ページ一覧」へいきます

「ページビルダー」のタブを使います

タブをクリックすると窓が出る

画像をならべてみます

別のページに「金」「銀」のがあるので、それを使ってみましょう

少し大きめで、横幅の広い画像を用意しました

金:694×640  銀:704×464 ←はじめは100×100みたいな小さいサイズのをアップして失敗しました。後半やり直ししてます

 

「メディアのアップロード」から画像をアップロードします

画像を足します。固定ページ>「列の追加」

固定ページの編集に戻り、ウィジェットのとなり「列の追加」クリック

50%:50%の2カラム(左右)になっています

右下に「挿入」青いボタンがあるのでクリックします

「ギャラリー」を選び「挿入」で絵が入ります。

「2カラム」「1カラム」自由に選択します。

ギャラリーではなく「画像のオブジェクト」に変更

ウィジェットは「画像」を選択しましょう!(一番下)

「ウィジェット」>画像>金を選ぶ、左カラムに挿入

「ウィジェット」>画像>銀を選ぶ、右カラムに挿入

 

 

大きい画像を用意していれましょう!

もともと小さいとそれ以上では表示されません。

 

「フルサイズ」などを選択します。

 

グーグルクロム拡張機能「デベロッパーツール」

パソコンから「スマホビュー」がみれます

・グーグルクロームで作ったURLをひらく

 

・表示>開発/管理>ディベロッパーツール

・いろんな機種でみれる

・CSS変更などパソコンから「レスポンシブデザイン」スマホからの表示をかくにんする

・ウィンドウズでもできる(グーグルクロムだからできる)

レスポンシブ対応しないのはありえない

7割はスマホと言われている

つくってるトップドリームはレスポンシブ対応になっていない

現在稼働しているトップドリームはスマホからみるとすごく小さい

リンク

ワードプレス管理画面に戻って、3つめ「列を追加」

「テキスト」を選んでみます

文字にリンクもかけられます

飛び先は「トップページ」(ホーム)にしておきます。

トップページがないので、今回は「サンプルページ」に飛ぶよう記載します

下線がついてリンクがかかりました

「更新」で保存

あとやることは?

地図が入ってる

商品詳細

トップページのつくりが難しい

「提案できるのであれば・・・

この”樹形図”はちょっとやめた方がいい」

全くそのとおりです

これからのECサイト作りは

現在はワードプレス固有のトップページになっているので

それを使わずに本日つかった

「固定ページ」でつくることが可能。

自分でつくったレイアウトでトップページにしたい

本日の「ページビルダー」を使って

・サイドバーと中身は別々につくれる

・サイドバーはリスト形式

・中心付近はページビルダー

カテゴリー分けして出したい商品を

3つだして3つだして3つだして

3カラムにして

カテゴリー名(1モダンシューズなど)のラベルをつけて

・・・という風にするのがシンプルで見やすいのでは

という提案

「レスポンシブ」でいきましょう!!

・現在、このショップのスマホ用デザインは、全くの別設計

メニューだけをたてに一行ずつ並べている

それを次回、見てもらう

来週以降はがんばってトップページをつくります!

これに似せていきます

そのほか、やりたいことを出す

・このサイト 完成までかかりそう 手がかかりそう ロジック複雑 レンタルカートが??はてな

外部カートにデータを渡しているだけのよう

ショッププロ サイトが違う 昔はこういうのが多かった(めっちゃ昔)

有料サービス 費用削減にはなる

先方が使わなくても、

・声楽の先生 ホームページ宣伝 決済もないし ドメインとサーバー こっちやっても

ワードプレスが簡単すぎて覚えられない