Guia de Iniciação para o Desenvolvimento de Temas WordPress: Construa o Seu Primeiro Tema do Zero

Preparação e configuração do ambiente

Antes de começar a escrever o código, você precisa de um ambiente de desenvolvimento adequado. Um ambiente de desenvolvimento local permite que você faça testes e depurações sem afetar o site online. Recomendamos o uso de pacotes integrados como XAMPP, MAMP ou Local by Flywheel, que permitem instalar Apache, MySQL/MariaDB e PHP com apenas um clique.

Assegure-se de que a sua versão do PHP esteja no nível 7.4 ou superior, que é a versão mínima recomendada pelo WordPress oficial. Além disso, você precisará de um editor de código, como o Visual Studio Code, Sublime Text ou PHPStorm, que oferecem funcionalidades de realce de sintaxe e dicas de código, melhorando significativamente a eficiência do desenvolvimento.

Criar a estrutura básica de um tema para o WordPress

Um tema do WordPress é essencialmente um tema que está localizado no diretório wp-content/themes/ O nome da pasta dentro do diretório é o seu identificador de tópico. É recomendado usar letras minúsculas, números e hifens, e não deve conter espaços. Por exemplo, você pode criar uma pasta chamada… my-first-theme O diretório.

Neste diretório, são necessárias pelo menos duas arquivos principais:style.css e index.php。style.css Não se trata apenas de um arquivo de estilo (stylesheet); sua função mais importante é fornecer metadados sobre o tema, que serão exibidos na página “Aparência” -> “Temas” do painel de controle do WordPress.

Escrever o cabeçalho de informações do tópico

Nos style.css No topo do arquivo, você precisa adicionar um bloco de comentários específico para definir as informações do tema. Aqui está um exemplo:

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

/*
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 eles,Text Domain Usado para internacionalização (suporte a múltiplas línguas); deve coincidir com o nome da pasta do seu tema.index.php O arquivo é o modelo padrão para o tema e serve como modelo de reserva para todas as páginas. No início, você pode escrever uma estrutura HTML simples nele para fazer testes.

Arquivos de modelo principais e estrutura hierárquica de modelos

O WordPress utiliza um conjunto de regras chamado “Estrutura Hierárquica de Templates” para determinar qual arquivo de template deve ser usado para renderizar uma determinada solicitação de página. Compreender essa estrutura é fundamental para o desenvolvimento de temas. A ideia central é a seguinte: o WordPress começa a procurar pelo arquivo de template mais específico; se não for encontrado, procura por um arquivo mais genérico; e, se isso também não der certo, recorre ao arquivo mais básico (ou padrão) para realizar a renderização da página. index.php。

Leitura recomendada Introdução ao desenvolvimento de temas para WordPress: Construa o seu primeiro tema personalizado do zero。

Arquivos de modelos comuns e seus usos

• header.phpA parte superior da página de um website geralmente contém a área de cabeçalho, o logotipo do website e o menu principal de navegação.
• footer.phpA parte inferior da página de um website geralmente contém informações sobre os direitos autorais, links adicionais e outros elementos.
• sidebar.phpÁrea da barra lateral.
• index.phpO modelo principal serve como o recurso de última instância para todas as páginas.
• single.phpÉ usado para exibir um único artigo de blog.
• page.phpÉ usado para exibir uma única página (como “Sobre Nós” ou “Contato”).
• archive.phpÉ usado para exibir a lista de arquivos de artigos (como categorias, etiquetas, autor, data de arquivamento).
• front-page.phpÉ usado para definir a página inicial do site (se uma página estática for definida como a página inicial).
• home.phpEste modelo é usado para exibir a página de índice dos artigos do blog (se uma página inicial estática for definida, este modelo mostrará a lista dos artigos mais recentes).
• 404.phpÉ usado para exibir a página de erro “404 – Não Encontrado”.
• search.phpÉ usado para exibir os resultados da pesquisa.
• functions.phpEste não é um arquivo de template, mas um arquivo funcional do tema, usado para adicionar funcionalidades, registrar menus, barras laterais, etc.

Tags de modelo e loops

Nos arquivos de template, você usará com frequência as “tags de template”. Elas são funções PHP fornecidas pelo WordPress, utilizadas para exibir conteúdo dinâmico. bloginfo('name') Título do site:the_title() Título do artigo:

O conceito mais importante é o “loop do WordPress”. Trata-se de uma estrutura de código PHP usada para verificar se a página atual contém artigos (ou uma lista de artigos) que precisam ser exibidos, e então exibir esses artigos de forma iterativa (em ciclo). Um exemplo básico de loop é o seguinte:

<h2>\n</h2>
    <div class="entry-content">
        \n
    </div>

    <p></p>

这段代码的意思是：如果有文章，就循环（while）每一篇，在循环中显示文章标题和内容；如果没有文章，则显示一条错误信息。`_e()` 是一个用于国际化的翻译函数。

Integração de funcionalidades temáticas com estilos visuais

functions.php Este é o “cérebro” do seu tema; todas as funcionalidades que não fazem parte do processo de renderização do template devem ser adicionadas aqui. Este arquivo é carregado automaticamente durante a inicialização do tema.

Função de registro de tópicos

Nos functions.php Nele, você pode expandir as funcionalidades do WordPress utilizando os vários “ganchos” (Hooks) disponíveis, como os ganchos de ação (Action Hooks) e os ganchos de filtro (Filter Hooks). Primeiramente, geralmente é necessário declarar que o tema suporta determinadas funcionalidades. Por exemplo, para adicionar miniaturas de artigos (imagens de destaque) e suporte a menus:

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() {
    // 让主题支持文章和页面使用“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );

// 让 WordPress 管理文档标题标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

`add_action()` 将你的函数 my_first_theme_setup Montado no WordPress after_setup_theme Neste gancho de ação, assegure-se de que ele seja executado no momento certo.

Introduzir estilos e scripts

Os temas modernos devem carregar os arquivos de estilo (CSS) e JavaScript de forma correta. wp_enqueue_style() e wp_enqueue_script() As funções devem ser adicionadas à fila de execução, em vez de serem escritas diretamente nos arquivos de template usando as tags `<?php` ou `<?`. As vantagens dessa abordagem são a melhor gestão das dependências, a prevenção de carregamentos repetidos dos arquivos de script e a adesão às melhores práticas do WordPress.

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );

// 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

`getstylesheet_uri()` aponta para o seu… (O texto está incompleto; não é possível traduzir corretamente sem saber o que exatamente está sendo referido.) style.css O arquivo `get_template_directory_uri()` retorna o URL do diretório do tema atual.

Leitura recomendada Guia introdutório ao desenvolvimento de temas WordPress: construa seu tema personalizado do zero。

Construir o layout da página e os componentes dos modelos

Uma página da web padrão geralmente é composta por um cabeçalho, um corpo de conteúdo e um rodapé. O WordPress incentiva a separação das partes reutilizáveis em arquivos independentes, que são então incluídos no modelo principal através de funções específicas.

Separar os componentes do modelo

Criar header.php、footer.php e sidebar.php. Em header.php Neste caso, você precisa incluir a seção completa e terminar com um contêiner de cabeçalho óbvio (como a tag ). footer.php Geralmente, termina com as tags `` e ``.

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

Montar a página completa.

No modelo da página (como…) index.php、single.phpNesse contexto, você pode usar as seguintes funções para introduzir esses componentes:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    // 这里放置 WordPress 循环
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

`get_header()`、`get_sidebar()` 和 `get_footer()` 会分别加载对应的模板文件。你还可以使用 `get_template_part()` 函数来加载更细粒度的模板部件，例如 `get_template_part( 'template-parts/content', 'page' );` 会尝试加载 template-parts/content-page.php O arquivo será carregado se não existir. template-parts/content.phpIsso aumentou significativamente a reutilizabilidade e a manutenibilidade do código.

resumos

Construir um tema para o WordPress do zero é um processo de aprendizado sistemático. Primeiramente, você precisa criar o ambiente de desenvolvimento local correto e entender a estrutura básica dos arquivos do tema. O ponto-chave é dominar a hierarquia de templates do WordPress, que determina como os diferentes conteúdos serão renderizados. functions.php Para criar um tema para um site, você pode adicionar funcionalidades e recursos avançados, além de seguir as melhores práticas para gerenciar os estilos e os scripts. Por fim, ao dividir a página em componentes como cabeçalho, rodapé e barras laterais, e ao utilizá-los em conjunto com as funções fornecidas pelo WordPress, você consegue criar um código de tema estruturado e fácil de manter. Seguindo esses passos, não só criará seu primeiro tema, como também estabelecerá uma base sólida para o desenvolvimento de projetos mais complexos e profissionais no futuro.

Leitura recomendada Introdução ao desenvolvimento de temas WordPress: construa seu primeiro tema personalizado do zero。

Perguntas frequentes Perguntas frequentes

É necessário dominar o PHP para desenvolver temas para o WordPress?

Sim, PHP é a linguagem de programação principal do WordPress. Os arquivos de template dos temas (como…) index.php、page.php）e arquivos de funcionalidades (functions.phpTodos esses arquivos são em PHP. Você precisa dominar a sintaxe básica de PHP, as condições de avaliação, os ciclos e o uso de funções para poder exibir e manipular dinamicamente os dados no WordPress.

Durante o desenvolvimento de um tema, quais são as diferenças entre `page.php` e `front-page.php`?

page.php É usado para renderizar as “páginas” individuais criadas no WordPress, como “Sobre Nós” ou “Contato”, entre outras. front-page.php É um modelo específico para renderizar a “página inicial” de um site. No painel de controle do WordPress, em “Configurações” -> “Leitura”, se você escolher “Uma página estática” e definir a “página inicial” como uma determinada página, o WordPress utilizará essa página em primeiro lugar. front-page.php Para exibir esta página… front-page.php Se não existir, então será usado. page.php。

为什么推荐使用 `wp_enqueue_style()` 来加载 CSS，而不是直接在 HTML 中写 `` 标签？

fazer uso de wp_enqueue_style() É o método oficialmente recomendado pelo WordPress. Ele garante que o arquivo de estilo seja carregado apenas uma vez, mesmo que vários plugins ou partes do tema façam referência ao mesmo arquivo. Além disso, permite um controle mais fácil das dependências entre os arquivos de estilo (por exemplo, se o seu estilo depende de um framework básico). Também é mais compatível com o sistema de cache e com os plugins, e permite que os subtemas alterem facilmente os estilos do tema pai.

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

Tornar um tema compatível com vários idiomas envolve principalmente dois passos. Primeiro, em todas as strings de texto do tema, é necessário utilizar as funções de tradução do WordPress, como… ()、_e() ou esc_html()E especifique onde elas devem ser localizadas. style.css Definido em chinês Text DomainPor exemplo:_e( 'Hello World', 'my-first-theme' )Em segundo lugar, use ferramentas como o Poedit para analisar o código do seu tema e gerar o necessário conteúdo. .pot Os ficheiros de modelo, a partir dos quais os tradutores podem criar versões em diferentes idiomas. .po E o compilado .mo Arquivos. Coloque os arquivos de idioma no tema. /languages/ No diretório, o WordPress carrega automaticamente as traduções correspondentes de acordo com as configurações de idioma do site.