Pular para o conteúdo principal

Estrutura de Pastas do Tema

Uma estrutura de pastas bem organizada é crucial para o desenvolvimento eficiente de temas WordPress. A seguir, apresentamos a estrutura do nosso tema-base, facilitando a manutenção e a colaboração nos projetos de temas para WordPress.

Nessa seção da documentação iremos sobrevoar o tema e dar uma visão geral de como o tema é estruturado nas pastas mais externas, antes de colocar uma lupa sobre as seções mais internas.

O tema por fora

Descrição da Estrutura de Pastas​

tema-nome/​

O diretório raiz do seu tema, contendo todos os arquivos e subdiretórios relacionados.

assets/​

Armazena recursos estáticos como CSS, JavaScript, imagens e SVGs.

  • css/: Folhas de estilo compiladas do tema.
    • style.css: O estilo principal do tema.
    • admin.css: Estilos específicos para a área administrativa.
  • js/: Scripts JavaScript.
    • script.js: Scripts utilizados no front-end.
    • admin.js: Scripts específicos para a área de administração.
  • imgs/: Imagens utilizadas no tema.
    • logo.png: Um exemplo de imagem (logo do tema).
  • svg/: Diretório para arquivos SVG.

src/​

Diretório para desenvolvimento front-end, como SASS/SCSS, JavaScript pré-processado.

  • scss/: Contém todos os arquivos SASS/SCSS.
    • base/: Configurações base do SASS.
    • components/: Estilos para componentes específicos.
    • custom-style/: Estilos personalizados.
    • woocommerce/: Estilos específicos para WooCommerce.
    • _base.scss: Arquivo base SASS.
    • _custom-base.scss: Arquivo base para estilos personalizados.
    • _custom-style.scss: Estilos personalizados adicionais.
    • style.scss: Arquivo principal SASS que compila para style.css.
  • js/: Scripts JavaScript pré-processados.
    • components/: Componentes JavaScript específicos.
    • dev/: Arquivos de desenvolvimento, como scripts JS não minificados.

template-parts/​

Armazena partes de templates reutilizáveis.

  • template-part.php: Um exemplo de parte de template.
  • special-template.php: Templates especiais fora da hierarquia padrão.

Arquivos Raiz do Tema​

  • functions.php: Define funcionalidades e hooks do tema.
  • gulpfile.js: Configurações do Gulp para automação de tarefas.
  • index.php: O arquivo principal do tema.
  • style.css: A folha de estilo principal (informações do tema).
  • screenshot.png: Imagem de pré-visualização do tema.

Estrutura de diretórios​

tema-nome/
├── assets/
│   ├── css/
│   │   ├── style.css
│   │   └── admin.css
│   ├── js/
│   │   ├── script.js
│   │   └── admin.js
│   ├── imgs/
│   │   └── logo.png
│   └── svg/
├── inc/
│   ├── customizer.php
│   └── template-tags.php
├── src/
│   ├── js/
│   │   ├── components/
│   │   └── dev/
│   ├── scss/
│   │   ├── base/
│   │   ├── components/
│   │   ├── custom-style/
│   │   ├── dev/
│   │   └── woocommerce/
│   │   _base.scss
│   │   _custom-base.scss
│   │   _custom-style.scss
│   │   _custom.scss
│   └── style.scss
├── template-parts/
│   ├── template-part.php
│   └── special-template.php
├── functions.php
├── gulpfile.js
├── index.php
├── style.css
└── screenshot.png

Conclusão​

Adotar esta estrutura de pastas para o desenvolvimento de temas WordPress ajuda a manter o código organizado, facilita a navegação por diferentes partes do projeto e melhora a colaboração entre desenvolvedores. Lembre-se de adaptar a estrutura conforme necessário para atender às necessidades específicas do seu projeto.