Guia Completo para Iniciantes no Desenvolvimento de Temas para WordPress: Construa o Seu Primeiro Tema do Zero

Preparação do Ambiente e Conceitos Básicos

Antes de começar a escrever o código, você precisa de um ambiente de desenvolvimento local adequado. É recomendado usar pacotes de software de servidor local integrados, como Local by Flywheel, XAMPP ou MAMP. Nos seus sites locais, os arquivos principais do WordPress já devem estar instalados.

Qualquer tema do WordPress deve conter dois arquivos básicos:style.css e index.php。style.css Não é apenas um arquivo de estilo (stylesheet), mas também o “cartão de identidade” de um tema. Esse arquivo declara as informações do tema para o WordPress através de um cabeçalho especial (Theme Header).index.php É o arquivo de modelo padrão do tema, responsável por processar todos os pedidos de página para os quais não foi especificado um modelo dedicado.

Um tema típico segue uma estrutura de diretórios bem definida. O arquivo de modelo principal (template) geralmente está localizado diretamente no diretório raiz do tema, enquanto os recursos CSS, JavaScript e imagens são armazenados em pastas separadas. /css、/js e /images Em subdiretórios como esses, para tópicos mais complexos, você provavelmente também encontrará mais conteúdo. /template-parts O diretório é usado para armazenar fragmentos de templates reutilizáveis./inc O diretório é usado para armazenar arquivos que contêm aprimoramentos de funcionalidades.

Leitura recomendada Guia definitivo para o desenvolvimento de temas do WordPress: construir um modelo personalizado do zero。

Compreender a hierarquia dos templates do WordPress

O WordPress utiliza um sistema inteligente chamado “Hierarquia de Templates” (Template Hierarchy) para determinar qual arquivo de template deve ser usado em uma determinada página. Esse sistema é a lógica central no desenvolvimento de temas.

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

Por exemplo, quando um usuário visita a página inicial do blog, o WordPress procura primeiro se existe um arquivo com o nome… front-page.php O arquivo em questão. Se não for encontrado, ele continuará a procura. home.phpSe isso ainda não acontecer, no final, o sistema voltará ao uso dos valores padrão. index.phpPara um artigo específico, a ordem de busca no WordPress é:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。

Compreender e utilizar bem a estrutura hierárquica dos templates permite que você crie layouts e aparências altamente personalizados para diferentes tipos de páginas (como artigos de blog, páginas estáticas, arquivos de categorias, páginas de resultados de busca, etc.), sem a necessidade de escrever logicas complexas de condição.

Declaração de informações sobre o tema

style.css O início do arquivo deve conter uma seção de informações de cabeçalho no formato de comentário CSS, utilizada para definir os metadados do tema. Um exemplo minimizado é o seguinte:

/*
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.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Dentre esses elementos, o “Text Domain” é utilizado para a internacionalização e é um identificador essencial para a chamada subsequente das funções de tradução. O cabeçalho deste arquivo é a única informação necessária para que o WordPress reconheça e ative o seu tema.

Leitura recomendada Desenvolvimento de temas WordPress do início ao fim: um guia essencial para criar sites personalizados.。

Construir o arquivo de modelo principal

Vamos começar construindo a partir do arquivo de template mais importante. Primeiro, index.php Escreva a estrutura básica no código. Um arquivo de template padrão deve conter referências para a cabeça (header), a área de conteúdo principal, a barra lateral e o rodapé (footer).

Os arquivos de modelos básicos geralmente contêm as seguintes chamadas de funções do núcleo do WordPress:get_header()、get_footer()、get_sidebar() também get_template_part()Essas funções introduzem os arquivos de template correspondentes, modularizando assim a estrutura da página.

Criar um modelo de cabeçalho

header.php O arquivo contém o conteúdo que será exibido no topo de cada página. Ele deve conter, no mínimo, a declaração do tipo de documento em HTML5. <!DOCTYPE html>、<head> O início da área e do corpo da página… <body> 及 <header> Tags.

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

Nos <head> Nessa região, é de extrema importância utilizar… wp_head() Gancho. Esse gancho permite que o núcleo do WordPress, os plugins e o próprio tema insiram o código necessário no cabeçalho da página, como links para tabelas de estilo, metatags e scripts. Um exemplo simples de modelo de cabeçalho:

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <h1 class="site-title"><a href="/pt/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>

body_class() A função exibe uma série de nomes de classes CSS baseados no tipo da página atual, o que facilita muito o controle dos estilos.

Criar o ciclo principal e a exibição do conteúdo.

O WordPress utiliza o “The Loop” para percorrer e exibir a lista de artigos encontrados na consulta atual. O The Loop é a parte mais central dos arquivos de template e, geralmente, aparece… index.php、single.php ou archive.php Médio.

Leitura recomendada Domine o desenvolvimento de temas do WordPress: um guia completo de construção e aplicação, do zero.。

Uma estrutura típica de ciclo principal é a seguinte:

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <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>

Dentro do loop, você pode usar uma série de tags de modelo que começam com “the_”, como the_title()、the_content()、the_excerpt() e the_post_thumbnail()Para isso, vamos extrair as várias partes do artigo.

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

Adicionar estilos e funcionalidades

A apresentação visual do tema é controlada pelo CSS. Além disso… style.css Além de escrever estilos diretamente no código, uma maneira mais profissional de definir estilos é através do uso de… functions.php Os arquivos são utilizados para organizar a sequência de carregamento de tabelas de estilos (style sheets) e scripts, a fim de garantir que as dependências sejam respeitadas e que o carregamento ocorra de forma correta.

functions.php O arquivo é um “aumentador de funcionalidades” para o seu tema. Não se trata de um arquivo de modelo, mas sim de um arquivo PHP que é carregado automaticamente durante a inicialização do tema, sendo utilizado para definir funções, classes, ganchos (Hooks) e filtros (Filters).

Introduzir corretamente estilos e scripts

Você deve usar… wp_enqueue_style() e wp_enqueue_script() Funções para adicionar recursos. Essas funções devem ser montadas (ou vinculadas) ao sistema. wp_enqueue_scripts Essa ação está vinculada a um “gancho” (hook). A vantagem disso é que o WordPress consegue gerenciar os recursos de forma centralizada, evitando carregamentos repetidos e conflitos de dependências.

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 加载一个自定义的 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Menu de registro e barra lateral

Os menus e as barras laterais (áreas de ferramentas) do WordPress precisam ser configurados previamente. functions.php Você deve “se registrar” primeiro e, só depois disso, poderá “exibir” o conteúdo no arquivo de modelo correspondente.

fazer uso de register_nav_menus() Função para registrar a posição do prato:

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' );

E então, header.php Neste contexto, você pode usar… wp_nav_menu() Uma função para exibir o menu principal.

fazer uso de register_sidebar() Função para registrar a área dos gadgets:

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main Sidebar', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here.', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Depois disso, em sidebar.php No entanto, na China, é usado dynamic_sidebar() Uma função é usada para chamar essa área.

Testes de Tema e Lançamento

Após a conclusão do desenvolvimento, é necessário realizar testes abrangentes. Isso inclui verificar o comportamento da temática em diferentes navegadores (Chrome, Firefox, Safari, Edge) e em vários tamanhos de dispositivos (desktop, tablet, celular). Assegure-se de que todos os links estejam funcionando corretamente, que os formulários estejam operando sem problemas e que os menus sejam exibidos de maneira adequada em telas menores.

Ativar o modo de depuração

Durante o processo de desenvolvimento, é altamente recomendável ativar o modo de depuração do WordPress. Isso ajudará você a identificar rapidamente erros, avisos e notificações em PHP. wp-config.php No arquivo, encontre e modifique a seguinte linha:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不要在页面上显示错误

abre WP_DEBUG_LOG É possível registrar as informações de erro em um arquivo de log, evitando que informações sensíveis sejam expostas diretamente aos visitantes do site.

Verificar os padrões de tópicos

Antes de ser publicado ou colocado em uso, o seu tema deve seguir, na medida do possível, as “Normas de Desenvolvimento de Temas para WordPress”. Isso inclui, mas não se limita a: garantir que todos os dados exibidos na página sejam devidamente escapados (utilizando os métodos apropriados). esc_html()、esc_url() (funções como “esperar”), todo o texto que pode ser traduzido deve ser utilizado. __() ou _e() O código da função é encapsulado (embalado) de forma a ser mais reutilizável, e o código temático (tematic code) não contém nenhum URL codificado diretamente (hardcoded).

Você pode usar o plugin oficial “Theme Check” para realizar verificações automatizadas de conformidade no seu tema. Ele analisará o seu código e indicará possíveis problemas, vulnerabilidades de segurança ou discrepâncias em relação aos padrões estabelecidos.

Pronto para ser publicado.

Após o desenvolvimento, teste e revisão do tema, você pode optar por publicá-lo no diretório de temas do WordPress.org ou por empacotá-lo para uso pessoal ou por clientes. O pacote de publicação deve conter apenas os diretórios e arquivos essenciais para o tema, removendo todos os arquivos de controle de versão (como…). .gitConfigurações de ferramentas de desenvolvimento e arquivos de backup. Além disso, assegure-se de… style.css A informação temática contida é completa e precisa, e um documento claro está pronto para ser utilizado. screenshot.png(1200x900 pixels) como miniatura do tema.

resumos

Desde a criação de algo que contém… style.css e index.php Começando pelo diretório de base, passando pela compreensão da estrutura dos templates, construindo os arquivos de template principais, utilizando o ciclo principal para exibir o conteúdo, e, em seguida, avançando para… functions.php Adicionar estilos, scripts e funcionalidades, e finalmente realizar testes rigorosos e verificações de padronização: esse é o caminho completo para criar um tema básico para o WordPress. Esse processo não só lhe permite obter um tema pronto para uso, mas, o que é mais importante, também lhe fornece uma compreensão profunda da arquitetura dos temas do WordPress. Partindo desse ponto, você pode continuar explorando temas mais avançados, como tipos de artigos personalizados, a API do Customizer de Temas, o suporte ao Editor de Blocos (Gutenberg), etc., e gradualmente se tornar um desenvolvedor de temas para o WordPress profissional.

Perguntas frequentes Perguntas frequentes

Um tema WordPress necessita de no mínimo quantos arquivos?

Um tema que possa ser reconhecido e ativado pelo WordPress necessita, no mínimo, de dois arquivos:style.css e index.phpDentre eles,style.css É necessário incluir as notas de cabeçalho com as informações corretas sobre o tema.

Por que meus estilos personalizados não estão funcionando?

Isso geralmente acontece devido à falta de prioridade nos seletores CSS ou ao carregamento incorreto do arquivo de estilo. Primeiro, verifique as ferramentas de desenvolvimento do navegador para confirmar se o arquivo de estilo foi carregado com sucesso e se as suas regras CSS não foram substituídas por outras regras de prioridade mais alta. Em segundo lugar, assegure-se de que você esteja utilizando o método correto para aplicar os estilos. functions.php Não consigo entender o que você está dizendo. Pode repetir, por favor? wp_enqueue_style() Usar funções para carregar os estilos, em vez de escrevê-los diretamente no HTML. <link> Tags.

Como adicionar um modelo de página personalizado a um tópico?

Crie um novo arquivo PHP, por exemplo… page-fullwidth.phpNo topo desse arquivo, adicione o seguinte comentário em PHP para declarar o nome do template:<?php /* Template Name: 全宽页面 */ ?>Em seguida, você pode escrever conteúdo diferente do modelo de página padrão neste arquivo. page.php O layout e o código correspondentes a esse novo modelo podem ser utilizados ao criar ou editar páginas. Basta selecioná-lo no módulo “Propriedades da Página”.

Qual é a diferença entre o arquivo functions.php e os plugins?

functions.php Faz parte do tema atual, e sua funcionalidade está intimamente ligada a ele. Se você mudar de tema,functions.php O código contido nesse texto não será mais efetivo. As funcionalidades fornecidas pelos plugins são independentes dos temas; portanto, independentemente do tema utilizado, elas estarão disponíveis sempre que o plugin estiver ativado. Geralmente, as funcionalidades que estão intimamente relacionadas à aparência visual do site são incluídas nos temas, enquanto as funcionalidades genéricas e independentes são mais adequadas para serem desenvolvidas como plugins.

Como posso fazer com que o meu tema suporte vários idiomas (internacionalização)?

Você precisa fazer duas coisas: preparar e carregar os arquivos de tradução. Primeiro, em todo o código, todas as strings direcionadas aos usuários (como…) ('Read More', 'my-first-theme')Todos devem usar algo como… () ou _e() Essa função de tradução deve ser encapsulada, e o segundo parâmetro (o campo de texto) deve ser utilizado de forma apropriada… style.css Deve estar em conformidade com o “Text Domain” declarado. Em seguida, use ferramentas como o Poedit para criar o conteúdo necessário. .pot Arquivo de modelo, e traduza-o para gerar o correspondente. .po e .mo Arquivo. Por fim, functions.php Use isto no chinês (simplificado) load_theme_textdomain() Uma função para carregar os arquivos de tradução.