レストランのためのカスタムメニューを作成
the previous postでは、我々は簡単にメニュー料理を変更するレストランの所有者を可能にするカスタムメニューを作成している.しかし、これはElementorページビルダーのみを使用するサイトの方法です.このプラグインを購入するためにお金を使いたくない場合は、代わりにGtenbergを使用することができます.それは無料ですが、コードのいくつかの行を使用する必要があります.この記事の詳細な説明を読みましょう.
このポストでは、前のものと同様にレストランのテーマを使用する代わりに、私はGutenberg、eStarを強く支持するもう一つのテーマに変わります.そして、より柔軟に外観をカスタマイズすることができます.このテーマは完全に無料ですので、あまりにもそれを試すことができます.
また、私はまだ以前のポストのような製品として食品を作成するWooCommerceを使用します.
まず、WooCommerceを使用した製品として、part 1 .ここでは、私はまだ料理のリストを持っています.
通常のページを作成するのと同じくらい簡単に、ページに移動します.
Gutenberg editorで、ページエディタの右側にブロックを作成することができます.ここでは、列ブロックを選び、メニューレイアウトの2列に設定しました.
カラムをブロック
メニューのレイアウトの2列に設定します.
メニューページに皿を追加するには、以下のように手摘みの製品ブロックを追加するを選択します.
このブロックを使用すると、手順1で作成する“製品”リストから任意の料理を選択することができます.このブロックでは、美しいディスプレイのために1列に設定します.
最後に、メニューを保存するために完了をクリックします.
さて、次のように表示されたお皿でメニューページの外観が表示されます.
しかし、私は、あなたが最もきれいな観察を得るために少しをカスタマイズしなければならないと思います.次の手順でCSSを使用する必要があります.
Gutenbergを使用しているので、次のCSSコードをは、フロントエンドの表示を編集するのを助けます; は、バックエンド(ページエディタ)でディスプレイを編集するのを助けます. . wcブロック選択された製品です.WC - BLOCK - GRINCIGE - RACKプロダクションイメージ
. wcブロック選択された製品です.WC‐BLOCK‐Gridchen‐Rag製品WC‐BLOCK‐Gridchen‐Raw製品WC - BLOCK - GRUNCY RACKプロダクション
表示:なし;
｝
. wcブロック選択された製品です.( WC - BLOCK - GRIGCINE )製品
表示:屈曲;
コンテンツを正当化する
｝
. wcブロック選択された製品です.WC‐BLOCK‐Gridchen‐Raw製品( WC - BLOCK )
フレックス:1
テキストの整列
｝
. wcブロック選択された製品です.(株)
フォントサイズ:24 px
色:英和対訳
｝
. wcブロック選択された製品です.(株) WC - BLOCK - GRINCIGHT
背景色:1
境界半径:25 px;
パディング: 20 px
｝
を指定します.
マージン底:10 px;
｝
その後、メニューページに戻ると、次のように表示される料理のリストが表示されます.
メニューページの外観の結果は以下の通りです.
今、料理のリストを変更するには、レストランのオーナーだけでメニューのページエディタに移動し、ここでのアクションに従ってください
ご覧のように、カスタムメニューの作成は非常に簡単です.グーテンベルグを使用する場合は、CSSコードのいくつかの行が美しい外観を得るためにあなたのメニューをカスタマイズする必要があります.また、メニューをより鮮やかで創造的にするために他のグーテンベルグのブロックを追加することによって、独自のレイアウトを作成することができます.
うまくいけば、Elementorとグーテンベルグを使用してカスタムメニューを作成する上でこれらの2つのチュートリアルでは、あなた自身が適切な方法で選択している.あなたが他のアイデアを持っている場合は、以下のコメントのセクションで私たちと共有することを躊躇しないでください.
--- --- ---
Meta Box年の出版.
準備
このポストでは、前のものと同様にレストランのテーマを使用する代わりに、私はGutenberg、eStarを強く支持するもう一つのテーマに変わります.そして、より柔軟に外観をカスタマイズすることができます.このテーマは完全に無料ですので、あまりにもそれを試すことができます.
また、私はまだ以前のポストのような製品として食品を作成するWooCommerceを使用します.
ステップ1：料理を作る
まず、WooCommerceを使用した製品として、part 1 .ここでは、私はまだ料理のリストを持っています.
ステップ2 :メニューのページを作成する
通常のページを作成するのと同じくらい簡単に、ページに移動します.
Gutenberg editorで、ページエディタの右側にブロックを作成することができます.ここでは、列ブロックを選び、メニューレイアウトの2列に設定しました.
カラムをブロック
メニューのレイアウトの2列に設定します.
メニューページに皿を追加するには、以下のように手摘みの製品ブロックを追加するを選択します.
このブロックを使用すると、手順1で作成する“製品”リストから任意の料理を選択することができます.このブロックでは、美しいディスプレイのために1列に設定します.
最後に、メニューを保存するために完了をクリックします.
さて、次のように表示されたお皿でメニューページの外観が表示されます.
しかし、私は、あなたが最もきれいな観察を得るために少しをカスタマイズしなければならないと思います.次の手順でCSSを使用する必要があります.
ステップ3：メニューページの外観をカスタマイズする
Gutenbergを使用しているので、次のCSSコードを
style.cssとstyle-editor.cssファイルに追加する必要があります.具体的にはstyle.cssファイルにコードを加えるstyle-editor.cssファイルにコードを加える. wcブロック選択された製品です.WC‐BLOCK‐Gridchen‐Rag製品WC‐BLOCK‐Gridchen‐Raw製品WC - BLOCK - GRUNCY RACKプロダクション
表示:なし;
｝
. wcブロック選択された製品です.( WC - BLOCK - GRIGCINE )製品
表示:屈曲;
コンテンツを正当化する
｝
. wcブロック選択された製品です.WC‐BLOCK‐Gridchen‐Raw製品( WC - BLOCK )
フレックス:1
テキストの整列
｝
. wcブロック選択された製品です.(株)
フォントサイズ:24 px
色:英和対訳
｝
. wcブロック選択された製品です.(株) WC - BLOCK - GRINCIGHT
背景色:1
境界半径:25 px;
パディング: 20 px
｝
を指定します.
マージン底:10 px;
｝
その後、メニューページに戻ると、次のように表示される料理のリストが表示されます.
メニューページの外観の結果は以下の通りです.
今、料理のリストを変更するには、レストランのオーナーだけでメニューのページエディタに移動し、ここでのアクションに従ってください
包む
ご覧のように、カスタムメニューの作成は非常に簡単です.グーテンベルグを使用する場合は、CSSコードのいくつかの行が美しい外観を得るためにあなたのメニューをカスタマイズする必要があります.また、メニューをより鮮やかで創造的にするために他のグーテンベルグのブロックを追加することによって、独自のレイアウトを作成することができます.
うまくいけば、Elementorとグーテンベルグを使用してカスタムメニューを作成する上でこれらの2つのチュートリアルでは、あなた自身が適切な方法で選択している.あなたが他のアイデアを持っている場合は、以下のコメントのセクションで私たちと共有することを躊躇しないでください.
--- --- ---
Meta Box年の出版.
Reference
この問題について(レストランのためのカスタムメニューを作成), 我々は、より多くの情報をここで見つけました https://dev.to/wpmetabox/create-a-custom-menu-for-restaurants-p2-use-gutenberg-2o2fテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol