Desenvolvimento de temas para WordPress: Construa o seu primeiro tema personalizado do zero

Compreender a estrutura central de um tema WordPress

Antes de começar a escrever o código, é necessário entender os fundamentos de um tema WordPress: os arquivos de template (modelos) e os arquivos de estilo (style sheets). O WordPress utiliza uma série de arquivos específicos para renderizar as diferentes partes do site, e esses arquivos seguem convenções de nomeação padronizadas. Um tema minimizado necessita de apenas dois arquivos:index.php(Principal arquivo de template) estyle.css(Os arquivos de estilo principal e de informações do tema são essenciais, mas para construir um site com funcionalidades avançadas, precisamos de mais recursos.)

style.cssO arquivo não contém apenas regras CSS; o bloco de comentários no cabeçalho do arquivo também define os metadados do tema, como o nome do tema, o autor, a descrição e a versão. É assim que o WordPress reconhece um tema. Por exemplo, um bloco de comentários de cabeçalho básico pode ser o seguinte:

/*
Theme Name: My First Custom Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, custom-built WordPress theme for learning.
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Além dos arquivos principais, uma estrutura típica de um tema também inclui:header.php(Neguindo com a cabeça)footer.php(Na parte inferior do site)sidebar.php(Lateral bar) Efunctions.php(Arquivos de funções de funcionalidades temáticas). Entender como usar esses arquivos através de etiquetas de modelo (como…)get_header(), get_footer()Combinar os componentes de forma modular é a chave para um desenvolvimento eficiente.

Leitura recomendada Guia de Iniciação para o Desenvolvimento de Temas WordPress: Crie a sua própria interface de site do zero。

Criar arquivos de tema e diretórios

Primeiro, precisamos ir para a pasta de instalação do WordPress.wp-content/themes/Crie uma nova pasta na pasta atual. O nome dessa pasta deve ser o identificador do seu tópico; recomenda-se o uso de letras minúsculas, números e hífens, por exemplo:my-first-themeTodos os arquivos relacionados aos temas serão colocados aqui.

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

Criar o arquivo do estilo principal (style sheet).

Como foi enfatizado anteriormente,style.cssÉ necessário criar esse arquivo na pasta do tema e preencher todas as informações necessárias referentes ao mesmo. Em seguida, você pode começar a escrever o CSS básico para definir a aparência do site. Para evitar interferências dos estilos padrão dos navegadores, geralmente é recomendado iniciar com a redefinição dos estilos (ou seja, com a criação de um “style sheet” limpo, sem quaisquer definições pré-existentes).

/* 在 style.css 的头部注释块之后 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
}

Criar o arquivo do modelo principal

Em seguida, crie.index.phpEste é o arquivo de template padrão e mais importante. Sua estrutura inicial deve conter chamadas para a parte superior do template (header), o ciclo de conteúdo e a parte inferior do template (footer). As tags de template são funções integradas do WordPress, utilizadas para inserir conteúdo dinâmico.
Um design minimalistaindex.phpA versão inicial pode ser a seguinte:

<main id="primary" class="site-main">
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            // 文章内容将在这里输出
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

Descompunção do template: cabeça, parte inferior e barra lateral

Para facilitar a reutilização e a clareza do código, os temas do WordPress geralmente separam as partes comuns das páginas em arquivos independentes.

Implementar o modelo de cabeça para o site

Criarheader.phpEste arquivo contém a parte de cabeça (header) de um documento HTML.ChegarA parte que inicia o uso das tags, bem como a área de navegação no topo do site. As tags-chave do modelo incluem…bloginfo()Usado para obter informações sobre o site, bem como…wp_head()O “gancho” (hook) permite que plugins e temas insiram código em determinados pontos do código-fonte do site.
Básicoheader.phpExemplo:

Leitura recomendada Guia Completo para o Desenvolvimento de Temas WordPress: Construa Sites Personalizados do Zero。

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1005>
<?php wp_body_open(); ?>
<header class="site-header">
    <div class="site-branding">
        <h1 class="site-title"><a href="/pt/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p class="site-description"><?php bloginfo('description'); ?></p>
    </div>
    <nav class="main-navigation">
        'primary',
            'menu_id'        =&gt; 'primary-menu',
        ));
        ?&gt;
    </nav>
</header>

Implementar o modelo do rodapé do site

Criarfooter.phpEle contém todo o conteúdo que segue o final da área principal de conteúdo, como as informações de copyright no rodapé, além de outros elementos de extrema importância.wp_footer()Chamadas de “ganchos” (hooks) são essenciais para o funcionamento correto de muitos plugins (como os que analisam código).

<footer class="site-footer">
    <p>©  . Todos os direitos reservados.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Melhorar as funcionalidades dos temas e a possibilidade de personalização

functions.phpÉ o “cérebro” do seu tema, usado para adicionar funcionalidades, registrar recursos (como menus de navegação, áreas de ferramentas) e definir estilos de scripts, sem a necessidade de modificar os arquivos principais.

A funcionalidade suportada pelo tema registado.

Nosfunctions.phpNeste contexto, você pode usar…add_theme_support()Funções são utilizadas para declarar as funcionalidades suportadas por um tema. Por exemplo, a ativação de miniaturas de artigos (imagens destacadas) e a possibilidade de personalizar o logotipo são recursos padrão em temas modernos.

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

<?php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章特色图像
    add_theme_support('post-thumbnails');
    // 注册一个主菜单
    register_nav_menus(array(
        'primary' => __('主菜单', 'my-first-theme'),
    ));
}
add_action('after_setup_theme', 'my_first_theme_setup');
?>

Incluir no estilo e nos scripts

A maneira correta de carregar estilos e scripts é utilizando…wp_enqueue_style()ewp_enqueue_script()Funções, e montá-las emwp_enqueue_scriptsNo gancho. Isso garante que as dependências sejam gerenciadas e evita o carregamento repetido.

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
    // 排入主JavaScript文件
    wp_enqueue_script('my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

resumos

Desde a criação da pasta de tópicos…style.cssComeçar, até a construção.index.phpDescompôr em…header.phpefooter.phpArquivos de modelo, e então o processo de implementação através de…functions.phpO arquivo adiciona funcionalidades e recursos essenciais ao seu tema, constituindo a estrutura básica para o desenvolvimento de temas WordPress. Cada passo destaca o conceito da hierarquia de templates do WordPress e as melhores práticas, como o uso correto de tags de template e ganchos (hooks). Ao dominar essas noções básicas, você terá um ponto de partida sólido para personalizar e expandir qualquer funcionalidade, atendendo às necessidades de diferentes projetos.

Perguntas frequentes Perguntas frequentes

###: Quantos arquivos são necessários no mínimo para um tema WordPress?
Um tema WordPress funcional precisa de, no mínimo, dois arquivos:index.phpestyle.cssDentre eles,style.cssO bloco de comentários no topo do arquivo deve estar presente e conter as informações corretas sobre o tema; isso é uma condição essencial para que o WordPress reconheça o tema.

Leitura recomendada Do Zero ao Um: Guia Definitivo e Tutorial Prático para o Desenvolvimento de Temas para WordPress。

Como adicionar uma área de ferramentas pequena ao meu tema?

Você precisa passar por…functions.phpArquivo para registrar a área de ferramentas adicionais (barra lateral). Utilize-o.register_sidebar()Função, e especifique seus parâmetros, como nome, ID e descrição. Em seguida, você pode usar esses dados no arquivo de template correspondente (por exemplo…).sidebar.phpO conceito de "design thinking" é usado no contexto dedynamic_sidebar()Uma função para chamá-lo.

Por que o meu menu de navegação personalizado não está sendo exibido?

Isso geralmente acontece porque não foi feito o necessário…functions.phpRegistre corretamente a localização da unidade de culinária. Por favor, confira se você utilizou os dados corretos.register_nav_menus()Uma função para registrar uma posição de um prato (por exemplo, ‘primary’) e, em seguida…header.phpChamada em meio (ou: chamada dentro de um contexto específico)wp_nav_menu()Nesse momento,‘theme_location’Os valores definidos para os parâmetros são exatamente os mesmos utilizados durante o registro. Por fim, é necessário atribuir um menu a essa posição nas configurações do WordPress, na seção “Aparência > Menus”.

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

我应该在什么时候使用get_template_part()函数？

get_template_part()As funções são usadas para modularizar fragmentos de código reutilizáveis, sendo especialmente adequadas para a exibição de conteúdos em diferentes formatos em ciclos de artigos. Por exemplo, você pode criar uma função que…content.phpUse um arquivo para definir a estrutura HTML comum de cada artigo e, em seguida…index.phpUsado em um cicloget_template_part(‘content’)Use-o para fazer a chamada. Isso aumenta a reutilizabilidade e a manutenibilidade do código, além de facilitar a criação de modelos mais profissionais (como…)content-page.phpIsso se tornou possível.