飲食店用WordPressテーマ「InomaRestaurantBasic」のインストールとカスタマイズ方法
こんにちは、koheiです。
飲食店用のWordPressテーマ「InomaRestaurantBasic」をリリースしました。
(ダウンロードしたい方は以下ページよりダウンロードしてください)
今回の記事では、「InomaRestaurantBasic」のインストール方法、カスタマイズ方法などを説明します。
目次
動画解説
【更新情報】2019年9月15日動画解説を追加しました。
動画による解説です。記事内容と合わせて参考にしてみてください!
- 1.インストール方法・・・・動画:0分19秒ぐらいから
- 2.サイト構成を組み立てる・・・・動画:2分2秒ぐらいから
- 3.カスタマイズ方法・・・・動画:6分28秒ぐらいから
1.インストール方法
1-1.WordPressテーマ「InomaRestaurantBasic」のインストール
まずは、テーマファイルをWordPressへインストールしましょう。
WordPress管理画面の「外観」⇒「テーマ」をクリックします。
新しいテーマを追加をクリックします。
テーマのアップロードをクリックします。
ファイルを選択をクリックして、ダウンロードした「InomaRestaurantBasic.zip」を選択します。
インストール後、テーマを有効化しましょう。
1-2.プラグインのインストール
本テーマの以下機能については、プラグインを使用しています。必要に応じて、以下プラグインのインストールをお願いします。
・お問い合わせ機能:Contact Form 7
・パンくずリスト:Breadcrumb NavXT
WordPress管理画面から「プラグイン」⇒「新規追加」をクリックします。
キーワード入力画面で、「Contact Form」を入力して、Contact Form 7を「今すぐインストール」をクリックします。インストール後、有効化してください。
同じくキーワード入力画面で、「Breadcrumb NavXT」を入力して、Breadcrumb NavXTを「今すぐインストール」をクリックします。インストール後、有効化してください。
※お問い合わせ機能の追加方法は、以下記事を参考にしてください。
WordPress お問い合わせページの作成
2.サイト構成を組み立てる
次に、サイトの構成(骨組み)を作っていきましょう。
今回のテーマファイルは、以下のようなサイト構成です。それぞれのページを固定ページから追加していきます。
WordPress管理画面から「固定ページ」⇒「新規追加」をクリックします。
まずは、フロントページからです。タイトルに「フロントページ」と入力して「公開する」をクリックしましょう。
次に、同様に固定ページの新規追加で、「コンセプト」を追加します。タイトルに「コンセプト」を入力し、一旦、下書きとして保存をクリックしましょう。
すると、右側のメニュー内にパーマリンクの設定が表示されますので、URLスラッグを「concept」と入力します。
※コンテンツの内容は、自由に記載していただいて構いません。
先程のコンセプトと同様に、以下の固定ページを新規追加し、以下のURLスラッグを設定してください。
固定ページ | URLスラッグ | 備考 |
メニュー | menu | コンテンツ内容は自由に追加してください。 |
お知らせ一覧 | infomation | コンテンツの内容は記載する必要はありません。 |
お問い合わせ | contact | コンテンツの内容には、Contact Form7のショートコードを貼り付けます。 |
固定ページの追加が終わったら、WordPress管理画面の「設定」⇒「表示設定」をクリックします。
ホームページの表示で「固定ページ」を選択し、ホームページ:フロントページ、投稿ページ:お知らせ一覧を設定しましょう。
次にナビゲーションメニューの設定を行います。
WordPress管理画面から「外観」⇒「メニュー」をクリックします。
不要なメニューの削除、メニュータイトルの変更、メニュー順番を設定します。設定後、メニュー設定のメニューの位置でナビゲーションにチェックを入れて、メニューを保存をクリックしましょう。
※今回のメニューは、[トップ][コンセプト][メニュー][お知らせ一覧][お問い合わせ]にしています。
3.カスタマイズ方法
次にテーマファイルのカスタマイズを行っていきます。
3-1.ヘッダーカスタム
WordPress管理画面から「外観」⇒「カスタマイズ」をクリックします。
3-1-1.ヘッダー画像を変更
まずは、ヘッダーカスタムを選択します。
ヘッダーカスタムでは、サイトのロゴの画像を自由に設定できるようにしています。
タイトルをサイトロゴで表示させるにチェックを入れて、画像を設定します。ヘッダー部のロゴが設定した画像に変更されます。
3-1-2.問い合わせ情報の表示
また、ヘッダー部の右端に記載しているお問い合わせ情報を自由に変更できます。
お問い合わせ情報を表示するにチェックを入れて、項目名、情報を入力します。右端の情報欄が入力した情報に更新されます。
3-2.トップページカスタム
次にトップページカスタムを選択します。
3-2-1.メインイメージ画像
最初にメインイメージ画像を設定します。メインイメージ画像選択画面から、画像を設定します。ナビゲーションメニューの下に設定した画像が表示されます。
3-2-2.コンセプトエリア
次に、コンセプトエリアを設定します。
コンセプトエリアを表示するにチェックを入れて、コンセプトロゴや、コンセプトタイトル、コンセプトアイコン画像などを設定してみましょう。メインイメージ画像の下に設定した画像やタイトルが表示されます。
次にコンセプト文章を入力します。入力した文字が、コンセプトアイコンの下に表示されます。
また、コンセプトリンクテキストを設定すると、コンセプトページへのリンクボタンを追加することができます。
3-2-3.メニューエリア
次に、メニューエリアを設定します。
メニューエリアを表示するにチェックを入れて、メニューロゴやメニュータイトルを設定してみましょう。コンセプトエリアの下に設定した画像やタイトルが表示されます。
メニューエリアでは、ピックアップしたいメニューなどの画像を3枚設定することができます。メニューピックアップ画像を設定してみましょう。タイトルの下に設定した画像が表示されます。
ピックアップした画像のタイトルを設定できます。メニューピックアップタイトルを設定してみましょう。画像の下に設定したタイトルが表示されます。
ピックアップしたメニューの文章を入力できます。メニュー文章を入力してみましょう。メニュータイトルの下に設定した文章が表示されます。
メニューリンクテキストを設定すると、メニューページへのリンクボタンを追加することができます。
3-2-4.お知らせエリア
次に、お知らせエリアを設定します。
お知らせエリアを表示するにチェックを入れて、お知らせロゴや、お知らせタイトル、お知らせリンクテキストなどを設定してみましょう。メニューエリアの下に設定した画像やタイトル、リンクボタンが表示されます。
3-2-5.アクセスエリア
次に、アクセスエリアを設定します。
アクセスエリアを表示するにチェックを入れて、アクセスロゴや、アクセスタイトルを設定してみましょう。お知らせエリアの下に設定した画像やタイトルが表示されます。
次に、地図リンク欄にGoogleマップから取得した地図のリンクを貼り付けましょう。また、アクセス情報には、住所や電話番号などのアクセス情報を記載します。アクセスタイトルの下に、地図とアクセス情報が表示されます。
※地図の表示は、カスタマイザー画面上では表示されないことがあります。カスタマイザー画面を終了し、サイトアドレスから表示を確認してみてください。
また、お問い合わせリンクテキストを入力すると、お問い合わせページヘのリンクボタンを追加できます。
3-3.フッターカスタム
次に、フッターカスタムを設定します。
フッターカスタムでは、フッターに表示されるサイトロゴを設定できます。
画像設定から画像を設定します。すると、フッター部のロゴが設定した画像に変更されます。
3-4.カラーカスタム
カラーカスタムでは、サイトのパーツの色を変更できます。
メインカラーを設定してみましょう。ヘッダー部、フッター部の色が変更されます。
なお、デフォルトの色に戻したい場合は、クリアを押してください。
ナビ、フッター文字カラーを設定してみましょう。ナビゲーションバーとフッター部の文字色を変更できます。
なお、デフォルトの色に戻したい場合は、クリアを押してください。
メニューエリアの背景色を設定してみましょう。メニューエリアの背景が設定した色に変わります。
なお、デフォルトの色に戻したい場合は、クリアを押してください。
リンクボタンの色を設定してみましょう。各リンクボタンの色が変わります。
なお、デフォルトの色に戻したい場合は、クリアを押してください。
リンクボタンにマウスを重ねた時の色を変更できます。
なお、デフォルトの色に戻したい場合は、クリアを押してください。
3-5.フォントカスタム
サイト全体の文字フォントを設定できます。(明朝体orゴシック体)
お好みのフォントを選択してください。
3-6.コンセプトページカスタム
コンセプトページのトップ画像を設定できます。
なお、設定を変更してもカスタマイザー画面上では画像が反映されないので、カスタマイザー画面を終了し、サイトアドレスから表示を確認してみてください。
3-7.メニューページカスタム
メニューページのトップ画像を設定できます。
なお、設定を変更してもカスタマイザー画面上では画像が反映されないので、カスタマイザー画面を終了し、サイトアドレスから表示を確認してみてください。
最後に
以上、WordPressテーマ「InomaRestaurantBasic」のインストールとカスタマイズ方法でした。
インストールされた方、是非参考にしてみてください!
それでは!!
スポンサーリンク