tomopix

写真に関する話題を幅広く書いて行きます。

WordPressで写真配信のネットショップを構築するpart5(OnePressテーマのカスタマイズ)

 

前回まででOnePressのテーマのインストール、デモデータもインポートし、 なんとなくサイトらしくなったと思います。

今日はこれらを自社サイトのページとしてカスタマイズしていきます。

 

まずカスタマイズするには以下のいずれかからカスタマイズ画面へ遷移します。

  1. 一番上のツールバーの「カスタマイズ」をクリックf:id:tomopix:20190815183749p:plain
  2. 「外観→カスタマイズ」をクリックf:id:tomopix:20190815183852p:plain

カスタマイズするには以下のメニューから変更したいセクションをクリックし、それぞれのオプションを設定して行くことで実現できます。f:id:tomopix:20190815184201p:plain

ヒーローの設定

  1. 「セクション:ヒーロー」をクリックしてみてください。以下のようにさらに3つのメニューが出てきたと思います。f:id:tomopix:20190815184242p:plain
  2. まずは背景の設定をします。「ヒーローの背景メディア」へ進んでください。項目を開くとそれぞれ変更できるボタンが出てきますので変更していきます。(画像は事前に用意してくださいね)f:id:tomopix:20190815184359p:plain
  3. こちらが変更した状態です。f:id:tomopix:20190815195445p:plain
  4. 続けて「ヒーローコンテンツレイアウト」をカスタマイズしていきます。f:id:tomopix:20190815200455p:plainf:id:tomopix:20190815200531p:plainf:id:tomopix:20190815200554p:plain
  5. このあたりで一旦作業を保存するために、上の方にある「公開」ボタンを押すのを忘れないようにしましょう。f:id:tomopix:20190815200649p:plain
  6. ここまでを見てみるとこんな感じになりました。f:id:tomopix:20190815200756p:plain
  7. ロゴも変更してみます。ちなみにとりあえずロゴ作りたい場合 https://hatchful.shopify.com/ja がオススメです。Spotifyこんなことやってるんですね。完全無料でロゴを作ってダウンロードできます。f:id:tomopix:20190815204114p:plain
  8. ロゴのサイズが合わない場合はLogo Height In Pixelで高さを調整しましょう。
  9. できたら忘れずにまた「公開」ボタンをクリックしてください。
  10. トップページをスクロールして行くとかなり色々なセクションがあることに気づくと思います。最終的には全部あってもいいですが、とりあえず今回は不要なのでいらないものは全部非表示にしていきます。f:id:tomopix:20190815204419p:plain
  11. 非表示にするにはカスタマイズ画面でそれぞれのセクションを選んでセクションの設定で「セクションを非表示にします」チェックをクリックするだけです。f:id:tomopix:20190815204523p:plain

 

お問い合わせを設定しよう

  1. お問い合わせの画面を設定するためにはまずWPFormsで新規フォームを作ります。f:id:tomopix:20190815205445p:plain
  2. すべてのフォームをクリックすると「Simple Contact Form」というのが表示されます。こちらを編集していきます。f:id:tomopix:20190815205902p:plain
  3. 左側のメニューから「セットアップ」をクリックします。f:id:tomopix:20190815210033p:plain
  4. 簡単なお問い合わせフォームにマウスオーバーすると以下のようにボタンが表示されますのでクリックします。f:id:tomopix:20190815210130p:plain
  5. 警告が出ますがOKで進んでください。f:id:tomopix:20190815210214p:plain
  6. これでシンプルなお問い合わせフォームができました。保存ボタンを押して、隣のバツボタンで画面を閉じます。f:id:tomopix:20190815210305p:plain
  7. 引き続きお問い合わせフォームの右側の内容をカスタマイズ画面で編集します。
  8. f:id:tomopix:20190815211450p:plain

 

SNSの設定をしよう

写真などのサイトを運営する上でSNSはかなり重要ですので、こちらも抜かりなく設定しましょう。

f:id:tomopix:20190815205206p:plain

 

メニューを設定しよう

最後にメニューを設定していきましょう。

  1. メニューは下の部分でメニューをクリックするか、f:id:tomopix:20190815211753p:plain
  2. こちらのパスでメニューを選択します。f:id:tomopix:20190815211851p:plain
  3. こんな画面が現れたと思います。f:id:tomopix:20190815212002p:plain
  4. ここでカスタムリンクになっている「Features」から「Contact」まではデモ用のため正しく動作しないのですべて削除します。
  5. 削除はこんな感じに開いて削除をクリックすれば良いです。f:id:tomopix:20190815212133p:plain
  6. 次に以下のように「すべて表示」タブを表示します。f:id:tomopix:20190815212237p:plain
  7. 「必要なものをチェック、メニューに追加」を繰り返し、以下のようにメニューを作成し保存します。f:id:tomopix:20190815212812p:plain
  8. この時点で下のような感じになったと思います。f:id:tomopix:20190815212913p:plain

パーマリンク設定を変更しよう

パーマリンクとはWordPress内で扱うページへアクセスする際のURLの事です。この設定はのちのWooCommerceやPhotography Managementのページへアクセスする際に影響するので必ず実施してください

  1. パーマリンクを基本もしくは名前に変更する。f:id:tomopix:20190821165605p:image


お疲れ様でした。

これでまずはランディングページとして最低限の要素はできたと思います。

次回はWooCommerceの設定を行い商品を販売できるようにしていきます。