2020年6月6日 WordPress(ワードプレス)のテーマ|eStoreの解説/日本語マニュアル

WordPress(ワードプレス)のテーマ|eStoreの解説/日本語マニュアル

WordPressテーマの選び方

 WordPressをインストールした後、最初にぶつかる壁がどんなテーマを選ぶのか?ということだと思います。テーマ選びが最重要なので、しっかり吟味して選んでください。テーマは簡単にアンインストール出来るので、インストールとアンインストールを繰り返しながら時間を掛けて選ぶといいと思います。

eStoreの特徴

 estoreは上段に3つの広告ブロックがあるのが特徴で、商品は中段以降に掲載するデザインになっています。左側のブロックがスライド式になっているので、ここでブランドイメージ・新着ニュース・一押し商品をスライドさせるのが一般的なようです。右側の縦に2つ並んだブロックは、ブランドの中心を担うカテゴリー(靴と時計)になっていて、TOPページを見ただけでこのECサイトは何を売る店なのかがすぐにわかるようになっています。

 この3つのブロックが”直感的”に自分のイメージとはまれば、eStoreはおすすめです。一度、絵コンテに書いてみるのもいいと思います。

 私の場合、自社ブランド商品が全て動物キャラクターをデザインしたものなので、上段左のスライドブロックでキャラクターたちを見せて、右側のブロック上段で絵本の紹介、下段にTOP-NEWSを掲載しています。

 イメージが何となく沸いてきたら、早速インストールして写真を張り替えてビジュアルを確認してみましょう。しっくりこなければ、前述のとおりアンインストールすればいいだけです。編集の仕方は【STEP.2】で説明しています。

【STEP.1】eStoreのインストール

 ※【WordPress】のインストールが済んでいることが前提です。

 まだ、という方は【WordPress】のインストールについて過去の記事に書いてありますので読んでみてください。一応内部リンクを貼っておきます。

 【外観】⇒【テーマ】と進み【新規追加】をクリックします。

 すると「テーマの追加」ページが表示されるので、検索ウィンドウにeStoreと入力してください。

 eStoreのブロックが表示されますので、【インストール】をクリックしてください。インストールが完了したら、【有効化】をクリックして完了です。※2分くらいで完了します。

【STEP.2カスタマイズ】

 eStoreを有効化したら、いよいよカスタマイズしていきましょう。

 【外観】⇒【カスタマイズ】をクリックしてください。

 すると、編集画面が開きます。編集画面は左側にカスタマイズメニューが右側に、ビュー画面が表示されます。カスタマイズメニューで変更を加えるとビュー画面が変更されるので視覚的に確認しながら編集することが出来ます。

 この編集画面と、ダッシュボードメニュー画面(外観や商品、固定ページなどが左側に表示されている画面)を行ったり来たりしてカスタマイズしていきます。最初は、メニュー項目がたくさんあって混乱すると思いますが、徐々に使うメニューも絞られてくるので安心してください。

 では、カスタマイズメニューを上から順に紹介していきます。

1.PROバージョンを表示

 ここをクリックするとeStoreの上位互換テーマを購入できるサイトに飛ぶことが出来ます。より簡単にカスタマイズでき、かつ、機能なども多いのだと思います。私は無料でやりたいので上位テーマに移行する気は今のところありません。

2.サイトの基本情報ECサイトのタイトル表記を決めます

 まさに基本情報を設定するところです。サイトのタイトルBOXにECサイトのタイトルを入力するか、ロゴデザインを貼り付ける場合は、ロゴを変更をクリックし画像を選んでください。ロゴデザインがロゴマークのみの場合タイトルも入力し、必須オプションを選択するトグルでヘッダーロゴとテキストの両方を表示にチェックを入れてください。私の場合、ロゴがサイト名のテキストなので必須オプションはヘッダーロゴのみにチェックを入れています。

 サイトアイコンもお好みで付けてください。必須ではありませんがかわいくなるので、私はライオンのロゴを付けています。

3.背景色(ECサイトの背景色を決めます)

 背景色です。自分のECサイトのイメージに合う背景色を選んでください。

4.ヘッダーメディア

 お好みでヘッダー部分に動画を入れたり、画像を貼り付ける場合設定します。私は、シンプルなサイトにしたいと考えているので何も貼り付けていません。

5.背景画像

 これも、お好みで背景に画像を表示したい場合に設定します。ブログページの最背面に画像が貼り付けられます。

6.メニュー

 ここでは、ヘッダーの下に表示されるメニュー項目およびセカンダリーメニュー項目を決めます。

 メニュー項目

 HomeやShop、About、contactなど自身のサイトのメニュー項目を決めてください。英語でも日本語表記でもどちらでもいいです。

 この項目は、ダッシュボードメニューの固定ページとリンクしているので、それぞれ確認してください。リンク先の編集をするときは、この固定ページの項目を編集します。

 セカンダリーメニュー

 これは、eStoreのデザインの特徴の一つです。Shopのカテゴリーをこのメニューに追記します。私の場合は、取扱い商品のカテゴリーが3つあるので3つ項目を設定しました。(※ちなみにFigure、Zakka、Aparrelの3つです。)

 この項目は、商品カテゴリーページとリンクしています。

 デフォルトでメニューのタイトルがCategoryになっていますが、変更することも出来ます。私はSHOP Listに変更しています。おしゃれなワードを使ってください。

7.ウィジェット

 いよいよページ画面のカスタマイズです。ここが決まれば外観はほぼ完成です。たくさんブロックがあるので頑張りましょう。

・ヘッダー右のサイドバー

 ここは、ヘッダーの右端にあるwishlistとカートのアイコンの少し左側のエリアです。デフォルトではバナーが貼ってあったと思います。私は、ここにイラストレーターとしてのWEBサイトとインスタグラムの画像リンクを貼っています。必須項目ではないので、バナーを貼っても良いしデザイン的に何も表示させたくないのであればバナーを削除し、何も設定しなければ良いです。

 ちなみにwishilistとは、商品のお気に入りボタンがクリックされる度にカウントされていきます。人気の目安になるので残しておいて良いと思います。

 カートは、そのままカートに入れている商品の個数がカウントされます。このカートアイコンをクリックすると購入ページへ進めます。

・フロントページスライダーエリア

 このブロックは、このテーマの最大の見せどころです。

 スライダーエリアをかわいくするか、かっこよくするかでサイトのイメージが決まります。スライドは3枚の設定になっていますが、増やすことも出来ます。

 私は、うるさくなりすぎないように3枚のまま使っています。表示させるスライドも固定ページにするか、商品ページにするか選べます。広告・宣伝なら固定ページ、商品を紹介したいなら商品ページを選びます。ちなみに私はキャラクターたちを紹介したいので固定ページをセットしています。

・フロントページスライダー横のエリア

 フロントページスライダーエリアの右側のブロックを編集します。デフォルトでは縦型プロモWCカテゴリーが設定されていると思います。ここは、eStoreで2番目に大事なブロックなのでどういうコンセプトでデザインしたいのかしっかり考えてカスタマイズしてください。

 ちなみに私は、この部分は商品紹介ではなく絵本やイベントなどの告知スペースにしています。編集作業としては、縦型プロモWCカテゴリーを削除し、画像ギャラリーを2枚(for buyerとInstagram×LAFigure)セットしています。

・フロントページサイドバー

 ここは、サイトのボディーのブロックです。ここからは自由度がさらに高くなるのでいろいろ試してください。

以下は、私のサイトの構成(6ブロック)です。ご参考までに。

①横型プロモWCカテゴリー

 ここでは、メニューブロックのセカンダリーメニューと同じ3つのカテゴリーを表示させています。メニューからか、ここから各商品カテゴリーに飛べるようにしています。商品カテゴリーへのリンクです。

②サイトについてウィジェット

 このブロックは、いわゆるAbout usです。自身のブランドコンセプトについて記述しています。固定ページへのリンクです。

③商品カルーセル

 キャンペーン対象商品と名付けた商品カテゴリーをセットしています。フロントページスライダー横のエリアの下段にセットしたインスタグラムキャンペーン(forInstagram×LAFigure)の対象商品を並べています。ここに表示されている商品をクリックすると商品の詳細ページに飛び、気に入ってくれたらカートに入れてくれると思います。

④商品カルーセル

 2ブロック連続商品カルーセルをセットしています。2段目は、おすすめ商品と名付けた商品カテゴリーをセットしています。この2段の商品を分厚く購入してもらいたいという狙いがあります。

⑤おすすめ投稿

 ボディーブロックの下段部分に、ブログ記事をセットしています。ブログは頑張って書きましょう~。自分のサイトに多くの方を案内するためですから重要です。

⑥テキスト

 最下段はテキストをセットしています。サイトマップにすると下段が目立って今うので、私はテキストでさらっとまとめています。著作権表記と、特定商取引法に基づく表記とプライバシーポリシーへのテキストリンクを貼っています。

⑦フッターサイドバー1~4

 私のECサイトは”シンプル”というのが大きなコンセプトなっているので振ったサイドバーは何もセットしていません。もし、もっと多くの情報をセットするというのならいろいろ試してみるといいと思います。

L i t t l e A n i m a l O n l i n e S h o p

8.ホームページ設定

 ここは、今は触らなくていいと思います。もしかしたらずっと触らないかもしれません。飛ばしましょう~(笑)

9.ヘッダー設定

 ここも、ほぼいじりません。ヘッダー上部バーを編集するかどうかです。私は情報過多になると思うのでヘッダー上部バーを有効にするのチェックをはずいています。どちらかいいかは、目視確認をして決めると良いと思います。 

10.デザインオプション

 6項目の編集が出来ますが、ここもほぼいじりません。一応紹介だけ・・・

・レイアウト項目が3つあると思います。

 ページのレイアウト表示のされ方が変わりますが、デフォルトが一番良いのでそのままにしています。好みがあれば変更して良いと思います。

・メインカラーオプション

 各種ボタンやカーソルを合わせたときの色、カートの色などに影響を与えます。ここは、サイトのイメージに合わせて変更するといいと思います。ただし変更する場合は、最初に設定したほうが良いです。セットする画像に合うかが重要で後から変えると違和感を生じます。

・フッターウィジェットの数とブログレイアウトも好みに合わせて変更して良いと思います。私はデフォルト設定が一番良かったです。

11.追加オプション

 5項目あります。同じく好みに合させて編集してください。

・カテゴリーの色設定

 ブログカテゴリーごとの色分けが出来ます。カテゴリーのイメージの色に合させて設定すると良いと思いまうが、あまり色を付けすぎるのも全体のイメージをうるさくしてしまうのでバランスを考えて編集して見てください。

※ブログを投稿するとき、記事のカテゴリーを指定いて投稿します。(後で変更可能です。)

 私の場合、【知識】【スポーツ】【映画・ドラマ】などのカテゴリーを作ってブログの内容に当てはまるカテゴリーに仕分けしています。

・投稿者プロフィール設定

 表示のON/OFFが選べます。私は恥ずかしいのでOFFにしています。

・投稿メタ設定

 投稿したタイトルの下に、情報を追加出来ます。ここも情報過多にならないように編集してください。

・決済パートナーロゴ

 これは、デフォルトで用意されたものもあればオフィシャル/ノンオフィシャルのロゴをアップロードできます。これは、このECサイトではこのような支払方法が設定されていますよという紹介になります。私は、設定していません。

・関連記事

 これは、ブログ記事が多くなってこれば設定し、ブログをより深く読んでもらえるようにうるといいと思います。

12・13・14追加CSS、Woo Commerce、Woo Commerce設定

 ここは、購入手続きの画面の編集や、アーカイブページなどの編集ができますがとくに触らなくていいと思います。追加CSSは、知識を伴っていないと出来ないと思います。私は、わからないので触っていません。

 ここまで、カスタマイズの編集機能について説明してきました。ここからは素材について説明していきますので、もうひと頑張りしてください。

【STEP.3】投稿ページ

 ECサイトをオープンしたら積極的にブログを書くといいと思いますが、投稿したブログをECサイトにどう表示させるかは前述で書いてある通り外観をカスタマイズして決めます。私は、新しい投稿から3つを下段ブロックに表示させるようにしています。

 新しい投稿から3つ表示させるにしても、カテゴリーに関わらず表示させたり、一つのカテゴリーに限定して表示させることも出来ます。例えば、商品紹介のカテゴリーを作って、商品紹介のブログだけを表示させたりもできます。

 お好みの表示パターンを設定してください。

※インストールした時に、仮のブログ投稿やカテゴリーが設定されているので、ごみ箱に捨てるか、リネイムするといいと思います。

 ブログをするならアフィリエイト広告を掲載して、ブログビジネスを同時に始めてもいいと思います。リンクを貼っているので後で確認してみてください。

 ※アフィリエイトに関しては、後日詳しく説明しますのでもう少しお待ちください。まずは、恐れずに始めてみましょう。ちなみに私もまだブログを始めたばかりなので1クリックもされていません(笑)。

アイキャッチ画像について

 ブログの投稿する前に、アイキャッチ画像を設定いてください。これは記事に夢中になっていると忘れがちです。※後からでも設定しなおせるのでご心配なく。

 右側の欄からアイキャッチ画像を設定ボタンをクリックします。するとメディアライブラリー画面表示されます。となりのファイルのアップロードタグをえらぶと画像をアップロードできるので、記事のイメージに合う画像を設定いてください。※写真が著作権侵害に当たらないよう細心の注意を払ってください。

パーマリンク

 右側の欄でパーマネントリンクを設定できます。URLスラッグに記事のキーワードを入力してください。日本語にすると文字化けするので私は英字で設定しています。

カテゴリー

 右側の欄で新規カテゴリーの追加をすることが出来ます。新しいジャンルの記事を書いている場合は、ここで追加しておくといいと思います。

タグ

 タグは、ブログを関連付けるためのものです。キーワードをタグ付けしておけば関連記事といてまとめるときに便利です。

ウィジェット編集

 ブログ記事を閲覧すると、文章ブロックとサイドバーで構成されています。サイドバーでは、新しい投稿から遡って5記事のタイトルや月ごとのアーカイブが表示されます。この部分を編集することができます。

 【外観】⇒【ウィジェット】を選択すると、画面右側に右サイドバーというプルダウン形式のブロックがあります。そこに画面左側にある利用できるウィジェットから項目を追加させることが出来ます。私はカレンダーやおすすめ商品などを追加しました。ここは、商品の購入につながる大事な要素なので研究して設定してみてください。

【STEP.4】固定ページ

 この固定ページは、メニューブロックの項目などのリンク先になっています。デフォルトでcontactやカート、支払いページが作られています。

 例)メニューからcontactをクリックすると固定ページcontactに飛びます。

 abaut usやプライバシーポリシーなど必要な固定ページはたくさんあると思いますのでコツコツ作りましょう。ちなみに固定ページはブログの投稿ページと非常に似ているので、今何を編集しているのかを頭の中でしっかり整理してください。

 ※投稿ページのマニュアルは後日UPしますので、もう少しお待ちください

【STEP.5】商品ページ

 いよいよ、商品ページです。商品の数だけ作らないといけないので100商品取り扱っている場合、100素材作ります。

まずは、カテゴリーを作ってください。

 【商品】⇒【カテゴリー】をクリックすると、商品カテゴリーページが表示されます。画面左側にある新規カテゴリーを追加のエリアにある項目に、名前、スラッグ、サムネイルを設定しカテゴリーを追加ボタンをクリックします。すると、右側の一覧に新しく追加されます。説明は、自分が理解いているはずので書かなくても大丈夫です。親カテゴリーはカテゴリーを細分化するときに選択します。

 私の場合、figureとminifigureがあるのでカテゴリーはfigureを親カテゴリー、minifigureを子カテゴリーに設定いています。

 このカテゴリーを、セカンダリーメニューに設定します。また、おすすめ商品を外観のボディブロックに設定するときも、カテゴリーをセットすることになりますのでカテゴリー設定は非常に重要です。

あとは、ひたすら商品登録

 後はひたすら商品を登録し、カテゴリーに仕分けしていくだけです。色違いの商品などは、商品をコピー機能を使うと便利です。説明文を少し編集するだけで済みます。

 画像を毎回登録するのが面倒であれば、メディアライブラリーであらかじめまとめてアップロードしておけば良いと思います。

 では、頑張ってください。

 ご質問などあれば、コメント欄にご記入ください。答えられる場合は、回答させていただきます。

 インスタグラムのフォローもお願いします。

  Instagram【la_little_animal】

 おしまい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA