Magento2でカスタムホームページテンプレートを作成する


11

あなたが知っているように、magento2には1カラム、2カラム左、2カラム右、3カラムなどのレイアウトテンプレートがあり、Magento2でカスタムホームページレイアウトテンプレートを作成したいので、いくつかのチュートリアルに従ってモジュールとファイルを作成しますそれらのリンクは機能していませんが、cmsページ->デザインタブで「ホームページ」レイアウトを取得できません。

私は以下のすべてのリンクをたどっていますが、どれも機能していないため、適切な解決策を持っている人は誰でも共有してください。

最初のリンク

2番目のリンク

3番目のリンク

フォースリンク

Abloveすべてのソリューションが機能していません。


@Khoa TruongDinhこの質問の答えを知っていますか?
Dhaval

回答:


23

まず、カスタムテーマMagento 2を作成する方法を知る必要があります。詳細については、http//devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-createをご覧ください。 html

新しいカスタムテーマを作成した後。ホームページの新しいカスタムレイアウトを作成します。たとえば、フォルダ構造は次のとおりです。

ここに画像の説明を入力してください

我々は2つのXMLファイルに焦点を当てるべきである:layouts.xmlpage_layout/custom_home.xml下のMagento_Themeフォルダ

app / design / frontend / Boolfly / book / Magento_Theme / layouts.xml

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">

    <layout id="custom_home">
        <label translate="true">Custom Home</label>
    </layout>

</page_layouts>

レイアウトID custom_homeは、以下のページレイアウトの名前です。

app / design / frontend / Boolfly / book / Magento_Theme / page_layout / custom_home.xml1column.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>

Magento管理にログインし、cmsホームページを見つけます。これで、カスタムレイアウトのホームページがレイアウトのリストに追加されました。

ここに画像の説明を入力してください

このレイアウトを選択すると、フロントページに表示されます。

ここに画像の説明を入力してください

注:確かにMagentoのキャッシュはクリアされています。


1
パーフェクト!!!!! 私はあなたの道をたどり、私の仕事を終えました。ありがとうbro
Dhaval

私はすでに賛成していますが、おそらく回答の最後の部分で、スクリーンショットからデザインタブを見つける場所を正確に説明できるでしょう。
ジョシュア洪水

0

これは管理者から簡単に実現できます。すでにテーマを作成していると思います。

新しいテーマを作成した後、ホームブロックがホームページに割り当てられていないため、新しいテーマを作成すると混乱しました。手動でのみ行います。

指示に従ってください

管理者にログインし、次に移動します

コンテンツ->ページ

ホームページを見つけて、アクション列で編集をクリックしてから

[コンテンツ]タブをクリックし、以下の値をテキスト領域に配置します

{{block class="Magento\Cms\Block\Block" block_id="home-page-block"}}

注:ここでblock_idはブロックの一意のIDです。Content- > Blocksの下にリストブロックとブロックIDがあります。

最後にページを保存

次に、magentoとブラウザのキャッシュをクリアし、ホームページをロードすると、ホームページがlumaホームページのように見えることがわかります。

あなたはホームページのHTMLコンテンツを検索したい場合は、ブロックを見つけるホームページブロックの下のContent>ブロックを、次に編集ブロックを、あなたは見ることができたホームページのHTMLコンテンツを

このhtmlを参照してください。その後、要件に応じて独自のhtmlを開発できます。テーマレイアウトファイルからCSSを追加します。

あなたはコメントで言及するだけの明確化が必要です

頑張ってください。


あなたがmagento2で知っているように、1列、2列左、2列右、3列などのようないくつかのテンプレートがあります。ex:home-page用にこのようなテンプレートを作成したいのですが、この新しいレイアウトを割り当てたいですcms->ページ->ホームページ。今あなたは私のポイントを手に入れましたか?
Dhaval

私はあなたがホームページのコンテンツをカスタマイズしようとしたと思った:-)私はあなたが尋ねる前に試したことがないので、誰かがあなたに手渡すのを手伝うことはできません。
Bilal Usean 2016年

私はそれを試しましたが、私の場合は機能しません
ユスフイブラヒム
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.