Começando do zero: Domine os processos centrais e as melhores práticas no desenvolvimento de temas para o WordPress moderno

Ambiente de desenvolvimento e inicialização do projeto

O primeiro passo no desenvolvimento de temas para o WordPress moderno é criar um ambiente de desenvolvimento local eficiente e que atenda aos padrões. Hoje em dia, não desenvolvemos diretamente no servidor, mas utilizamos uma cadeia de ferramentas locais para aumentar a eficiência.

Para o ambiente local, você pode escolher ferramentas integradas, como… Local、Laragon ou MAMPEsses ferramentas permitem a instalação do Apache/Nginx, PHP e MySQL com apenas um clique, simplificando bastante o processo de configuração do ambiente. A escolha de qual delas usar depende principalmente das suas preferências de sistema operacional e das suas necessidades funcionais específicas.

Como configurar corretamente a estrutura do diretório de temas?

Uma estrutura de diretórios clara e organizada é a pedra fundamental no desenvolvimento de temas profissionais. Ela não só facilita a manutenção do código por parte do próprio desenvolvedor, mas também ajuda outros desenvolvedores a entenderem e colaborarem com o código. Os temas modernos para WordPress geralmente seguem uma estrutura semelhante a um “padrão” (ou “template”).

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

No diretório de instalação do seu WordPress… wp-content/themes Dentro da pasta, crie uma nova pasta com o nome do seu tópico, por exemplo: my-awesome-themeEm seguida, dentro desta pasta, é recomendado criar os seguintes diretórios principais:
* /assetsÉ usado para armazenar todos os recursos estáticos.
* /assets/cssPara armazenar arquivos de estilo (style sheets), por exemplo… style.css e editor-style.css。
* /assets/jsLocal para armazenar arquivos de JavaScript.
* /assets/imagesArmazena arquivos de mídia, como imagens e ícones.
* /assets/fontsLocal para armazenar fontes personalizadas.
* /template-partsArmazena fragmentos de templates reutilizáveis, como cabeçalhos, rodapés, metadados de artigos, etc.
* /inc ou /includesEste espaço é utilizado para armazenar arquivos que aprimoram o funcionamento dos temas, como funções personalizadas, registro de ferramentas úteis, definições de tipos de artigos personalizados, entre outros.
* /patterns(Opcional, mas recomendado): Arquivo que contém as definições do modo de bloco do editor usado em toda a plataforma.

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

Crie os arquivos de informações de tópico necessários.

Cada tema do WordPress deve ter um arquivo chamado… style.css O arquivo em questão não é apenas um arquivo de estilo (stylesheet), mas também o “cartão de identidade” do tema. As informações contidas no cabeçalho de comentários no topo desse arquivo são cruciais para que o WordPress reconheça o tema corretamente.

/*
Theme Name: 我的炫酷主题
Theme URI: https://example.com/my-awesome-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 一个专为博客和杂志网站设计的现代化、响应式WordPress主题。
Version: 1.0.0
Tested up to: 6.5
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
Domain Path: /languages
*/

Dentre eles,Text Domain Usado para internacionalização; é a única identificação do seu tema nos arquivos de tradução.Requires at least e Requires PHP Isso especifica as versões mínimas do WordPress e do PHP necessárias para a execução do tema, o que é de extrema importância para a experiência do usuário e a segurança do sistema.

Além disso, para suportar as funcionalidades do editor de toda a página (FSE – Full Site Editor), você também precisará criar um… theme.json Arquivo. Este arquivo serve como uma ponte de comunicação entre o editor Gutenberg e os temas, sendo utilizado para definir estilos, paletas de cores, configurações de layout, entre outros aspectos de forma global.

Construir um modelo de tema principal

Os arquivos de template são a estrutura básica dos temas do WordPress e determinam como diferentes tipos de conteúdo são exibidos. O WordPress seleciona automaticamente o arquivo de template apropriado para mostrar a página com base na “estrutura hierárquica dos templates”.

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

Os dois arquivos de template mais básicos são: index.php(O modelo principal, como uma opção de último recurso) e style.css(Esse é um arquivo de estilo CSS). No entanto, para criar um tema completo e funcional, você precisa começar construindo a partir dos seguintes modelos principais.

Como construir a cabeça (header) e a parte inferior (footer) de um site?

A parte superior e a parte inferior do site são elementos comuns a todas as páginas. Nós as colocamos em locais específicos, respectivamente. header.php e footer.php Médio.

Nos header.php No arquivo, você precisa inserir a parte head do documento HTML e chamar as funções principais do WordPress. As funções-chave incluem: wp_head()Ele permite que o núcleo do WordPress, os plugins e os temas insiram o código necessário (como tabelas de estilo e metadados) nesse local.

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

<!DOCTYPE html>
<html no numeric noise key 1005>
<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 1002>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <!-- 你的网站导航和Logo代码 -->
</header>

footer.php Então, é responsável por fechar o que está aberto. header.php Abra os tags correspondentes e execute a chamada. wp_footer() Funções são essenciais para o carregamento de scripts e recursos de plugins.

Como criar um ciclo de artigos

O ciclo de artigos é a lógica central de um tema WordPress; ele é responsável por recuperar e exibir os artigos do banco de dados. Essa lógica geralmente é implementada… index.php、single.php(Um único artigo) ou page.php(Em uma única página.)

Uma estrutura básica de ciclo de artigos é a seguinte. Ela utiliza… have_posts() e the_post() Uma função para percorrer os artigos encontrados na consulta.

Leitura recomendada Guia Definitivo: Como Desenvolver um Tema WordPress Poderoso e Flexível。

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <header class="entry-header">
                <h2 class="entry-title"><a href="/pt/</?php the_permalink(); ?>">\n</a></h2>
            </header>
            <div class="entry-content">
                \n
            </div>
        </article>
    
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-awesome-theme' ); ?></p>

Neste ciclo, você utilizou vários tags de template, como… the_title() Título do Artigo:the_content() Exiba o conteúdo do artigo.the_permalink() Obter o link do artigo.

Funções temáticas e personalização

Todo o código relacionado ao aprimoramento das funcionalidades dos temas deve ser gerenciado de forma centralizada, e não disperso em vários arquivos de template. A prática recomendada é criar um arquivo no diretório raiz do tema com o nome… functions.php O arquivo em questão é carregado automaticamente durante a inicialização do tema, funcionando como um “plug-in” para o seu tema.

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

Como registrar um menu de navegação e uma barra lateral?

A personalização do menu de navegação e da barra lateral (área de ferramentas) são funcionalidades básicas de um tema. Você precisa… functions.php É necessário usar funções específicas para registrá-las, e somente após isso elas poderão ser gerenciadas no menu “Aparência” no backend.

fazer uso de register_nav_menus() Funções para registrar posições de menus. Por exemplo, registrar um “Menu Principal” e um “Menu de Rodapé”.

function my_awesome_theme_setup() {
    register_nav_menus(
        array(
            'primary' => esc_html__( 'Primary Menu', 'my-awesome-theme' ),
            'footer'  => esc_html__( 'Footer Menu', 'my-awesome-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_awesome_theme_setup' );

Para registrar a área dos widgets (barra lateral), é necessário utilizar… register_sidebar() Função: Você pode definir o nome, o ID, a descrição da barra lateral, bem como os tags HTML que a envolvem (antes e depois).

Como adicionar suporte a imagens especiais em um artigo?

Imagens características (miniaturas de artigos) são um recurso padrão em sites de conteúdo modernos. O WordPress não ativa essa funcionalidade por padrão; é necessário que o tema especifique explicitamente seu suporte a ela.

Você pode usar o que foi mencionado acima. my_awesome_theme_setup() Em uma função, usar… add_theme_support() É necessário usar uma função para ativá-lo. Essa função é utilizada para habilitar várias funcionalidades do núcleo do WordPress e dos temas.

function my_awesome_theme_setup() {
    // ... 之前的菜单注册代码 ...
    add_theme_support( 'post-thumbnails' ); // 为“文章”和“页面”启用特色图像
    // 你还可以设置缩略图尺寸
    set_post_thumbnail_size( 800, 450, true ); // 默认特色图像尺寸， true表示裁剪
    add_image_size( 'my-theme-blog-list', 400, 250, true ); // 自定义一个图像尺寸
}

Após a ativação, uma caixa de seleção para “Imagens Destacadas” será exibida na interface de edição de artigos, permitindo que os usuários carreguem ou escolham imagens. Nos modelos, você pode utilizar essa funcionalidade conforme necessário. the_post_thumbnail() Uma função para exibi-lo.

Estilos, scripts e otimização de desempenho

Adicionar os arquivos CSS e JavaScript corretamente à fila de processamento é uma prática essencial no desenvolvimento para o WordPress. Nunca use-os diretamente nos arquivos de template. <link> ou <script> Os rótulos codificam os recursos de forma rígida, em vez de utilizar wp_enqueue_style() e wp_enqueue_script() Função.

Como adicionar CSS e JS corretamente à fila de execução?

Nos functions.php Crie uma nova função para registrar e colocar seus recursos temáticos em fila. Em seguida, monte essa função no sistema correspondente. wp_enqueue_scripts Este gancho está preso a essa ação.

function my_awesome_theme_scripts() {
    // 注册并排队主样式表（style.css）
    wp_enqueue_style( 'my-awesome-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 注册并排队一个自定义的CSS文件
    wp_enqueue_style( 'my-awesome-theme-main-css', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0.0' );

// 注册并排队一个自定义的JavaScript文件
    wp_enqueue_script( 'my-awesome-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );

// 如果需要在脚本中使用PHP变量（如ajax_url），可以使用wp_localize_script
    wp_localize_script( 'my-awesome-theme-navigation', 'myThemeData', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
    ));
}
add_action( 'wp_enqueue_scripts', 'my_awesome_theme_scripts' );

Atenção: o último parâmetro é… true Isso indica que o script está localizado no final do documento.</body>Carregar o conteúdo antigo geralmente melhora o desempenho de renderização da página.

Como implementar internacionalização e localização?

Para que o seu tema possa ser usado em todo o mundo, é necessário realizar o processo de internacionalização (i18n). Isso significa que todas as strings de texto exibidas nos modelos e no código PHP devem ser envolvidas em funções de tradução.

A função mais utilizada é… esc_html__()(Usado para exibir o HTML após a codificação de escape) e esc_html_e()(São usados para exibir diretamente o HTML após a codificação de escape.) Todos eles precisam ser fornecidos nas informações do cabeçalho do tema (theme header). Text Domain。

/\nNa mensagem de “Não há artigos” durante a rotação de artigos
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-awesome-theme' ); ?></p>

// 在导航菜单注册时
'primary' =&gt; esc_html__( 'Primary Menu', 'my-awesome-theme' ),

Após preparar o código, você pode usar ferramentas como o Poedit para verificar todas as strings de tradução e gerar o resultado desejado. .pot(O arquivo de template), e então crie o correspondente. .po e .mo Traduza o arquivo e coloque-o no tópico correspondente. /languages Catálogo.

resumos

Este artigo longo apresenta de forma sistemática o processo central do desenvolvimento de temas para o WordPress moderno, desde a configuração do ambiente até a aperfeiçoação das funcionalidades. Começamos com a criação de uma estrutura de projeto padronizada e enfatizamos… style.css e theme.json A importância disso foi destacada. Em seguida, aprofundamos a discussão sobre a lógica de construção das camadas de templates, especialmente no que diz respeito à exibição dinâmica de conteúdo através de ciclos de artigos. Na parte de aprimoramento de funcionalidades, aprendemos como utilizar… functions.php Para expandir o tema, registre o menu, os widgets e suporte para imagens em destaque.

Finalmente, focamos na gestão de recursos front-end e na qualidade do código, destacando a importância de adicionar scripts de estilo e de se preparar para a internacionalização seguindo os métodos padrão do WordPress. Ao seguir essas melhores práticas, não só é possível desenvolver temas com estrutura clara e fáceis de manter, como também garantir sua compatibilidade, segurança e escalabilidade, estabelecendo uma base sólida para a construção de projetos mais complexos.

Perguntas frequentes Perguntas frequentes

Qual é a diferença entre temas e plugins? Onde o código de funcionalidades deve ser colocado?

Os temas são responsáveis por controlar a apresentação visual e o layout do conteúdo do site (ou seja, a “aparência” do site), enquanto os plugins são usados para adicionar funcionalidades independentes ao site (como formulários de contato, otimização para mecanismos de busca (SEO), comércio eletrônico, etc.). Um princípio simples é o seguinte: se o código altera a aparência do site, ele pertence ao tema; se o código adiciona novas funcionalidades, ele deve ser considerado como um plugin. A longo prazo, transformar o código que contém funcionalidades em plugins permite que você mantenha essas funcionalidades mesmo ao trocar de tema.

É necessário usar o arquivo theme.json? Quais são as vantagens dele?

Para o desenvolvimento de temas modernos voltados para o futuro, é fortemente recomendado o uso de… theme.jsonNão é mais uma funcionalidade avançada opcional, mas sim o núcleo da arquitetura do editor de todo o site do WordPress. Seus benefícios incluem: a capacidade de gerenciar de forma centralizada os estilos e configurações globais (cores, fontes, espaçamentos), proporcionando uma experiência mais consistente no editor de blocos, reduzindo o uso de estilos incorporados e simplificando a implementação de designs responsivos e do modo escuro. A partir do WordPress 5.8, tornou-se uma parte essencial no desenvolvimento de temas.

Como personalizar a saída dos widgets padrão do WordPress?

O HTML gerado pelos plugins essenciais do WordPress (como os catálogos de categorias e as listas de artigos mais recentes) geralmente contém muitos elementos aninhados que não são necessários. div E os nomes das classes. Você pode personalizá-los usando filtros (Filters). Por exemplo, utilize-os para... widget_categories_args Filtrar os parâmetros de consulta das ferramentas de catálogos de classificação ou, de forma mais completa, através de widget_categories_output Existem filtros que modificam diretamente o HTML gerado por eles. Outra abordagem mais moderna e flexível é criar blocos personalizados para substituir os tradicionais widgets (pequenos componentes de interface).

O que é a hierarquia de templates (estruturas de templates) e como usá-la?

O nível de hierarquia dos templates é o sistema pelo qual o WordPress decide qual arquivo de template usar para exibir a página atual. Ele segue o princípio de partir do mais específico para o mais geral. Por exemplo, para um artigo com o ID 123, o WordPress procurará, em sequência, pelos seguintes arquivos de template:single-post-123.php -> single-post.php -> single.php -> singular.php -> E só no final é que… index.phpVocê pode criar arquivos de modelo mais específicos (como…) category-news.php Desenhar uma página específica para a categoria “Notícias” permite controlar com precisão a aparência de cada página, o que é muito mais claro do que escrever um grande número de instruções de condicional em um único arquivo.

Como realizar a depuração e a resolução de erros ao desenvolver um tema?

O primeiro passo é… wp-config.php Ative o modo de depuração do WordPress no arquivo. WP_DEBUG A constante foi definida como… trueIsso fará com que todos os erros, avisos e notificações do PHP sejam exibidos na página. Ao mesmo tempo, recomenda-se configurar WP_DEBUG_LOG Para trueRegistre o erro em… /wp-content/debug.log No arquivo, evite que as mensagens de erro sejam exibidas diretamente para os visitantes. Além disso, usar as ferramentas de desenvolvimento do navegador (tagas Console e Network) para verificar erros em JavaScript e problemas com o carregamento de recursos é uma habilidade essencial para a depuração do front-end.