Do zero ao um: guia completo para o desenvolvimento de temas do WordPress e ensino prático

Fundamentos do desenvolvimento de temas para WordPress e configuração do ambiente de desenvolvimento

Para começar a desenvolver temas para o WordPress, é necessário primeiro entender seus conceitos fundamentais. Um tema do WordPress é, essencialmente, um conjunto de arquivos que inclui tabelas de estilo (CSS), arquivos de modelo (templates), imagens e arquivos de JavaScript. Esses arquivos juntos determinam a aparência e as funcionalidades de um site. Desenvolver um tema significa criar um conjunto completo de regras que indicam ao WordPress como exibir o conteúdo armazenado no banco de dados para os visitantes.

A preparação do ambiente antes do desenvolvimento é de extrema importância. Você precisa de um ambiente de desenvolvimento local, o que pode ser facilmente configurado instalando ferramentas como XAMPP, MAMP, Local by Flywheel ou Docker. Um ambiente local permite que você desenvolva, teste e depure o código sem interferir no site em produção. Além disso, um editor de código eficiente é essencial, como o Visual Studio Code,PhpStorm ou Sublime Text, que oferecem funcionalidades como realce de sintaxe, sugestões de código e depuração, aumentando significativamente a eficiência do desenvolvimento.

Em seguida, você precisa entender a estrutura de diretórios do tema. Cada tema está localizado em…/wp-content/themes/O arquivo deve estar localizado dentro do diretório e existir em uma pasta separada. O tema mais básico requer apenas dois arquivos:style.csseindex.php. Emstyle.cssNas notas de cabeça, você precisa fornecer as metadados do tema.

Leitura recomendada Análise aprofundada dos campos personalizados do WordPress: do básico às práticas avançadas de aplicação。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习WordPress主题开发的简单主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Estestyle.cssOs arquivos não são apenas tabelas de estilo (style sheets), mas também o “cartão de identidade” do seu tema. O WordPress utiliza essas informações (anotações contidas nos arquivos) para reconhecer e exibir o seu tema em segundo plano.

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

Arquivos de modelo principais e estrutura hierárquica dos temas

O WordPress utiliza um sistema inteligente chamado “Estrutura Hierárquica de Templates” para determinar qual arquivo de template deve ser usado para exibir o conteúdo em uma solicitação de página específica. Compreender essa estrutura é fundamental para o desenvolvimento de temas.

O arquivo de template mais importante é…index.phpEle serve como o modelo de reserva final para todas as páginas. Quando o WordPress não consegue encontrar um modelo mais específico, ele é utilizado. A página inicial geralmente é composta por…front-page.phpouhome.phpControle. A página única do artigo é a opção preferida.single.phpE, para tipos específicos de artigos, como “produtos”, o WordPress procura…single-product.phpA página é utilizada para…page.phpSe a página tiver um modelo personalizado, esse modelo será usado.page-{slug}.phpoupage-{id}.phpAs páginas de arquivamento dos artigos (como por categoria, etiqueta, autor ou data de arquivamento) correspondem…archive.phpe suas variantes mais específicas, comocategory.php、tag.phpetc.

Modelos para a parte superior e a parte inferior do cabeçalho do tema

Para seguir o princípio DRY (Don't Repeat Yourself – Não se Repita), os temas do WordPress utilizam…get_header()、get_footer()eget_sidebar()Use funções como `include` para incorporar as partes comuns. Isso significa que você precisa criar…header.phpefooter.phpDocumentos.

header.phpOs arquivos geralmente contêm o cabeçalho do documento HTML, etiquetas meta, links para os arquivos de estilo e scripts, além da área de navegação superior do site. É de extrema importância que esses arquivos também incluam…wp_head()Chamada de função: essa função permite que o núcleo do WordPress, os plugins e os próprios temas a utilizem.<head>Injetar parte do código necessário.

Leitura recomendada Guia de introdução ao desenvolvimento de temas do WordPress: construa o seu site do zero。

footer.phpO arquivo contém as informações do rodapé do site, referências a scripts, etc., e é organizado da seguinte forma:wp_footer()A função terminou; isso está de acordo com…wp_head()O seu papel é semelhante; é usado para inserir código no fundo da página.

No arquivo de template, você pode introduzi-los da seguinte maneira:

<?php get_header(); ?>

<!-- 主内容区 -->

<?php get_footer(); ?>

Funcionalidades temáticas e loops no WordPress

As funcionalidades de um tema não se limitam apenas à sua aparência.functions.phpArquivos: Você pode adicionar funcionalidades ao seu tema, registrar características específicas e integrar plugins. Este arquivo é carregado automaticamente quando o tema é ativado, funcionando como um plugin exclusivo para o seu tema.

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

Compreender o ciclo do WordPress

Os ciclos no WordPress são a lógica central no desenvolvimento de temas. Trata-se de um trecho de código PHP usado para verificar se a página atual contém artigos (ou posts) que precisam ser exibidos. Se houver, o código percorre esses artigos em um ciclo e os exibe um por um. A estrutura básica do ciclo é a seguinte:

<!-- 在这里输出文章内容 -->
        <h2>\n</h2>
        <div>\n</div>
    
    <p>Não foram encontrados quaisquer artigos.</p>

Em um ciclo, você pode usar uma série de etiquetas de modelo para exibir as informações do artigo, por exemplo:the_title()Exiba o título,the_content()Exiba o conteúdo completo.the_excerpt()Resumo:the_permalink()Obter o link do artigo.the_post_thumbnail()Exibir imagens características.

Menu de registro e barra lateral

Os temas modernos geralmente permitem que os usuários personalizem os menus e os plugins através do painel de controle (backend). Isso requer...functions.phpRegistre-se aqui.

Leitura recomendada Guia de introdução ao desenvolvimento de temas para o WordPress: crie o seu primeiro tema personalizado do zero.。

fazer uso deregister_nav_menus()Uma função pode registrar uma ou mais posições de menu:

function mytheme_register_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
            'footer-menu'  => __( '页脚菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'mytheme_register_menus' );

Em seguida, no arquivo de template (como…)header.phpO conceito de "design thinking" é usado no contexto dewp_nav_menu()Para exibir o menu.

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

Da mesma forma, a barra lateral (área de plugins) também é configurada através…register_sidebar()Registro de funções:

function mytheme_widgets_init() {
    register_sidebar(
        array(
            'name'          => __( '主侧边栏', 'my-first-theme' ),
            'id'            => 'sidebar-1',
            'description'   => __( '在这里添加你的挂件。', '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', 'mytheme_widgets_init' );

No modelo, usedynamic_sidebar( 'sidebar-1' )Chame essa área.

Integração do Personalizador de Estilos, Scripts e Temas

Para tornar o tema mais profissional e amigável ao usuário, é necessário lidar corretamente com o carregamento de estilos e scripts, e integrar o máximo possível das funcionalidades de personalização disponíveis no WordPress.

Carregar estilos e scripts em sequência (em fila)

A maneira correta de fazer isso é usar…wp_enqueue_style()ewp_enqueue_script()Funções… Adicione-as.functions.phpNo “gancho” (hook) correspondente, isso garante que as dependências sejam resolvidas corretamente e evita o carregamento redundante de recursos.

function mytheme_enqueue_assets() {
    // 主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );

// 谷歌字体
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );

// 主JavaScript文件
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

Integrador de Personalização de Temas

O WordPress Customizer permite que os usuários ajustem as configurações do tema em uma pré-visualização em tempo real.$wp_customizePara os objetos, você pode adicionar configurações e controles.

Por exemplo, adicionar uma opção para escolher a cor do título do site:

function mytheme_customize_register( $wp_customize ) {
    // 添加一个设置（存储在数据库中）
    $wp_customize->add_setting( 'header_color', array(
        'default'           => '#333333',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

// 添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
        'label'    => __( '页眉颜色', 'my-first-theme' ),
        'section'  => 'colors',
        'settings' => 'header_color',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Então, no seu…style.cssOu use esse valor no estilo de saída dinâmica:

function mytheme_customizer_css() {
    ?>
    <style type="text/css">
        .site-header {
            background-color: <?php echo esc_attr( get_theme_mod( 'header_color', '#333333' ) ); ?>;
        }
    </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customizer_css' );

resumos

O desenvolvimento de temas para WordPress é uma habilidade interessante que combina design e programação. Tudo começa com o estudo dos arquivos principais do sistema, como…style.csseindex.phpCompreensão do funcionamento do sistema, bem como uma análise aprofundada da estrutura de templates, dos ciclos de processamento do WordPress e…functions.phpEntre as poderosas funcionalidades do WordPress, você pode criar temas com estrutura clara e bom desempenho ao organizar corretamente os arquivos de template, utilizar as tags de template, registrar áreas de menu e plugins, e carregar recursos de forma sequencial. Além disso, a integração de ferramentas de personalização de temas oferece uma experiência de customização intuitiva para os usuários finais. Ao dominar esses conceitos básicos, você estará preparado para transformar seus designs em temas WordPress completos e estabelecer uma base sólida para o aprendizado de frameworks de temas mais avançados, como o Underscores ou o Genesis, bem como para o desenvolvimento de temas baseados no sistema Block.

Perguntas frequentes Perguntas frequentes

Para desenvolver um tema WordPress, é necessário ter conhecimentos avançados de PHP?

Embora não seja necessário alcançar um nível de especialista, uma base sólida em PHP é essencial. Você precisa entender a sintaxe de PHP, variáveis, funções, ciclos e instruções condicionais, pois o núcleo do WordPress e os arquivos de templates dos temas são escritos em PHP. Além disso, um bom domínio de HTML, CSS e JavaScript básico também é muito importante.

Como posso fazer com que o meu tema esteja em conformidade com os padrões oficiais do WordPress?

Para que o seu tema atenda aos padrões e possa ser incluído no diretório oficial de temas do WordPress, você precisa seguir o “WordPress Theme Development Manual” e os “Theme Review Requirements”. Isso inclui o uso de práticas de codificação seguras, a preparação para a internacionalização (utilizando campos de texto e funções de tradução), a garantia de um design responsivo, a não codificação de funções críticas no próprio tema (é recomendado o uso de subtemas ou plugins), além de realizar testes com o plugin oficial Theme Check.

Por que as alterações no meu tema não são visíveis após a atualização da página?

Isso geralmente é causado pelo cache do navegador ou pelo mecanismo de cache do WordPress. Primeiro, tente pressionar os botões simultaneamente.Ctrl + F5(Windows/Linux) ouCmd + Shift + R(No Mac), execute um “hard refresh” para limpar o cache do navegador. Se o problema persistir, verifique se você está trabalhando em um ambiente de desenvolvimento local e cheque se existem plugins de cache instalados; tente desativá-los temporariamente. Por fim, confira se o arquivo de modelo que você modificou é o correto e se o arquivo foi salvo com sucesso.

Qual é a diferença entre um subtópico e um tópico principal? Quando usar?

O tópico pai é um tópico completo e independente, com todas as funcionalidades necessárias. O tópico filho, por sua vez, depende do tópico pai e contém apenas um pequeno número de arquivos (no mínimo, um é necessário).style.cssSubtemas são usados para substituir ou expandir os estilos e funcionalidades de um tema pai. Quando você deseja fazer alterações personalizadas em um tema existente, mas não quer que essas alterações sejam perdidas com a atualização do tema pai, é recomendável criar um subtema. Esta é a melhor prática para atualizar e personalizar temas.

Como adicionar suporte completo para o editor Gutenberg ao meu tema?

Para aperfeiçoar o suporte ao editor Gutenberg, você precisa…functions.phpUse isto no chinês (simplificado)add_theme_support()A declaração de uma função define uma série de características. Por exemplo, é possível adicionar…align-wideealign-fullSuporte para paletas de cores personalizadas, fundos com efeitos de gradiente, controle do tamanho da fonte, entre outros recursos. Além disso, são criados tabelas de estilo independentes para os editores de artigos e páginas, que são utilizados durante o processo de edição.add_editor_style()Adicione isso. Para personalizações mais avançadas, você talvez precise aprender a criar blocos personalizados.