コメントこんにちは、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.プラグインのインストール本テーマの以下機能については、プラグインを使用しています。必要に応じて、以下プラグインのインストールをお願いします。NavXTWordPress管理画面から「プラグイン」⇒「新規追加」をクリックします。7を「今すぐインストール」をクリックします。インストール後、有効化してください。NavXTを「今すぐインストール」をクリックします。インストール後、有効化してください。※お問い合わせ機能の追加方法は、以下記事を参考にしてください。お問い合わせページの作成2.サイト構成を組み立てる次に、サイトの構成(骨組み)を作っていきましょう。今回のテーマファイルは、以下のようなサイト構成です。それぞれのページを固定ページから追加していきます。WordPress管理画面から「固定ページ」⇒「新規追加」をクリックします。フロントページからです。タイトルに「フロントページ」と入力して「公開する」をクリックしましょう。※コンテンツの内容は記載する必要はありません。(テーマファイルのテンプレート内で記載していますので、ここでは記載不要)次に、同様に固定ページの新規追加で、「コンセプト」を追加します。タイトルに「コンセプト」を入力し、一旦、下書きとして保存をクリックしましょう。すると、右側のメニュー内にパーマリンクの設定が表示されますので、URLスラッグを「concept」と入力します。※URLスラッグを間違えると、サイトが正しく表示されません。「concept」を設定してください。※コンテンツの内容は、自由に記載していただいて構いません。先程のコンセプトと同様に、以下の固定ページを新規追加し、以下のURLスラッグを設定してください。コンテンツ内容は自由に追加してください。コンテンツの内容は記載する必要はありません。Form7のショートコードを貼り付けます。※URLスラッグを間違えると、サイトが正しく表示されません。上記のURLスラッグを設定してください。ホームページの表示で「固定ページ」を選択し、ホームページ:フロントページ、投稿ページ:お知らせ一覧を設定しましょう。次にナビゲーションメニューの設定を行います。WordPress管理画面から「外観」⇒「メニュー」をクリックします。不要なメニューの削除、メニュータイトルの変更、メニュー順番を設定します。設定後、メニュー設定のメニューの位置でナビゲーションにチェックを入れて、メニューを保存をクリックしましょう。※今回のメニューは、[トップ][コンセプト][メニュー][お知らせ一覧][お問い合わせ]にしています。次にテーマファイルのカスタマイズを行っていきます。3-1.ヘッダーカスタムWordPress管理画面から「外観」⇒「カスタマイズ」をクリックします。3-1-1.ヘッダー画像を変更まずは、ヘッダーカスタムを選択します。ヘッダーカスタムでは、サイトのロゴの画像を自由に設定できるようにしています。タイトルをサイトロゴで表示させるにチェックを入れて、画像を設定します。ヘッダー部のロゴが設定した画像に変更されます。3-1-2.問い合わせ情報の表示また、ヘッダー部の右端に記載しているお問い合わせ情報を自由に変更できます。お問い合わせ情報を表示するにチェックを入れて、項目名、情報を入力します。右端の情報欄が入力した情報に更新されます。3-2.トップページカスタム次にトップページカスタムを選択します。最初にメインイメージ画像を設定します。メインイメージ画像選択画面から、画像を設定します。ナビゲーションメニューの下に設定した画像が表示されます。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」のインストールとカスタマイズ方法でした。最新記事をお届けします。飲食店用の無料WordPressテーマを作成しました。店のコンセプト、メニュー、アクセスなど飲食店に必要な最低限の機能を搭載しました。これから飲食店のホームページを開設したい方、この無料テーマを是非活用してみてください。詳しくはこちらへブログ用WordPress無料テーマ「chameleon(カメレオン)」WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。士業用の無料WordPressテーマを作成しました。一般的なビジネスサイトに活用できます。自分でWordPressテーマを作ってみたい方、この無料テーマを是非活用してみてください。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。Inomata)こんにちは、サイト運営者のkoheiです。現在エンジニアとして働きながら、当サイトの運営をやっています。このブログでは、「自分で作る」をテーマに、ホームページやデザイン制作、Webマーケティングなど色んなノウハウを公開しています。「自分で何でも作るのが大好き」な人です。InomaCreateプライバシーポリシ。