Do zero ao um: uma explicação detalhada das etapas principais e das técnicas práticas para o desenvolvimento de temas do WordPress.

Preparação e configuração do ambiente

Antes de começar a escrever o código, é essencial criar um ambiente de desenvolvimento correto. Isso não só afeta a eficiência, mas também a conveniência do depuramento e a manutenção futura do projeto. Você precisará de um ambiente de servidor local para executar o WordPress. Recomenda-se o uso de softwares profissionais de desenvolvimento local, como Local by Flywheel, XAMPP ou Laragon. Instale e configure o PHP (recomenda-se a versão 7.4 ou superior), o MySQL e um servidor web (como Apache ou Nginx).

Em seguida, baixe o pacote de instalação mais recente do WordPress, crie um novo site no seu ambiente de servidor local e conclua a instalação. Lembre-se do diretório raiz do seu site. Para facilitar a edição de código e o controle de versões, recomenda-se o uso de editores de código profissionais, como o VS Code ou o PhpStorm, além da instalação de plugins relacionados ao PHP e ao WordPress, que ajudam na edição e depuração do código.

Finalmente, você precisa entender qual é o ponto de partida absoluto para criar um tema para o WordPress. Um tema requer pelo menos dois arquivos para ser reconhecido pelo sistema: um é o arquivo de estilo (style sheet). style.cssOutro é o arquivo de template da página principal. index.phpNo site… /wp-content/themes/ Em "Catálogo", crie uma nova pasta para o tema que você está prestes a criar, por exemplo, my-first-theme。

Leitura recomendada Do zero: domine o processo central e as técnicas práticas de desenvolvimento de temas WordPress de forma eficiente。

Arquivo central para a criação de um tópico

### – Arquivo de Definição de Informações do Tópico
A identificação de cada tópico e as declarações de informações sobre ele estão todas disponíveis. style.css O arquivo está contendo as informações necessárias. O bloco de comentários no topo do arquivo é obrigatório, pois o WordPress utiliza essas informações para ler o nome do seu tema, o nome do autor, a descrição do tema, entre outras características. style.css O arquivo deve começar da seguinte forma:

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: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个从零开始开发的 WordPress 主题演示。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Text Domain Este arquivo é usado para a internacionalização do seu projeto e deve ter o mesmo nome que a pasta contendo o tema do seu site. Ele também conterá todo o seu código de estilo CSS.

Construção do arquivo de modelo básico

Os arquivos de modelo controlam a aparência das diferentes páginas do site. Vamos criar os arquivos mais essenciais. O primeiro deles é o arquivo de modelo da página principal. index.phpÉ o modelo de recuo padrão para todas as páginas. Muito simples, mas funcional. index.php O conteúdo do arquivo é:

<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>

Este código introduz três funções-chave para componentes de template:get_header(), get_sidebar(), get_footer()Isso significa que você precisa criar o conteúdo correspondente. header.php, sidebar.php e footer.php Documentos.

header.php Os arquivos geralmente contêm uma declaração do tipo de documento e informações do cabeçalho HTML (por meio de…) wp_head() A função exibe o resultado da sua execução, o título do site e o menu de navegação principal. É uma estrutura básica para a criação de uma página web. header.php O arquivo é o seguinte:

Leitura recomendada Eu vou te ensinar, passo a passo, como criar um tema personalizado para o WordPress que seja poderoso e funcional.。

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<?php wp_body_open(); ?>
<header>
    <h1><a href="/pt/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>

footer.php O arquivo fecha a estrutura da página e então executa a chamada (ou realiza a ação solicitada). wp_footer() Muitos plugins dependem desse “gancho” (hook) para inserir scripts.

Implementar funcionalidades e estilos temáticos

Menu de registro e barra lateral para ###
Para que os usuários possam acessar as informações das posições dos pratos através do menu de gerenciamento do backend, você precisa usar funções para registrar essas informações. Isso geralmente é feito no contexto do tema (theme) utilizado no sistema. functions.php O processo foi concluído no arquivo. A criação foi realizada. functions.php E adicione o seguinte código:

<?php
function my_theme_setup() {
    // 注册一个主菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

// 支持文章特色图像
    add_theme_support( 'post-thumbnails' );

// 支持自定义Logo
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
?>

Em seguida, você precisa… header.php Chame o menu no local apropriado (por exemplo, após o título do site), utilizando… wp_nav_menu() Função.

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

Da mesma forma, para ativar a área dos widgets (por exemplo, a barra lateral), você precisa… functions.php Registre uma barra lateral no sistema:

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小工具。', 'my-first-theme' ),
        'before_widget' =&gt; '<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_theme_widgets_init' );

Depois disso, em sidebar.php Os ficheiros utilizados no documento dynamic_sidebar( 'sidebar-1' ) Para exibi-lo.

Adicionar estilos e scripts

Colocar os arquivos CSS e JavaScript na fila de processamento da forma correta é uma das melhores práticas no desenvolvimento com WordPress. Isso evita conflitos de dependências entre esses arquivos e permite o uso eficiente do cache, o que melhora o desempenho do site. functions.php Crie uma nova função:

Leitura recomendada Desvendando o desenvolvimento de temas do WordPress: as principais técnicas para criar um site personalizado do zero.。

function my_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 引入一个自定义脚本
    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_theme_scripts' );

Dessa forma, o WordPress adicionará automaticamente o link para o seu arquivo de estilo no topo da página. Além disso, será criado um… /js/ Crie um índice e adicione nele as suas informações. navigation.js Documentos.

Níveis de templates e técnicas avançadas

###: Compreensão dos níveis de estrutura do modelo.
O WordPress seleciona o arquivo de template apropriado com base no tipo da página visitada, seguindo uma ordem hierárquica precisa. Este é um dos conceitos mais poderosos no desenvolvimento de temas. Por exemplo, quando uma única matéria é acessada, o WordPress procura sequencialmente pelos seguintes arquivos:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> Finalmente, voltou para o estado anterior. index.php。

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

Crie um modelo personalizado para um único artigo do seu blog. Você pode fazer isso seguindo os passos abaixo: single.phpPara criar um modelo para uma página específica, como a página sobre nós, você pode criar um arquivo com o nome “about_us_template.html”. page-about.php O arquivo (supondo que o alias da página seja “about”).

Utilizar a funcionalidade de extensão por meio de “ganchos” (hooks).

A API de plugins do WordPress (ganchos e filtros) permite que você modifique temas ou funcionalidades do core de forma segura. Os ganchos de ação (Action Hooks) permitem que você execute alguma ação em pontos específicos do processo de execução do sistema. Por exemplo, se você quiser adicionar automaticamente um texto no final do conteúdo de um artigo, pode usar os ganchos de ação para fazer isso. the_content Filtro:

function my_theme_add_footer_text( $content ) {
    if ( is_single() ) {
        $content .= '<p class="custom-footer">Este texto foi gerado a partir do meu tópico (tema).</p>';
    }
    return $content;
}
add_filter( 'the_content', 'my_theme_add_footer_text' );

resumos

Através dos passos descritos neste artigo, você já percorreu o processo básico de desenvolvimento de temas para o WordPress: desde os preparativos para a criação de um ambiente local até a criação das informações que definem o próprio tema. style.css E os arquivos de modelo que compõem a estrutura da página… functions.php Você aprendeu a usar funções de registro (como menus e barras laterais) e scripts de formatação, e finalmente entendeu o conceito de camadas de templates e o mecanismo de “ganchos” (hooks). Lembrar-se dos conceitos-chave de “camadas de templates” e de “organizar corretamente os scripts/stilos na sequência certa” ajudará a evitar muitos problemas comuns. Desenvolver temas é um processo iterativo; praticando constantemente e analisando temas existentes que são bem feitos, você melhorará rapidamente suas habilidades.

Perguntas frequentes Perguntas frequentes

É necessário começar do zero no desenvolvimento de temas para ###?
Não é bem assim. Você pode escolher usar o tema básico oficial (Underscores) ou um framework (como o Genesis) como ponto de partida. Eles fornecem uma estrutura de código padronizada e funcionalidades básicas, o que pode melhorar significativamente a eficiência do desenvolvimento e a qualidade do código, especialmente para iniciantes.

Como testar meu tema sem a necessidade de codificação?

No ambiente de desenvolvimento local, você pode utilizar os “dados de teste de unidades para temas” integrados ao WordPress para importar um grande número de artigos, páginas, menus e comentários de exemplo que contêm vários formatos e elementos. Isso ajudará a testar completamente o desempenho do tema em diferentes cenários.

Por que as modificações no meu estilo não entram em vigor imediatamente no backend?

Isso geralmente é causado pelo cache do navegador. Você pode tentar usar “Ctrl + F5” ou “Cmd + Shift + R” para atualizar a página forçadamente. Se o problema for devido ao plugin de cache do WordPress, será necessário limpar o cache desse plugin. Além disso, por favor, verifique também o seu… style.css O número da versão do arquivo foi atualizado?

Como embalar e distribuir o produto após o desenvolvimento do tema?

Primeiramente, você precisa garantir que… style.css As informações temáticas contidas no arquivo são completas e precisas. Em seguida, elimine todos os arquivos de backup e pastas de controle de versão criados durante o processo de desenvolvimento. .gitArquivos de configuração e arquivos temporários também devem ser incluídos no pacote. Por fim, compacte a pasta do tema em um arquivo ZIP. Esse arquivo ZIP pode ser instalado através do painel de administração do WordPress, na seção “Aparência” -> “Temas” -> “Adicionar” -> “Carregar tema”.