エクストラを使用した製品レビューサイトの構築–パート1

公開: 2017-09-12

Extraを使用して製品レビューサイトを開発する方法に関するこの4部シリーズのパート1へようこそ。 あなたが製品レビューサイトの開発を始める方法に頭を悩ませているなら、このシリーズはあなたのためです。 組み込みのレビュー機能とスマートな投稿分類を備えたExtraは、見栄えの良いレビュー、製品投稿テンプレート、メガメニュー、カテゴリレイアウトを数分で作成できるように特別に装備されています。 Extraの力を探求するときに、私と一緒に参加してください。


商品レビューが大好きです。 実際、私は最近、世界が製品について何を言わなければならないかを決定するために徹底的なFBIレベルの調査を行わずに、何かを購入することはめったにありません。 私が買い物に出かけることがあれば(それはまれです)、私は棚にある商品のレビューを読んで30分間棚に面している店の男です。 そして、私は一人ではないに違いない。

製品レビューサイトは人気があり、自分で家を建てる仕事をしている場合は、自宅の快適さから追加の現金を稼ぐのに最適な方法です。 ビジネスの観点から、製品レビューブログを作成するには、それを成功させるために多大な作業と多くの忍耐が必要になります。 しかし、実際のサイトの開発に関しては、Extraがカバーしています。

Extraには、製品レビューの追加をはるかに簡単にする多くの組み込み機能が付属しています。 スマートカテゴリモジュールとレイアウトは非常に強力で、簡単にカスタマイズできます。 ワンクリックで、どんなメニュー項目でも注目の画像を含むメガメニューに変換できます。これは、コンテンツの多いサイトにとって重要です。 また、Visual Builderの機能により、製品のポストレイアウトに高レベルの設計機能が追加されます。

今日の投稿では、基本的なテーマオプションとテーマカスタマイザーの設定について説明し、見栄えの良い製品レビューWebサイトに向けてボールを転がします。

これが、このシリーズで構築しようとしているものの概要です。

製品レビュー

始める前に、考慮すべき他の重要な手順をいくつか見ていきましょう。

このシリーズでカバーされていない製品レビューサイトの重要なステップ

このシリーズでは、Extraを使用した製品レビューサイトの構築とスタイリングの基本について説明します。 したがって、製品レビューサイトを成功させるために必要なその他の重要な手順については説明しません。 これらの重要なアクションステップのいくつかは次のとおりです。

  1. 適切なニッチを見つけて、焦点を絞ります。 これは簡単なことではなく、いくつかの重要な調査が必要になります。
  2. あなたが実際にお金を稼ぐかどうかを確認するために製品のアフィリエイト収益を調査します。
    Amazonは多くの製品レビューサイトで人気のある選択肢ですが、常に最良の選択肢とは限りません。
  3. BloomとMailchimpやAweberなどのサードパーティサービスを使用して、簡単な電子メールオプチンシーケンスとマーケティングキャンペーンを作成します。
  4. 優れたコンテンツを作成するか、他の人にお金を払ってそれを実行してください。
  5. 検索エンジン(SEO)用にサイトを最適化します。
  6. ソーシャルメディアでサイトを売り込む
  7. より多くのトラフィックを生成するためにあなたのニッチの他のブロガーと提携してください。

もちろん、もっと多くのステップがあります。

デザイン要素の準備

  1. Extraの最新バージョンがインストールされています。
  2. アクティブな子のテーマ。 このシリーズのheader.phpファイルやfunction.phpファイルなどのコアテーマファイルは編集しません。 テーマカスタマイザーとカスタムCSSのみを使用します。
  3. 暗い背景に配置するための明るい色のロゴ。 私のロゴサイズは103×63です。
  4. 製品画像。 このチュートリアルでは、4つのカテゴリがあり、各カテゴリに3つの製品があるため、合計12の画像を使用します。 背景が白いシャッターストックのストック画像を使用して、見た目をすっきりさせています。

    また、商品画像の最大バージョンは1280px(ウェブサイトのコンテンツ幅)になるため、画像が少なくともその幅であることを確認してください。 理想的には、ほとんどのモニターの16:9のアスペクト比を維持するために、すべての画像が1280×720になるように撮影します。

準備完了? 始めましょう。

エクストラを使用した製品レビューサイトの構築–パート1

私たちのYoutubeチャンネルを購読する

テーマオプションとテーマカスタマイザー設定のセットアップ。

WordPressダッシュボードから、 [Extra]> [Theme Options]> [General]タブに移動し、以下を更新します。

ロゴ:ロゴを入力します。 ヘッダーの暗い背景の上を通過するため、ロゴが明るいバージョンであることを確認してください。
ファビコン:ファビコンを入力してください
グローバルアクセントカラー:#222222
サイドバーの場所:サイドバーなし

製品レビュー

設定を保存する

次に、[エクストラ]> [テーマカスタマイザー]> [一般設定]> [タイポグラフィ設定]に移動し、以下を更新します。

見出しテキストサイズ:24
本文サイズ:20
見出し線の高さ:1.3
見出しフォントスタイル:B(太字)
見出しフォント:Oswald
ボディフォント:Open Sans
ボディリンクの色:#e6567a

製品レビュー

保存して公開

戻って[背景設定]を選択し、背景の色をrgba(0,0,0,0.14)に変更します。

製品レビュー

保存して公開

次に、テーマカスタマイザのメインメニューに戻り、[ヘッダーとナビゲーションの設定]> [ヘッダー形式の設定]を選択して、[中央揃え]を選択します。

製品レビュー

保存して公開

ここで戻って[プライマリメニューバーの設定]を選択し、以下を更新します。

メニューの高さ:124
ロゴの高さ:51
テキストサイズ:20
テキストの色:rgba(255,255,255,0.86)
背景色:#222222
ドロップダウンメニューの背景色:#222222
ドロップダウンメニューアニメーション:垂直方向に反転

製品レビュー

保存して公開

ここで戻って[セカンダリメニューバーの設定]を選択し、以下を更新します。

テキストサイズ:20
背景色:#121212
ドロップダウンメニューの背景色:#121212
トレンドテキストサイズ:16px
検索、カート、アイコンのテキストサイズ:16
検索、カート、アイコンの背景色:#444444

製品レビュー

次に、戻って[固定ナビゲーション設定]を選択します。 次に、以下を更新します。

[ロゴ画像を非表示]を選択します
メニューの高さ:60
テキストサイズ:16
背景色:#222222

製品レビュー

保存して公開

WordPressとExtraの新しいインストールを使用している場合、ホームページは次のようになります。

製品レビュー

商品のカテゴリを設定する

テーマカスタマイザーの設定が完了したら、今後追加する製品のカテゴリの追加を開始できます。

カテゴリを設定するには、WordPressダッシュボードに移動し、[投稿]> [カテゴリ]に移動します。 左側の[新しいカテゴリ追加]セクションで、最初のカテゴリの情報を追加します。 この例では、「electronics」という名前のスラッグと「#5bd999」という色の「Electronics」というカテゴリを追加します。

製品レビュー

次に、[新しいカテゴリ追加]ボタンをクリックします。

この手順をさらに3つのカテゴリについて繰り返します。 これが私の4つのカテゴリーすべての情報です:

  1. 名前:エレクトロニクス
    ナメクジ:電子機器
    色: #5bd999
  2. 名前:衣類
    ナメクジ:衣類
    色: #00c0e4
  3. 名前:キッチン
    ナメクジ:キッチン
    色: #e6567a
  4. 名前:健康とフィットネス
    ナメクジ:健康とフィットネス
    色: #7658f8

注:色はサイトのデザインに不可欠な役割を果たすため、必ず追加してください。

カテゴリの追加が完了すると、シリーズのパート1が終了します。

今後の予定:製品の投稿の追加と投稿レイアウトの作成

このシリーズのパート2では、投稿コンテンツの追加と、製品投稿の新しいレイアウトの作成を開始します。 Extraに製品レビュー投稿を追加することは、基本的に通常の投稿を追加することと似ているため、ブログ投稿の作成とDivi Builderの使用に精通している場合は、次のステップで問題はありません。 これらすべてに慣れていない場合は、Extraを使用してビルドする方法を学ぶ絶好の機会と考えてください。

これは、シリーズのパート2で作成する製品投稿の1つの例です。

ご質問やご意見がございましたら、お気軽にコメントを投稿してください。

乾杯!