Página inicial/relacionado ao conhecimento/WordPress/Detalhes do conteúdo

Guia de introdução ao desenvolvimento de temas do WordPress: crie um site personalizado do zero.

Leitura de 3 minutos
2026-03-18
2026-06-03
2,755
Eu recebo uma comissão quando você faz compras através dos links abaixo, sem custo adicional para você.

Conceitos básicos de desenvolvimento de temas do WordPress.

Antes de começar a programar, é essencial compreender a estrutura básica de um tema do WordPress. Um tema é, essencialmente, uma pasta que contém uma série de ficheiros que, em conjunto, determinam a aparência e algumas funcionalidades do website. O sistema WordPress lê estes ficheiros para apresentar o conteúdo da página web.

Um tema básico requer, pelo menos, dois ficheiros:style.csseindex.phpDentre eles,style.cssNão só é responsável pelo estilo, como também o bloco de notas no cabeçalho do ficheiro contém informações sobre o tema, como o nome do tema, o autor, a descrição, o número da versão, etc. Esta é a forma como o WordPress identifica o tema.

O WordPress utiliza um sistema hierárquico de modelos para determinar qual ficheiro de modelo deve ser utilizado para diferentes páginas. Por exemplo, quando se acede a um artigo individual, o WordPress procura primeiro osingle.phpQuando se visita a página de lista de artigos de blog, procura-seindex.phpouhome.phpQuando visita uma página, procurapage.phpCompreender esta relação hierárquica permite-lhe escrever código no local correto.

Leitura recomendada Do zero ao um: detalhes técnicos e melhores práticas do processo completo de construção de um site moderno。

A função dos documentos centrais do tema

functions.phpO ficheiro é o centro funcional do tema. Não é um ficheiro obrigatório, mas quase todos os temas modernos o utilizam. Pode adicionar funcionalidades suportadas pelo tema, registar menus e barras laterais, introduzir scripts e folhas de estilo, bem como definir várias funções personalizadas. Este ficheiro é carregado automaticamente quando o tema é inicializado e é fundamental para expandir as capacidades do tema.

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).
LOGO da UltaHost página de acesso

Outro documento importante é oheader.phpIsso geralmente inclui uma declaração do tipo de documento, uma seção de área (que importa CSS e JS) e uma seção de cabeçalho do site, que são partes comuns de uma página da web.footer.phpIsso inclui o conteúdo comum do rodapé e a tag de fechamento. Através da função do WordPressget_header()eget_footer()Você pode introduzi-los facilmente em outros ficheiros de modelo, mantendo o código modular e fácil de manter.

Configurar um ambiente de desenvolvimento local e criar uma estrutura de temas.

Antes de implantar o tema no servidor online, é mais eficiente e seguro configurar um ambiente de desenvolvimento local. Você pode usar ferramentas como XAMPP, MAMP, Local by Flywheel ou Docker para instalar rapidamente o Apache, o MySQL e o PHP no seu computador local e executar o WordPress.

Após o ambiente estar pronto, você pode começar a criar o seu primeiro tema. Primeiro, acesse o diretório de instalação do WordPress ewp-content/themesPasta. Crie uma nova pasta aqui e nomeie-a com o nome do seu tema, por exemplo, “my-first-theme”. Todos os ficheiros do tema serão colocados nesta pasta.

Em seguida, crie os arquivos básicos mencionados anteriormente. Primeiro, é necessáriostyle.cssO cabeçalho do ficheiro deve conter informações específicas da folha de estilos.

Leitura recomendada Criar um site profissional: o guia definitivo para o desenvolvimento e personalização de temas do WordPress em todos os aspetos.。

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

Em seguida, crie o mais básico.index.phpArquivo. Inicialmente, pode ser muito simples, apenas para garantir que o tema seja reconhecido e ativado pelo WordPress.

<!DOCTYPE html>
<html no numeric noise key 1004>
<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 1001>
    <h1>Olá, Desenvolvimento de Temas do WordPress!</h1>
    <?php wp_footer(); ?>
</body>
</html>

Neste momento, ao aceder à página “Aparência” -> “Temas” no backend do WordPress, deverá conseguir ver o seu tema já listado. Ative-o e, em seguida, aceda à página inicial do website para ver as informações simples que foram apresentadas pelo código. Assim, o seu primeiro tema em branco está agora configurado.

Construir um modelo temático e um ciclo

A tarefa central do tema é apresentar o conteúdo, e a apresentação do conteúdo do WordPress depende do “loop”. O loop é uma estrutura de código PHP no WordPress usada para recuperar artigos (incluindo páginas, tipos de artigos personalizados, etc.) do banco de dados e exibi-los na página.

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%
LOGOTIPO da hosting.com página de acesso

Compreender e implementar o ciclo principal.

A estrutura de ciclo mais básica é a seguinte, normalmente colocada emindex.phpousingle.phpNos ficheiros de modelo, por exemplo:

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

have_posts()A função verifica se há artigos que precisam ser exibidos.the_post()A função define os dados do artigo atual e torna-os disponíveis para as etiquetas do modelo (como <).the_title()、the_content()） chamada.

Criar ficheiros de modelo comuns

Para que o tema possa processar diferentes páginas de forma profissional, você precisa criar uma série de arquivos de modelo. Além disso,index.phpEste modelo de retrocesso final também deve criar:

Leitura recomendada Guia completo para o desenvolvimento de temas do WordPress: um tutorial prático do início ao fim.。

  • header.phpExtrair o código da cabeça pública.
  • footer.phpExtrair o código base público.
  • single.php\n: Usado para mostrar um único artigo.
  • page.php: Usado para exibir uma única página.
  • archive.php: Usado para mostrar páginas de arquivo de categorias, etiquetas, autores, etc.

Em seguida, você precisa refazer.index.phpUsar as funções do WordPress para introduzir partes modulares:

<main>
        
            <article>
                <h2><a href="/pt/</?php the_permalink(); ?>">\n</a></h2>
                \n
            </article>
        <?php endwhile; ?>
    </main>

Desta forma, o início e o fim da página são geridos por ficheiros separados, e o ficheiro do modelo principal concentra-se apenas na lógica do conteúdo específico da página, com uma estrutura clara e fácil de manter.

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.
Logo da InterServer página de acesso

Utilize o functions.php para melhorar as funcionalidades do tema.

functions.phpÉ a “caixa de ferramentas” do seu tema. Aqui, pode adicionar código, modificar e expandir as funcionalidades principais do WordPress de forma segura, sem necessidade de alterar os ficheiros principais.

A funcionalidade suportada pelo tema registado.

Através deadd_theme_support()Com funções, você pode declarar várias funcionalidades suportadas pelo tema. Por exemplo, permitir que o tema suporte imagens em destaque de artigos, logótipos personalizados e resumos de artigos.

function my_first_theme_setup() {
    // 让主题支持文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );

// 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );

// 支持文章格式（可选）
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 为文章和页面开启HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Tenha em atenção que montámos a função emafter_setup_themeIsso está no gancho de ação. Este é um gancho padrão que é executado após o carregamento do tema no WordPress, e é o local correto para inicializar o tema.

Menus de registo e scripts de estilo

Registre a localização do menu de navegação, permitindo que os usuários gerenciem o menu na secção “Aspecto” -> “Menu” em segundo plano.

function my_first_theme_menus() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
            'footer'  => __( '底部菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_menus' );

No ficheiro do modelo, pode utilizarwp_nav_menu( array( ‘theme_location’ => ‘primary’ ) )Para mostrar este menu.

Por último, é necessário introduzir correctamente os ficheiros CSS e JavaScript, o que constitui uma prática recomendada.

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-script’, get_template_directory_uri() . ‘/js/script.js’, array(‘jquery’), ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_first_theme_scripts’ );

fazer uso dewp_enqueue_style()ewp_enqueue_script()Função, e montada emwp_enqueue_scriptsOs ganchos são a forma recomendada oficialmente pelo WordPress. Eles permitem gerir dependências, evitar carregamentos duplicados e garantir a compatibilidade em ambientes como os dos plugins.

resumos

A partir da criação de um que incluastyle.csseindex.phpComeçando pela pasta, passando pela compreensão da hierarquia de modelos e do mecanismo de “círculo”, até à sua utilização.functions.phpAo adicionar funcionalidades avançadas a um tema, você já percorreu o caminho principal do desenvolvimento de temas no WordPress. A chave para o desenvolvimento de temas é o pensamento modular: separar as partes repetitivas (como o cabeçalho e o rodapé) em ficheiros independentes e, em seguida,functions.phpEste tutorial ensina-o a gerir centralmente as funcionalidades e a organizar a lógica de apresentação de conteúdo seguindo as regras de hierarquia de modelos do WordPress. Depois de dominar estes conhecimentos básicos, terá as bases para criar um website personalizado e poderá explorar funcionalidades mais avançadas, como a área de widgets, os tipos de artigos personalizados e a API do personalizador de temas, aprofundando continuamente as suas competências de desenvolvimento no WordPress.

Perguntas frequentes Perguntas frequentes

Depois de alterar o tema, se a página não for atualizada imediatamente, o que devo fazer?

Isso geralmente ocorre devido ao cache do navegador ou ao mecanismo de cache do WordPress. Primeiro, tente fazer uma atualização forçada no navegador pressionando Ctrl+F5 (ou Cmd+Shift+R). Se o problema persistir, verifique se você está usando plugins de cache ou cache do servidor e tente limpar todo o cache. Para arquivos CSS e JS, nowp_enqueue_styleewp_enqueue_scriptNa função, pode-se definir um valor dinâmico para o parâmetro do número de versão (por exemplo,time()Durante o desenvolvimento, evite o armazenamento em cache, mas antes da publicação, deve mudar para um número de versão fixo.

Por que o meu tema não é exibido em segundo plano?

Por favor, verifique primeiro se a sua pasta de temas está localizada no caminho correto:wp-content/themes/Em segundo lugar, certifique-se de questyle.cssO bloco de comentários no topo do ficheiro está formatado corretamente, sendo particularmente importante a linha “Nome do tema:”. Por último, certifique-se de que as permissões da pasta do tema e dos ficheiros que contém estão definidas corretamente e que o servidor web (como o Apache) tem permissão para ler estes ficheiros.

Como adicionar uma barra lateral ao meu tema?

Adicionar a barra lateral divide-se em dois passos. Primeiro, emfunctions.phpUse isto no chinês (simplificado)register_sidebar()A função regista uma ou mais áreas de gadgets. Em seguida, no ficheiro de modelo onde pretende mostrar a barra lateral (por exemplo,sidebar.phpNeste artigo, usamosdynamic_sidebar()Você precisa criar uma função para chamá-la. Além disso, você também deve modificar o arquivo do modelo principal (por exemplo,…)index.phpO conceito de "design thinking" é usado no contexto deget_sidebar()Para introduzir o modelo da barra lateral.

Ao desenvolver um tema, como garantir a sua compatibilidade com os plugins?

Seguir os padrões de codificação do WordPress é a base para garantir a compatibilidade. Para o conteúdo que pode ser adicionado pelos plugins, certifique-se de que o seu tema o invoca de forma adequada.wp_head()ewp_footer()funcionar, pois muitos plugins dependem desses dois ganchos para inserir o código necessário (como código de estatísticas, CSS/JS). Além disso, ao exibir o conteúdo do artigo, utilize sempre <the_content()Em vez de aceder diretamente à base de dados, esta função aplica todas as alterações adicionadas pelo plug-in através do filtro “the_content”.

O que vem a seguir, o que vem a seguir?

Se estiver criando ou otimizando um site WordPress, a próxima etapa é continuar lendo sobre otimização de desempenho, configuração de plugins e personalização de temas.

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.

Tags.