Guia de introdução ao desenvolvimento de temas para o WordPress: crie o seu primeiro tema personalizado 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 local estável e profissional. É fortemente recomendado não modificar os arquivos do tema diretamente em um servidor online, pois um ambiente de desenvolvimento local permite que você faça testes livremente sem afetar o acesso normal ao site. Você pode escolher um software de ambiente integrado, como XAMPP, MAMP (para Mac) ou Laragon (para Windows), que instala e configura automaticamente o Apache, o MySQL e o PHP com apenas um clique.

O próprio WordPress também precisa ser instalado no seu ambiente local. Acesse o site oficial do WordPress para baixar a versão mais recente do pacote de instalação e descompacte-o no diretório raiz do seu servidor local (por exemplo, no diretório onde o XAMPP está instalado). htdocs Após isso, acesse o arquivo através do navegador e conclua a famosa “instalação em cinco minutos”. Durante o processo de instalação, lembre-se das informações de dados que você configurou.

Por fim, você precisa de um editor de código ou de um ambiente de desenvolvimento integrado (IDE) conveniente para o seu trabalho. O Visual Studio Code, o PhpStorm e o Sublime Text são todas ótimas opções, pois oferecem funcionalidades como realce de sintaxe, sugestões de código e gerenciamento de arquivos, o que melhora significativamente a eficiência do desenvolvimento.

Leitura recomendada Aprenda a desenvolver temas para o WordPress passo a passo: construa um tema personalizado do zero.。

Compreender a estrutura básica dos temas do WordPress

Um tema do WordPress é essencialmente um tema que está localizado no diretório /wp-content/themes/ O diretório contém pastas que, por sua vez, possuem uma série de arquivos e subdiretórios que seguem regras específicas. Esses arquivos trabalham em conjunto para informar ao WordPress como o site deve ser exibido e qual é o seu conteúdo.

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

O mecanismo mais central é o “nível de templates” (camadas de templates). O WordPress seleciona automaticamente o arquivo de template correspondente com base no tipo da página que está sendo acessada para exibir o conteúdo. Por exemplo, quando se acessa um artigo de blog, o WordPress procura primeiro pelo arquivo de template específico para esse tipo de página. single.phpAo acessar a página inicial do blog, procura-se por… home.php ou index.phpEsse mecanismo confere grande flexibilidade aos temas.

Cada tópico deve conter dois arquivos básicos:style.css e index.php。style.css A função do arquivo de tema não é apenas fornecer estilos; o bloco de comentários no cabeçalho do arquivo também serve como um “cartão de identidade” do tema, sendo utilizado para informar ao WordPress o nome do tema, o autor, a descrição e outras informações metadadas.index.php É a última “rede de segurança”; se os outros arquivos de modelo mais específicos não estiverem disponíveis, o WordPress irá usá-lo.

Um típico comentário de cabeçalho de tema é o seguinte:

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

Text Domain Usado para internacionalização; é um identificador que é utilizado nas chamadas subsequentes às funções de tradução.

Leitura recomendada Construir um site profissional: Um guia completo para criar um tema personalizado para o WordPress do zero。

Além desses dois arquivos, um tema completo e funcional geralmente também inclui:header.php(Cabeçalho da página web),footer.php(No fundo da página web),sidebar.php(Lateral bar) e também functions.php(Arquivo de aprimoramento das funcionalidades dos temas). Ao entender essa estrutura básica, você já possui o esqueleto necessário para o desenvolvimento de temas.

Criar o arquivo de modelo principal.

Agora, vamos começar a criar o primeiro tema. No seu… /wp-content/themes/ No diretório, crie uma nova pasta e nomeie-a, por exemplo, “NovaPasta”. my-first-themeEm seguida, crie os arquivos mais básicos dentro dessa pasta.

Primeiro, crie. style.cssE adicione as notas de cabeçalho dos tópicos mencionados na parte anterior. Em seguida, crie… index.phpEste é o seu primeiro arquivo de modelo. É o mais simples possível. index.php É possível incluir apenas um ciclo que exiba o título e o conteúdo do artigo:

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

<main>
   
    
      <article>
        <h2>\n</h2>
        <div>\n</div>
      </article>
    
    <p>Não há conteúdo por enquanto.</p>
  
</main>

Este código utiliza etiquetas de template. get_header(), get_sidebar(), get_footer(), the_title() e the_content()Para que funcione, você precisa criar os arquivos de cabeça (header), lateral (sidebar) e fundo (footer) correspondentes.

Criar header.phpEle deve conter a parte inicial do documento HTML, até o início da área principal de conteúdo:

<!DOCTYPE html>
<html no numeric noise key 1007>
<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 1004>
  <header>
    <h1><a href="/pt/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    <p><?php bloginfo( 'description' ); ?></p>
    <nav>
      'primary'
        ) );
      ?&gt;
    </nav>
  </header>

Aqui,wp_head() É um hook crucial, que permite que o núcleo do WordPress, os plugins e os temas insiram o código necessário no cabeçalho da página (como links para os arquivos de estilo).body_class() A função irá gerar uma série de nomes de classes CSS semânticos, o que facilita o controle detalhado dos estilos.

Leitura recomendada Arquitetura e Funcionamento do Núcleo do WordPress。

Criar footer.php Para fechar as tags abertas:

  <footer>
    <p>©</p>
    <?php wp_footer(); ?>
  </footer>
</body>
</html>

Atenção,wp_footer() É com... wp_head() O gancho na extremidade oposta também é essencial.

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

Criar sidebar.phpPor enquanto, é possível apenas incluir um chamado de controle simples:

<aside>
  <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
  <?php endif; ?>
</aside>

Neste momento, o seu tema já possui a funcionalidade básica de “modelos pré-definidos” (templates), que pode ser ativada e visualizada no backend. Embora seja simples, ele segue a arquitetura central do WordPress.

Aprimorando as funcionalidades do tema através do arquivo Functions.php

functions.php O arquivo é o “centro de controle” do 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, usado para adicionar funcionalidades, registrar componentes e conectar-se aos vários APIs do WordPress. Este é o elemento-chave para a personalização e a especialização do seu tema.

Você precisa criar esse arquivo no diretório raiz do tema. Primeiro, vamos adicionar os arquivos de estilo e scripts para o tema. A maneira correta de fazer isso é usar as funções fornecidas pelo WordPress, em vez de escrever o código diretamente no HTML. <link> Tags.

<?php
function my_first_theme_scripts() {
    // 添加主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 添加一个自定义样式表
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 添加一个 JavaScript 文件
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Aqui,wp_enqueue_style() e wp_enqueue_script() É uma função utilizada para adicionar recursos de forma segura.get_stylesheet_uri() Direcionado ao tópico style.css。add_action() Monte nossa função em… wp_enqueue_scripts Neste gancho, assegure-se de que ele seja executado no momento certo.

Em seguida, registre o menu de navegação e a barra lateral (área de ferramentas):

function my_first_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '底部菜单', 'my-first-theme' ),
    ) );

// 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );

// 为“文章”类型启用文章格式支持
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 添加对 HTML5 标记格式的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 启用标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() Faça com que na interface “Aparência” -> “Menu” do backend, posições para os itens do menu fiquem disponíveis para seleção.add_theme_support() As funções são utilizadas para ativar várias funcionalidades dos temas, o que é uma prática padrão no desenvolvimento de temas modernos. Por exemplo, para ativar… title-tag Depois disso, você não precisará mais… header.php Output manual em chinês: <title> Marcado com a etiqueta.

Finalmente, registre uma área para ferramentas no lado esquerdo da página (barra lateral):

A função my_first_theme_widgets_init() registra a barra lateral com os seguintes parâmetros:
    'name' => __( 'Barra lateral principal', 'my-first-theme' ),
    'id' => 'sidebar-1',
    'description' => __( 'Adicione gadgets aqui.', 'my-first-theme' ),
    'before_widget' => '  A função my_first_theme_widgets_init() registra a barra lateral com os seguintes parâmetros:
    'name' => __( 'Barra lateral principal', 'my-first-theme' ),
    'id' => 'sidebar-1',
    'description' => __( 'Adicione gadgets aqui.', 'my-first-theme' ),
    'before_widget' =&gt; ' &lt;&#039;<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' );

Até agora, o seu tema já possui uma cadeia completa de desenvolvimento, desde a apresentação básica até o aprimoramento das suas funcionalidades. Ao utilizar o menu de configurações do backend e adicionar ferramentas adicionais, você poderá observar as mudanças dinâmicas no tema.

resumos

A partir da criação de um que inclua style.css e index.php Começando pela pasta correspondente, até a criação de componentes de modelo separados (build separate template components).header.php, footer.php）， e então, através de recursos poderosos… functions.php O menu de registro de arquivos, a barra lateral e o carregamento seguro dos recursos representam os passos essenciais para criar um tema personalizado para o WordPress. O núcleo desse processo reside na compreensão e no cumprimento da estrutura de templates e do sistema de “ganchos” (hooks) do WordPress.

Você não é mais apenas um usuário de um determinado tema; você é agora também seu criador. Com o domínio desses conceitos básicos, você pode continuar a aprofundar seu conhecimento sobre arquivos de modelo mais complexos. single.php、page.php、archive.phpExplore mais possibilidades de uso de ciclos no WordPress e aproveite as etiquetas condicionais (como…) is_page(), is_single()) Para alcançar um controle mais preciso das páginas, existem muitas possibilidades. O mundo do desenvolvimento de temas é vasto e interessante; este é apenas um ponto de partida sólido.

Perguntas frequentes Perguntas frequentes

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

需要具备 PHP 的基础知识，但无需达到精通的水平。你至少需要理解变量、数组、条件语句（if/else）、循环（while/foreach）以及函数的基本概念。因为 WordPress 主题开发大量使用了其内置的 PHP 函数（模板标签）和钩子系统，所以学习重点在于理解 WordPress 特有的 PHP 函数如何使用，而非从头编写复杂的 PHP 算法。

Por que é necessário usar as funções wp_head() e wp_footer()?

Essas duas funções são ganchos (hooks) centrais do WordPress.wp_head() Localizado em </head> Antes das etiquetas, isso permite que o núcleo do WordPress, os plugins e o seu próprio tema insiram o código necessário no cabeçalho da página, como links para tabelas de estilo CSS, metatags, variáveis JavaScript, etc.wp_footer() Localizado em </body> Antes das etiquetas, é comum inserir código de análise ou arquivos JavaScript de carregamento retardado. Se eles faltarem, muitos plugins não funcionarão corretamente, e até mesmo algumas funcionalidades do próprio WordPress poderão apresentar erros.

Como adicionar um modelo de página para o meu tema?

Crie um novo arquivo PHP, por exemplo… page-fullwidth.phpNo topo deste arquivo, você precisa adicionar um bloco de comentários com o nome do modelo específico. Por exemplo:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的页面模板
 */

Em seguida, você pode escrever algo diferente neste arquivo. page.php A estrutura HTML, por exemplo, a omissão de certos elementos… get_sidebar() Após a chamada e o salvamento dos dados, ao editar a página no painel administrativo do WordPress, a opção “Página de Largura Total” aparecerá na lista suspensa “Modelo” das “Propriedades da Página” para você escolher.

Como é a melhor prática para lidar com CSS e JavaScript no desenvolvimento de temas?

A melhor prática é usar o que o WordPress oferece. wp_enqueue_style() e wp_enqueue_script() Função, em functions.php Montado em… wp_enqueue_scripts Use ganchos (hooks) para adicionar recursos. Esse método permite: 1) lidar corretamente com as dependências (por exemplo, se o seu script depende do jQuery); 2) evitar o carregamento repetido do mesmo recurso; 3) facilitar o gerenciamento de plugins e outros códigos de temas; 4) estar em conformidade com os padrões de codificação do WordPress. É essencial evitar o uso direto de recursos nos arquivos de template. <link> ou <script> Rotular recursos codificados.

Como posso implementar suporte a múltiplas línguas (internacionalização) no meu tema?

Você precisa fazer duas coisas. Primeiro, style.css Ao traduzir o texto que contém comentários de cabeça e chamadas de funções, é necessário utilizar o “domínio de texto” (Text Domain) correto. Como indicado no guia, é necessário definir esse domínio de texto adequadamente. Text Domain: my-first-themeEm segundo lugar, functions.php Em todos os arquivos de template, todo o texto da interface do usuário que precisa ser traduzido deve ser envolvido nas funções de tradução do WordPress. A mais comum delas é… __()(Voltar à string traduzida) e _e()(Directly display the translated string.) Por exemplo:<?php _e( ‘Hello World’, ‘my-first-theme’ ); ?>Depois disso, você pode usar ferramentas como o Poedit para gerar o conteúdo desejado. .pot Arquivos de modelo, para que os tradutores criem versões em diferentes idiomas. .po e .mo Documentos.