Introdução ao desenvolvimento de temas para WordPress: Construa o seu primeiro tema personalizado do zero

Para qualquer desenvolvedor que deseje personalizar profundamente a aparência e as funcionalidades de um site, aprender a desenvolver temas para WordPress é uma habilidade de grande valor. Diferentemente do uso de temas prontos, criar seus próprios temas significa que você tem total controle e pode criar um site único, de alto desempenho e que atenda às suas necessidades específicas. Este artigo guiará você pelos passos essenciais para criar o seu primeiro tema personalizado para WordPress, desde a configuração do ambiente até a criação dos arquivos de modelo básicos.

Preparação do ambiente de desenvolvimento e ferramentas

Antes de começar a escrever o código, você precisa de um ambiente de desenvolvimento local adequado. Isso permitirá que você faça testes e depurações sem afetar o site online.

Configuração do ambiente do servidor local

Recomendamos o uso de pacotes de software de servidor local integrados, como XAMPP, MAMP (para Mac) ou Local by Flywheel. Esses ferramentas instalam de forma prática o servidor Apache, o banco de dados MySQL e o PHP em um único clique, eliminando o processo de configuração complexo. Tomando o XAMPP como exemplo: após a instalação, basta iniciar os serviços Apache e MySQL para ter um ambiente de servidor local pronto para uso.

Seleção de editores de código

Um editor de código poderoso é uma ferramenta essencial para um desenvolvimento eficiente. O Visual Studio Code (VS Code) é uma escolha muito popular atualmente: é gratuito, leve e possui uma vasta gama de extensões, como o PHP Intelephense (para sugestões inteligentes de código em PHP), o WordPress Snippet (para fragmentos de código) e o Live Server (para visualização em tempo real), o que pode aumentar significativamente a eficiência do desenvolvimento.

Instalação dos arquivos principais do WordPress

No diretório raiz do seu servidor local (por exemplo, a pasta `htdocs` do XAMPP), crie uma nova pasta de projeto, chamada `my-first-theme`. Em seguida, acesse o site oficial do WordPress.org para baixar o pacote comprimido mais recente do WordPress. Após descompactá-lo, coloque todos os arquivos na pasta `my-first-theme`. Depois, acesse `http://localhost/my-first-theme` em um navegador e siga as instruções do famoso guia de instalação em “cinco minutos” para instalar o WordPress. Lembre-se dos nomes de dados, do nome de usuário e da senha que você configurou, pois eles serão necessários para conectar ao banco de dados posteriormente.

Hospedagem para sites WordPress da UltraHost

Garantia de reembolso em 30 dias, largura de banda ilimitada e banco de dados, proteção contra DDoS gratuita; desconto de 50% na compra de 3 anos (planos de 4 TB a 10 TB).

página de acesso

Estrutura básica e arquivos para criar um tópico

Um tema para WordPress é, essencialmente, uma pasta localizada no diretório `wp-content/themes/`, que contém uma série de arquivos de modelo PHP, arquivos de estilo (CSS) e arquivos de script com funções específicas.

Pastas temáticas e tabelas de estilos

Primeiro, entre no diretório `wp-content/themes/` da sua instalação local do WordPress e crie uma nova pasta com o nome do seu tema, por exemplo, `mycustomtheme`. Dentro desta pasta, o primeiro e mais importante arquivo que você deve criar é o `style.css`. As notas no início deste arquivo não servem apenas para declarar as informações do tema, mas também são essenciais para que o WordPress reconheça o tema.

Leitura recomendada Guia introdutório ao desenvolvimento de temas WordPress: construa seu tema personalizado do zero。

"""```css
/*
Nome do Tema: Meu Tema Personalizado
URI do Tema: https://example.com/mycustomtheme
Autor: Seu Nome
URI do autor: https://example.com
Descrição: Este é o meu primeiro tema personalizado para o WordPress, usado para aprender sobre desenvolvimento.
Versão: 1.0.0
Licença: GPL v2 ou posterior
Domínio do texto: mycustomtheme
*/
```

Arquivos de modelo principais: index.php e functions.php

Crie o arquivo `index.php`. Este é o arquivo de modelo padrão e de reserva do tema; se nenhum outro arquivo de modelo mais específico estiver disponível, o WordPress o utilizará para renderizar a página. Inicialmente, ele pode ser muito simples.

```php
<!DOCTYPE html>
<html no numeric noise key 1000>
<head>
<meta charset="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1000>

Em seguida, crie o arquivo `functions.php`. Este é o “motor” do seu tema, usado para adicionar funcionalidades, ativar recursos (como miniaturas de artigos) e gerenciar a carga sequencial de estilos e scripts.

```php
<?php
// Ativar a funcionalidade de imagens especiais para os artigos
`add_theme_support('post-thumbnails');`;

hospedagem compartilhada da hosting.com

Alto desempenho com CPUs AMD EPYC, armazenamento SSD NVMe e LiteSpeed, suporte interno especializado 24 horas por dia, 7 dias por semana, medidas de segurança avançadas, incluindo SSL, força bruta, malware e proteção contra DDoS, economia de até 73%

página de acesso

// Adicionar suporte ao menu
add_theme_support('menus');

// Registre uma posição para um item de menu de navegação
register_nav_menus( array(
'primary' => __( '主导航菜单', 'mycustomtheme' ),
) );

// A importação correta do arquivo de estilo principal
function mycustomtheme_enqueue_styles() {
wp_enqueue_style( 'mycustomtheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mycustomtheme_enqueue_styles' );
```

Leitura recomendada Introdução ao desenvolvimento de temas WordPress: construa seu primeiro tema personalizado do zero。

Após concluir os passos acima, faça login no painel administrativo do seu WordPress. Na seção “Aparência” -> “Temas”, você deverá ver o tema “My Custom Theme” listado. Clique para ativarlo.

Níveis de templates e arquivos de templates comuns

Compreender a estrutura hierárquica dos templates do WordPress é fundamental para o desenvolvimento de temas. Essa estrutura determina qual arquivo de template o WordPress irá utilizar prioritariamente em resposta a diferentes tipos de solicitações de páginas.

Hospedagem Compartilhada InterServer

Hospedagem compartilhada $2.50 USD por mês, primeiro mês $0.1 USD código promocional tryinterserver, 461 scripts de aplicativos em nuvem, instalação com um clique.

página de acesso

Conceito de níveis de templates

O WordPress procura os arquivos de template de acordo com o tipo de página que está sendo exibido, seguindo uma ordem de prioridade específica. Por exemplo, ao acessar um artigo de blog individual, o WordPress procura sequencialmente pelos arquivos: `single-post.php` -> `single.php` -> `singular.php` -> `index.php`. Assim que encontrar o primeiro arquivo que exista, ele o utiliza.

Criar ficheiros de modelo comuns

Com base nessa estrutura, você pode começar a criar arquivos de modelo mais específicos para aprimorar o seu tema.

• `header.php` e `footer.php`: Separe o código do cabeçalho e do rodapé presentes no `index.php` para esses dois arquivos, e depois use as funções `get_header()` e `get_footer()` no `index.php` para incluí-los. Isso permite o reaproveitamento do código.
• `page.php`: Utilizado para exibir páginas estáticas. Você pode começar copiando o conteúdo do `index.php` para criar essa página e, em seguida, fazer modificações personalizadas.
• `single.php`: Utilizado para exibir um único artigo. Geralmente, este arquivo contém informações como o título do artigo, o conteúdo, a data de publicação, o autor, as categorias e as tags relacionadas ao artigo.
• `archive.php`: Utilizado para exibir a lista de arquivos de artigos, como páginas de arquivamento por categoria, tag, autor ou data.
• `front-page.php`: Se este arquivo existir, ele será usado como a página inicial do site, com prioridade maior do que `home.php` e `index.php`. Você pode criar um layout único para a página inicial aqui.

Após criar esses arquivos, a estrutura do seu tema ficará mais clara e profissional.

Leitura recomendada Guia completo para o desenvolvimento de temas do WordPress: do início ao avançado.。

Adicionar estilos e funcionalidades básicas

Um tema sem estilo é considerado “primitivo” (ou “básico”), mas algumas funcionalidades fundamentais podem melhorar significativamente a praticidade e a experiência do usuário com esse tema.

Escrever estilos CSS básicos

Abaixo dos comentários no início do arquivo `style.css`, comece a escrever as suas regras de estilo. Comece redefinindo os estilos padrão do navegador, configurando as fontes e cores globais, e então programe gradualmente os estilos para a cabeça do site, o menu de navegação, a área principal de conteúdo, a barra lateral (se for adicionada mais tarde) e o rodapé. Utilize consultas de mídia de design responsivo para garantir que o site seja exibido corretamente em celulares, tablets e computadores.

"""```css
/* Redefinições básicas e estilos globais */
* {
`margin: 0;`;
\npadding: 0;
`box-sizing: border-box;`;
}
corpo {
`font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;`;
`line-height: 1.6;`;
Cor: #333;
`background-color: #f4f4f4;`;
}
.container {
Largura: 90%;
max-width: 1200px;
`margin: 0 auto;`;
Padrão: Nenhum; Preenchimento: 20px;
}
/* Estilos da cabeça */
cabeçalho {
Fundo: #333;
Cor: #fff;
`padding: 1rem 0;`;
alinhamento de texto: centro;
}
/* Estilo do menu de navegação */
.primary-menu {
/* Estilo do seu menu de navegação */
}
```

Implementar um menu de navegação e uma barra lateral

Na posição reservada para o menu no `header.php`, use a função `wp_nav_menu()` para carregar o menu registrado no `functions.php`.

```php

Para adicionar uma barra lateral, é necessário primeiro registrar uma área para os widgets da barra lateral em `functions.php`.

```php
function mycustomtheme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'mycustomtheme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'mycustomtheme' ),
'before_widget' => '