デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

飲食店用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スラッグを間違えると、サイトが正しく表示されません。必ず「concept」を設定してください。
※コンテンツの内容は、自由に記載していただいて構いません。

先程のコンセプトと同様に、以下の固定ページを新規追加し、以下のURLスラッグを設定してください。

固定ページ URLスラッグ 備考
メニュー menu コンテンツ内容は自由に追加してください。
お知らせ一覧 infomation コンテンツの内容は記載する必要はありません。
お問い合わせ contact コンテンツの内容には、Contact Form7のショートコードを貼り付けます。

※URLスラッグを間違えると、サイトが正しく表示されません。必ず上記のURLスラッグを設定してください。

固定ページの追加が終わったら、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」のインストールとカスタマイズ方法でした。
インストールされた方、是非参考にしてみてください!
それでは!!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

飲食店用WordPress無料テーマ
「InomaRestaurantBasic」

飲食店用の無料WordPressテーマを作成しました。
店のコンセプト、メニュー、アクセスなど
飲食店に必要な最低限の機能を搭載しました。
これから飲食店のホームページを開設したい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン