Entrar no mundo do WordPress e desenvolver o seu próprio tema é um marco emocionante. Não só lhe dá controlo total sobre a aparência e funcionalidade do seu site, como também é a melhor forma de compreender os princípios básicos do funcionamento do WordPress. Este guia irá guiá-lo, desde o início, na construção de um tema básico, mas completo, abrangendo todos os passos fundamentais, desde a estrutura de ficheiros até aos modelos principais.
Ambiente de desenvolvimento e construção da estrutura do tema
Antes de começar a programar, é necessário um ambiente de desenvolvimento adequado. Recomenda-se utilizar software de servidor local, como XAMPP, WAMP ou MAMP, que permite configurar rapidamente um ambiente com Apache, MySQL e PHP no computador local. Além disso, um editor de código eficiente, como Visual Studio Code, Sublime Text ou PHPStorm, também é essencial.
Um tema básico do WordPress necessita, pelo menos, de dois ficheiros:style.csseindex.php。style.cssNão é apenas uma folha de estilos, é também um “cartão de identidade” do tema. O WordPress identifica o seu tema ao ler as informações de comentários no cabeçalho deste ficheiro. Primeiro, no diretório da sua instalação local do WordPress:wp-content/themesDentro da pasta, crie uma nova pasta, por exemplo…my-first-themeEm seguida, crie dentro desta pastastyle.cssDocumentos.
Leitura recomendada Dominando o desenvolvimento de temas para WordPress: Um guia completo e prático do zero ao topo。
A definição de informações sobre o tópico.
Nosstyle.cssNo topo do documento, você precisa adicionar um bloco de notas específico para definir as metainformações do tópico.
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/Dentre eles,Theme NameeText DomainÉ um campo obrigatório. O campo de texto é utilizado para traduções internacionalizadas e, geralmente, é consistente com o nome da pasta do tópico.
Criação do arquivo de modelo principal
index.phpÉ o modelo padrão do tema e também o modelo de recurso mais importante. Quando o WordPress não consegue encontrar um arquivo de modelo mais específico (comosingle.php, page.phpVocê usará isso quando quiser criar uma página de "sobre mim". Pode colocar nela a estrutura HTML mais básica e algumas funções do WordPress para obter e exibir o conteúdo.
Arquivos de modelo principais e ciclos
O sistema de temas do WordPress é orientado por modelos, sendo que diferentes tipos de páginas são controlados por diferentes ficheiros de modelos. Compreender e criar estes ficheiros de modelos principais é fundamental para o desenvolvimento de temas.
O conceito central é o “Loop do WordPress”, que é uma estrutura de código PHP usada para obter artigos (posts) do banco de dados e exibi-los um por um. Quase todos os ficheiros de modelo usados para exibir conteúdo dependem do loop.
Leitura recomendada Como criar um tema profissional do WordPress: um guia completo, do início ao lançamento.。
A construção do modelo da página inicial.
index.phpO ficheiro deve incluir a estrutura HTML completa e os ciclos. Um exemplo simples é o seguinte:
<!DOCTYPE html>
<html no numeric noise key 1021>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1018>
<?php wp_body_open(); ?>
<header>
<h1><a href="/pt/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</header>
<main>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1010>
<h2><a href="/pt/</?php the_permalink(); ?>">\n</a></h2>
<div class="entry-content">
\n
</div>
</article>
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
</main>
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Este ficheiro define a estrutura básica da página web e utiliza a saída em ciclo para apresentar a lista de artigos na área principal. Funções comothe_title()、the_excerpt()É usado para exibir o conteúdo do artigo, enquantowp_head()ewp_footer()É um gancho crucial, usado para permitir que o núcleo do WordPress, os plugins e outros scripts insiram o código necessário.
Artigo e modelo de página
single.phpUsado para exibir um único artigo.page.phpSão utilizados para apresentar uma única página. Têm uma estrutura semelhante, mas geralmentesingle.phpIrá incluir elementos como classificações e etiquetas, epage.phpÉ ainda mais conciso. Pode copiar a partir daqui.index.phpComece a criá-los e, em seguida, substitua o conteúdo dentro do ciclo porthe_content()Para exibir o texto completo…
Introduzir estilos e scripts
Os temas modernos necessitam de um bom estilo e funcionalidade interativa. O WordPress fornece funções padrão para introduzir ficheiros CSS e JavaScript de forma segura, em vez de os utilizar diretamente no HTML.<link>ou<script>Tags.
Criação e utilização de ficheiros de funções
Você precisa criar um nome chamadofunctions.phpEste ficheiro não é um ficheiro de modelo, mas sim um ficheiro de “funcionalidade adicional” do tema, utilizado para adicionar funcionalidades, ativar recursos ou alterar o comportamento predefinido do WordPress. Aqui, registamos as folhas de estilo e os scripts.
Despejar com segurança os recursos.
Nosfunctions.phpNo entanto, na China, é usadowp_enqueue_style()ewp_enqueue_script()Função. Uma prática padrão é criar uma função e, em seguida, passá-la como um parâmetro para outra função.wp_enqueue_scriptsEste gatilho de ação é usado para invocá-lo.
Leitura recomendada Guia Definitivo: Como Desenvolver um Tema Profissional para WordPress do Zero。
<?php
function my_first_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
// 引入自定义CSS文件
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
// 引入JavaScript文件
wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Este código garante que os ficheiros CSS e JS sejam carregados no momento certo.get_stylesheet_uri()A função irá retornar o tema dostyle.cssO caminho do ficheiro.get_template_directory_uri()Em seguida, retorna o URL do diretório do tópico.
Elementos de modelo e funcionalidade do tema
Quando o tema se torna cada vez mais complexo, é uma boa prática modularizar os trechos de código repetidos. O WordPress oferece as funcionalidades de “Partes de Modelo” (Template Parts) e “Menus de Navegação” (Navigation Menus).
Criar componentes de modelo reutilizáveis.
Por exemplo, separar o cabeçalho e o rodapé do site em ficheiros independentes. Pode criarheader.phpefooter.phpArquivo, será…index.phpCopie o código correspondente no Windows e, em seguida, utilize as seguintes chamadas de função na localização original:
<?php get_header(); ?>
<?php get_footer(); ?>Você também pode criar componentes mais universais, como por exemplo,content.phpoupost-item.php\n, usado dentro do ciclo.get_template_part()Os módulos são carregados através de funções, o que aumenta significativamente a reutilização do código.
Ativar e personalizar o menu de navegação.
O sistema de menus do WordPress é muito poderoso. Primeiro, é necessário...functions.phpUse isto no chinês (simplificado)register_nav_menus()Função para registrar a posição dos pratos.
function my_first_theme_setup() {
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-first-theme' ),
'footer' => __( 'Footer Menu', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );Em seguida, no arquivo de template (como…)header.phpNo local onde você deseja exibir o menu, usewp_nav_menu()Uma função para exibi-lo.
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>Agora, os utilizadores podem criar menus na secção “Aparência” -> “Menus” do WordPress e atribuí-los à posição “Menu Principal”.
resumos
Através deste guia, você concluiu todo o processo de transformar uma pasta vazia num tema WordPress com funcionalidades básicas. Aprendeu a criar os ficheiros necessários.style.csseindex.phpApós entender o papel central do ciclo do WordPress, construímossingle.phpepage.phpVocê também aprendeu como fazer isso através defunctions.phpAdicionar estilos e scripts de forma segura, bem como utilizar componentes de modelo e sistemas de menu de navegação para organizar o código e melhorar a funcionalidade do tema. Este é apenas um ponto de partida. Em seguida, você pode explorar barras laterais, áreas de widgets, tipos de artigos personalizados, a API do personalizador de temas e outros recursos mais avançados para enriquecer e aperfeiçoar o seu tema.
Perguntas frequentes Perguntas frequentes
O desenvolvimento de temas precisa começar do zero?
Não necessariamente. Para iniciantes, aprender do zero é a melhor forma. Mas, em projetos reais, pode-se optar por utilizar um tema em branco oficial (como o Underscores), um framework (como o Genesis) ou um tema inicial (como o _s), que já possuem uma estrutura de código básica sólida, permitindo que se concentre mais no design e no desenvolvimento da lógica de negócios.
O ficheiro index.php é necessário?
Sim.index.phpÉ um ficheiro de modelo necessário para o tema do WordPress. É a última linha de defesa no nível do modelo, caso outros ficheiros de modelo mais específicos (como, por exemplo,archive.php, search.phpSe não existir, o WordPress irá usarindex.phpPara mostrar a página, certifique-se de que o site sempre tem conteúdo para apresentar.
Como posso depurar problemas no desenvolvimento do meu tema?
Primeiro, certifique-se de que em seu…wp-config.phpO modo WP_DEBUG foi ativado no ficheiro. Vaidefine( ‘WP_DEBUG’, true );Esta linha é definida como true. Isto irá permitir que os erros do PHP e os avisos do WordPress sejam exibidos diretamente na página, facilitando a localização de problemas. Ao mesmo tempo, é muito importante verificar os erros de CSS e JavaScript usando as ferramentas de desenvolvedor do navegador (acessíveis pressionando F12).
Eu posso fazer qualquer coisa no ficheiro functions.php do tema?
Em teoria, é possível, mas a melhor prática é adicionar apenas o código diretamente relacionado com a aparência e funcionalidade do tema. Para funcionalidades complexas relacionadas com a lógica do negócio principal ou manipulação de dados, deve-se considerar o desenvolvimento de plugins independentes. A vantagem disso é que, quando os utilizadores mudam de tema, essas funcionalidades não são perdidas, o que melhora a manutenção e a reutilização do código.
O que vem a seguir, o que vem a seguir?
Leitura ampliada e conhecimento prático
Os seguintes estão relacionados ao tópico deste artigo e são adequados para uma leitura mais aprofundada. Geralmente, é melhor priorizar o artigo que está mais próximo do seu problema atual e, em seguida, expandir gradualmente para os tópicos adjacentes.
- Como escolher e personalizar o tema perfeito para o seu WordPress?
- Guia de Desenvolvimento de Temas para WordPress: Construindo Sites Personalizados do Zero
- Guia Completo para o Desenvolvimento de Temas WordPress: Um Tutorial Prático do Zero à Proficiência
- Guia Completo para o Desenvolvimento de Temas WordPress: Construindo Modelos de Sites de Nível Profissional do Zero
- Do Zero ao Um: Um Guia Completo e Prático para Construir Sites Profissionais com o WordPress
Português do Brasil