カスタムテーマでカスタムレイアウトページを作成する方法


7

カスタムテーマでカスタムページレイアウトを作成したい。親テーマを持つ「ktheme」というカスタムテーマを作成しました。cutome_home.xmlレイアウトフォルダーで作成しましたが、空白のホームページしか表示されません。

ヘッダーをホームページに表示するにはどうすればよいですか?


1
ここでテーマコードを共有
Arunendra

回答:


18

あなたの質問は非常に簡単です、それはあなたが新しいページレイアウトを作成しようとしているように聞こえますか?それが正しい場合は、でも宣言する必要がありますlayouts.xml

公式ドキュメント

カスタムページレイアウトを作成する方法

レイアウトを追加

この例では、Test Layoutという名前のレイアウトを作成します。これは1列のレイアウトとまったく同じですが、ここに独自のレイアウトを追加できます。

このファイルを作成します(レイアウトに合わせて名前を変更します)。

app/design/frontend/**VENDOR**/**THEME**/Magento_Theme/page_layout/test-layout.xml

コンテンツ:

<?xml version="1.0" ?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container"  htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
    </referenceContainer>
</layout>

私のテストレイアウトは空のページレイアウトに基づいているため、ゼロから開始します。2列左または3列など、別のレイアウトに基づいてレイアウトを作成することもできます。これを行う<update handle="empty"/>には、使用したいレイアウトに置き換えるだけです。たとえば、<update handle="3columns"/>

Magentoにレイアウトを通知する

次のXMLファイルを作成します。

app/design/frontend/**VENDOR**/**THEME**/Magento_Theme/layouts.xml

ここで、カスタムレイアウトを宣言します。

<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="test-layout">
        <label translate="true">Test Layout</label>
    </layout>
</page_layouts>

これで、XMLまたは管理者のいずれかで新しいレイアウトを使用できます。

ページレイアウト


私はテストのレイアウトを選択した場合..私のホームページは..私は、ホームページにヘッダを追加するために何をすべきか...空白を来ている
kalpak savaliya

レイアウトをxmlファイルに追加/編集して、必要なものを表示する必要があります。この例では、test-layout.xmlです。XML経由でコンテナーを追加する方法がわからない場合は、ドキュメント-devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/…を読むことをお勧めします。それでも理解できない場合は、コードを提供していただければ、さらにお手伝いできます。
ベン・クルック

あなたのサンプルに続いて、私は私のsystem.loggist.githubusercontent.com/anonymous/…でこれらのエラーを受け取ります
ミケランジェロ

@ミケランジェロ-ほとんどのエラーはこれに関連しているとは思いませんがNo element found with ID 'before.body.end'.、上記のコードをコピーして貼り付けましたか?そのエラーは私には意味がありませんので、Magento before.body.endが要素であることは伝えていません。それはブロック名です。
Ben Crook 2017

1
多くの例では、テーマのMagento_Themeサブフォルダーに配置することについて言及していません。これが、この情報を見つけた唯一の最初の場所です。小道具。このソリューションはMagento 2.2
Hugh Wood
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.