como criar uma página de layout personalizada no tema personalizado

7

Quero criar um layout de página personalizado no meu tema personalizado. Eu criei um tema personalizado chamado "ktheme" com um tema pai. Eu criei cutome_home.xmlna pasta de layout, mas estou recebendo uma página inicial em branco.

Como posso exibir o cabeçalho na página inicial?

kalpak savaliya
fonte
1
compartilhar seu código tema aqui
Arunendra

Respostas:

18

Sua pergunta é muito breve, parece que você está tentando criar um novo layout de página? Se estiver correto, você também deve declarar layouts.xml.

Documentação oficial

Como criar um layout de página personalizado

Adicione seu layout

Neste exemplo, criarei um layout chamado Test Layout, exatamente o mesmo que o layout de uma coluna, mas você pode adicionar o seu aqui.

Crie este arquivo (alterando o nome para se adequar ao seu layout):

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

Conteúdo:

<?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>

Meu layout de teste é baseado no layout de página vazio, portanto, a partir do zero, você também pode criar um layout com outro layout, como 2 colunas à esquerda ou 3 colunas. Para fazer isso, substitua <update handle="empty"/>pelo layout que você deseja usar, por exemplo<update handle="3columns"/>

Informe o Magento do seu layout

Crie este arquivo XML:

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

É aqui que você declara seus layouts personalizados.

<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>

E agora podemos usar nosso novo layout no XML ou no administrador:

Layout da página

Ben Crook
fonte
quando eu selecionar layout de teste .. minha home page está chegando em branco ... o que devo fazer para adicionar cabeçalho na home page ..
Kalpak savaliya
Você precisará adicionar / editar seu layout no arquivo xml para exibir o que deseja, no meu exemplo seria test-layout.xml. Se você não sabe como adicionar contêineres via XML, sugiro ler a documentação - devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/… . Se você ainda não entende, se você fornecer seu código, poderemos ajudar ainda mais.
Ben Crook
Seguindo o seu exemplo eu recebo essas erro na minha system.log gist.githubusercontent.com/anonymous/...
Michelangelo
@ Michelangelo - Eu não acho que a maioria desses erros esteja relacionada a isso, além de No element found with ID 'before.body.end'.Você copiou e colou o código acima? Como esse erro não faz sentido para mim, não dissemos que o Magento before.body.endé um elemento, é um nome de bloco.
Ben Crook
1
Muitos exemplos não mencionam colocá-lo na subpasta Magento_Theme do tema, este é o único e primeiro lugar que encontrei essas informações. Adereços. Esta solução funciona para Magento 2.2
Hugh Wood