お客様に情報を提供できる公式サイトを作りたい…。
実店舗などのお店を営業している時に、「簡単に作れるお洒落な公式サイトで新着情報などを提供したい」と思ったことはありませんか？
実は、ワードプレスを利用すると、簡単にショップ公式サイト風なHPを作ることができます。
そこで今回は、ショップ公式サイト風HPに仕上げるワードプレスのカスタマイズについて解説していきます。
ショップ公式サイト風HPの完成イメージ
まず、今回ご紹介する手順で作れるサイトの完成イメージについて、詳しく見ていきましょう。
トップ画面のイメージ
ショップ名とメインコンテンツが一番上に表示されます。
メインコンテンツはメニューバーなので、小さな画面では「MENU」として折りたたみ式に収納されます。
また、スクロールするとタイトルとメニューバーを固定表示にしておくことができます。
画像部分はショップなどのイメージが出来るキャッチフレーズや、おすすめを表示すると良いでしょう。
お知らせとよくあるご質問のイメージ
お知らせとよくあるご質問は、それぞれのカテゴリの新着記事が表示されるようになっています。
投稿時にカテゴリを選択すると、該当カテゴリの新着記事が3件ずつ表示されますよ。
また、表示数は必要に応じて変更することができます。
お問い合わせと投稿記事一覧のイメージ
お問い合わせには、ショップの連絡先などを記載しておきましょう。
ブログの部分には全てのカテゴリの投稿記事一覧が表示されるので、新着情報が気になる方も閲覧しやすくなっています。
では、実際にワードプレスをショップ公式サイト風HPにカスタマイズする手順について、詳しくご紹介していきます。
作成の手順
ワードプレスをショップ公式サイト風HPにカスタマイズする手順は、こちらになります。
このような手順で作成する事ができます。
では、詳しく見ていきましょう。
ワードプレスにテーマをインストールする
今回のカスタマイズに使用しているワードプレスのテンプレートは、「Snow Monkey」です。
ワードプレスにテンプレートSnow Monkeyを導入し、カスタマイズに進みましょう。
固定ページを作成する
今回カスタマイズするHPのように表示されているフロントページは、固定ページで作られています。
そのため、固定ページを新規作成し、デザインを作りましょう。
新規作成する固定ページのタイトルは、「フロントページ」にすると後々編集する際も見分けやすいと思います。
固定ページで作成するブロックは、こちらの順番にすると見栄えがよいです。
|
では、実際に作りましょう。
背景画像付きのキャッチフレーズ部分を作る
上記画像のキャッチフレーズなどを入れる部分は、「カバー」というブロックを使用しています。
今回のカスタマイズでは、トップの部分とお問い合わせの部分に使用しています。
このような流れで、背景付きのコメントが表示されます。
トップ部分とお問い合わせ部分用に2つ作成しましょう。
お知らせとよくあるご質問の作成
お知らせとよくあるご質問は、ほとんどの設定が同じなのでまとめて解説していきます。
見出しを作る
まず、見出しブロックで「お知らせ」と「よくあるご質問」を作成します。
このような流れでタイトルを作成しましょう。
そして、カスタムCSSに入力する見出し用のコードはこちらになります。
|
/* フロントページの見出しカスタマイズ */ |
このように設定すると、枠に囲まれた中央寄せのタイトルが表示できます。
では、お知らせとよくあるご質問の記事を呼び出す設定について見ていきましょう。
新着記事を呼び出す設定
お知らせやよくあるご質問の新着記事の呼び出しは、ブロックの「任意のタクソノミーの投稿」を使用します。
このように設定すると、それっぽい表示になります。
現段階では不要な表示があるかもしれませんが、その他の設定をしていくと形が整うので今はスルーしておきましょう。
「もっと読む」を作る
表示されている内容だけでなく、一覧ページを開けるようにしたい場合もあると思います。
そのような時は、指定カテゴリーの一覧ページにリンクを張りましょう。
クラシックのブロックは通常のエディターの要領で使えるので、リンクボタンなどを指定しても良いですね。
今回はシンプルを求めているので、文字に直接リンクを張っています。
カテゴリーのURLがわからないときは、編集画面左側に表示されているメニューのカテゴリーから確認できます。
指定したいカテゴリーを選択し、「表示」を押して開けたページのURLをコピーしましょう。
|
リンクは、リンクしたい部分をドラックした状態で、下記のボタンを押すとURLを貼ることができます。
|
ブログの一覧を作る
ブログの一覧は、新着の投稿が確認できる部分です。
タイトル部分をお知らせやよくある質問と同様の方法で作成し、記事の呼び出しは以下の手順で行いましょう。
これで、投稿記事を一覧に表示することができます。
「もっと読む」に関しても、お知らせやよくあるご質問と同様の方法で設置しましょう。
ただ、全ての記事を一覧に表示するために、カテゴリーは「ブログ」から分岐させる形になります。
|
このように、親カテゴリーを1つにすると、親カテゴリーの一覧ページに全ての記事が表示されます。
カテゴリーの編集はメニュー「投稿」の「カテゴリー」からいつでも修正できるので、親と子の指定を行いましょう。
|
上記方法で親カテゴリーを設置しないと、「もっと読む」に全ての記事一覧が表示できません。カテゴリーの編集ページが以下の画像のようになっていることを確認しましょう。
|
ここまでの設定を行うと、フロントページの原型が完成となります。
では、詳細設定で形を作り込みましょう。
テンプレートの詳細設定
テンプレートの設定は、まずメニュー「外観」「カスタマイズ」から始めましょう。
サイト基本情報
サイト基本情報では、以下の設定が可能です。
|
では、1つずつ見ていきましょう。
ロゴ
ロゴは、サイト名のところに表示されます。
ショップロゴなどがある場合は、ここに画像を設定しましょう。
未設定でも問題ありません。
サイトのタイトル
サイトのタイトルは、ショップ名などを入力しましょう。
検索などにも関わる部分なので、わかりやすいものに設定することがオススメです。
キャッチフレーズ
キャッチフレーズは、今回のカスタマイズではサイト上に表示されません。
しかし、サイトをお気に入り保存する際などには表示される部分ですので、簡単なサイト説明を入れておきましょう。
コピーライト
コピーライトは、サイトの一番下のフッター部分に表示されます。
初期設定ではテンプレート名などが表示されているので、必要に応じて変更が必要となります。
サイトアイコン
サイトアイコンは、サイトのURL部分やブックマークなどに表示される部分です。
必要に応じて、512×513px以上の正方形の画像を設定しておきましょう。
メニュー
メニューは、タイトル下に表示されているメニューバーに使用しています。
「メニューを新規作成」を選択し、わかりやすいタイトル「ヘッダーメニュー」を作成しましょう。
今回はメニューを全て「カスタムリンク」で作成しています。
メニューの文字とURLを自由に設定できるので、メインとなるリンクを貼っておきましょう。
ちなみにですが、今回指定しているリンクはこちらになります。
また、メニューの位置は下記を選択しましょう。
|
このようにすることで、画面サイズが変わってもメニューが確認できます。
ちなみにですが、グローバルナビゲーションはタイトル下に横一列に見えるタイプで、ドロワーナビゲーションは右上にメニューボタンが表示されます。
この2つを設定することで、PCの場合でも画面サイズを小さくするとメニューが切り替わるようになりますよ。
ウィジェットの設定は特にありませんので、ホームページ設定について見ていきましょう。
ホームページ設定
ホームページ設定では、フロントページの設定が行えます。
まず、ホームページの表示を「固定ページ」にしましょう。
ホームページに先ほど作成した固定ページ「フロントページ」を選択し、投稿ページはデフォルトの「–選択–」のままです。
また、以下の2つ設定がありますよね。
|
この二つは好みによりますが、私はどちらもONに設定しています。
Simple Custom CSS
固定ページを作成する時に活用したカスタムCSSの入力欄です。
こちらは、以下のコードを追記入力しておきましょう。
|
/* アバター画像非表示 */ /* 著者情報を非表示 */ /* 記事下のタグ一覧を非表示*/ /* 見出し4 */ h4:before { /* 見出し5 */ /* フロントページの一覧幅指定 */ /* カテゴリーページのカテゴリ名非表示 */ /* カテゴリーページの一覧上のボーダー非表示 */ |
ズラッとコードが並んでいるので、わかりやすく解説していきます。
アバター画像非表示
アバター画像は、投稿記事などに表示されているアイコン画像のことです。
誰が投稿したのか？とわかるようにする場合は、入力しないほうが良いですね。
ただ、アバター画像を削除したいときに必要となるコードです。
著者情報を非表示
著者情報を非表示するコードは、投稿者の名前を消すことができます。
初期の状態の場合、記事を作成した方の名前は記事内などに表示されてしまいます。
名前を表示させたくない場合は、こちらのコードを入力しておきましょう。
記事下のタグ一覧を非表示
シンプルな外観に仕上げるために、不要な部分は非表示にしたい！と思いませんか？
そんな時は、記事下のタグ一覧も消してしまいましょう。
見出し4・見出し5
Snow Monkeyの見出しは、そもそもがシンプルで見やすいです。
デフォルトの状態でも見出し2と見出し3はしっくりきていたので、見出し4と見出し5のみ変更しました。
変更後は上の画像のようなスッキリとした見出しになりますよ。
フロントページの一覧幅指定
フロントページは固定ページで作ったものですが、PC表示は横長に間延びした感じがします。
お知らせやよくある質問をまとまりある感じにするためにも、幅を調整するために入力しています。
カテゴリーページのカテゴリ名非表示
カテゴリーページは、「もっと読む」などを押したときに表示される一覧ページです。
カテゴリーはパンくずリストにも表示されているので、非表示にしてシンプルにしています。
カテゴリーページの一覧上のボーダー非表示
カテゴリ名の下に、初期設定でボーダーが表示されています。
そのため、カテゴリ名非表示と同時にボーダーも削除しています。
このように、今回はカスタムCSSでほとんどのことを済ませているので、追加CSSに関しては無記入です。
次に、デザインの設定について見ていきましょう。
デザイン
デザインの設定は、ほとんど初期設定のままとなっています。
 |
 |
 |
このような設定となっているので、適当にカスタマイズしましょう。
レイアウト
レイアウトの設定では、タイトルなどの固定表示などの設定が行えます。
上部で固定することで、シンプルとオシャレが両立したデザインに仕上がるので、忘れずに設定しておきましょう。
基本設定
基本設定では、幅と位置の設定を、
| コンテンツの最大幅 | 1280 |
| パンくずリストの表示位置 | コンテンツの上 |
と、このように変更しています。
特にコンテンツの最大幅は、ブログ記事内容の表示にも関わるので大きめな設定の方が見やすいと思います。
ヘッダー
ヘッダーの設定は、
| ヘッダーレイアウト | 中央ロゴ |
| ヘッダー位置 | 固定 |
と、この2つのみを変更しています。
画面中央にタイトルなどが表示され、画面スクロール時も固定表示されるようになります。
フッター
フッターは特に指定をしていないので、何カラムでも大丈夫です。
サイトを更新していく際に、ツイッターやカテゴリ一覧、ショップの住所等を表示するかもしれませんよね。
そのため、最初から3カラムくらいに指定しておくと、後々の編集がスムーズになるかもしれません。
ページレイアウト
フロントページは1カラムに設定すると、スッキリとした表示になります。
投稿記事ページなどは情報が見やすくなる「サイドバー」の表示が良いでしょう。
ここまでで、外観の設定は終わりです。
設定の変更
外観やフロントページの設定が終了すると、ほとんど完成に等しいです。
しかし、投稿ページにコメント欄が必要ない場合などもあると思います。
最後に、ワードプレスの編集メニューの「設定」を変更していきましょう。
一般設定
サイトのタイトルやキャッチフレーズは、外観の設定で入力した内容と同じものを入力しておきましょう。
URLはhttps化する時以外は、基本的に触れないように気をつけましょう。
|
変更すると編集画面すら開けなくなり、苦労する可能性があるので要注意です。 |
メールアドレスは、ブログの通知などを受信するために設定しましょう。
その他は会員制サイトなどをつくる場合以外は変更不要ですが、日付と時刻のフォーマットはブログ内の表示に関わるので好みの設定に変更しましょう。
設定を終えたら必ず「変更を保存」してくださいね。
投稿設定
投稿設定はメール投稿などをする場合に設定しておくと便利です。
また、投稿カテゴリーの初期設定を一番更新するカテゴリに変更すると、下書き保存の段階でも設定されるようになります。
効率アップを図りたい時には設定しておくことがオススメです。
表示設定
表示設定は以下の設定になっていることを確認しましょう。
|
このように、外観の設定と同じになっていれば問題ありません。
ディスカッション
ディスカッションは、コメント欄の非表示に関わる部分です。
以下のチエックを外すと、新規投稿した記事のコメント欄やトラックバックは表示されなくなります。
|
また、すでに投稿されている記事のコメント欄は、記事編集画面の右側から設定を変更することができます。
また、メディアやパーマリンク、プライバシーは外観に関わらないため、必要に応じて変更しましょう。
まとめ
今回は、ワードプレスでショップ公式サイト風なHPを作る手順について、詳しく解説させていただきました。
主な手順は、こちらの4つの流れとなっています。
|
このように、難しい設定はありません。
設定後はカテゴリにあった記事を投稿するだけで、サイトを運営していくことができるので便利ですね。
使用するアイキャッチ画像や背景画像によって、サイトの雰囲気も大きく変わるデザインです。
固定ページをカスタマイズすると、より濃厚なサイトに仕上がりますので、個性のあるサイトを作りましょう。