Guia Completo para o Desenvolvimento de Temas WordPress: Construa Sites Personalizados do Zero

Você quer construir o próprio algo do zero.WordPressUm site, antes de tudo, precisa ter seu conceito central bem definido: o seu “tema”. O tema determina a aparência, o layout, as funcionalidades e a experiência do usuário do site. Diferentemente do uso de temas prontos, o desenvolvimento próprio oferece total controle, melhor desempenho e uma imagem de marca única. Seja você um desenvolvedor front-end que deseja entender mais a fundo os detalhes…PHPRenderização dinâmica, ou…PHPOs desenvolvedores de backend que desejam aprimorar suas habilidades front-end encontrarão uma nova oportunidade ao dominar o desenvolvimento de temas (tema development).

Preparativos: Configuração do ambiente de desenvolvimento local

Antes de escrever a primeira linha de código, um ambiente de desenvolvimento local profissional pode aumentar significativamente a eficiência e a experiência do desenvolvedor. Isso evita os riscos associados à modificação direta em servidores online.

Configure o ambiente de desenvolvimento local.

Primeiramente, precisamos simular um ambiente de servidor de rede no nosso computador local. Recomendamos o uso de pacotes de software como… Local(porWP EngineProduzido por…XAMPP ou MAMPEsses ferramentas são instaladas com apenas um clique.Apache、MySQLePHP…LocalPor exemplo, ele integra…WordPressInstalação em um clique;SSLAs funcionalidades de captura de certificados e e-mails são extremamente úteis para os desenvolvedores.

Leitura recomendada Aprender a desenvolver temas para WordPress do zero: Um guia completo para criar temas personalizados para websites。

Após a instalação, crie um novo…WordPressSite. Por favor, confira se está correto.PHPA versão deve ser 7.4 ou superior. Além disso, lembre-se do nome do banco de dados, do nome de usuário e da senha, pois eles serão necessários nas configurações subsequentes.

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

Edição de código e controle de versões

Um trabalhador que deseja realizar seu trabalho bem deve, antes de tudo, aprimorar suas ferramentas. Recomendamos o uso de editores de código poderosos, como… Visual Studio Code、PhpStorm ou Sublime TextElas oferecem realce de sintaxe, dicas de código, autocompletamento e uma poderosa ecologia de plugins.

Ao mesmo tempo, comece a usar um sistema de controle de versões imediatamente; esta é a nossa recomendação preferencial.GitAo inicializar um arquivo no diretório raiz do projeto…GitArmazém, e use-o..gitignoreVocê pode excluir arquivos desnecessários do repositório (como mídias carregadas e arquivos de cache), o que permite gerenciar as alterações no código de forma segura, facilitando a rastreabilidade dos cambios e a colaboração entre equipes. Para hospedar o repositório, você pode utilizar serviços como GitHub, GitLab ou Bitbucket.GitHub、GitLabouBitbucketÉ uma prática padrão do setor.

Compreender a estrutura do arquivo que aborda o tema e o modelo central (template) relevante.

Um padrãoWordPressUm “tópico” (theme) é uma pasta que contém arquivos específicos. Entender a função de cada arquivo é a base para construir um bom tópico.

Arquivos temáticos que devem ser incluídos obrigatoriamente

De acordo comWordPressSegundo as exigências oficiais, um tema básico deve conter apenas dois arquivos:style.css e index.phpDentre eles,style.cssNão é apenas um arquivo de estilo (stylesheet), mas também o “cartão de identidade” de um tema; as notas no cabeçalho do arquivo contêm as metadados do próprio tema.

Leitura recomendada Guia completo para a criação de um website: processo profissional de zero a publicação e análise das principais tecnologias.。

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

index.phpPortanto, serve como um arquivo de modelo de reserva; quando outros arquivos de modelo mais específicos não estiverem disponíveis, este será utilizado. Claro, um tema maduro envolve muito mais do que apenas esses dois arquivos.

Arquivos de modelo comuns e suas hierarquias

WordPressUtilizar um sistema de hierarquia de templates para determinar qual template deve ser usado para diferentes tipos de conteúdo.PHPArquivos de template. Este é o conceito central no desenvolvimento de temas.

Um processo típico de chamada de um modelo é o seguinte:
1. Acesso a um único artigo: use preferencialmente este método.single-post.phpSe não estiver disponível, use o seguinte:single.phpE, por último,singular.php。
2. Página de acesso: use-a com prioridade.page-{slug}.phpoupage-{id}.phpSe não estiver disponível, use o seguinte:page.phpE, por último,singular.php。
3. Acesse a página de arquivamento dos artigos: use-a sempre que possível.archive-{post-type}.phpSe não estiver disponível, use o seguinte:archive.phpE, por último,index.php。

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

Outros modelos-chave incluem:header.php(Cabeça),footer.php(Footer)sidebar.php(Lateral bar)functions.php(Ficheiro de funções funcionais) e tambémfront-page.php(Página inicial estática). Entender como esses arquivos funcionam…get_header()， get_footer()Funções como essas, quando montadas juntas, são essenciais para a construção de páginas.

Construir a estrutura básica de um tema do zero

Agora, vamos começar a criar algo chamado “MyFirstTheme”O esqueleto temático é fundamental; a prática traz o verdadeiro conhecimento.”

Criar um arquivo de modelo básico

No seuWordPressO diretório de instalação…wp-content/themes/A seguir, crie um novo item chamado…my-first-themeO diretório. Em seguida, crie os seguintes arquivos:

Leitura recomendada O processo completo de construção de um website moderno: das técnicas e práticas essenciais de design de arquitetura à implantação e manutenção operacional.。

1. style.cssEscreva as informações de cabeçalho mencionadas acima.
2. index.phpEste é o modelo mais básico.

Nosindex.phpNeste caso, vamos construir primeiro a versão mais simples.HTML5Estrutura, e introduza manualmente o cabeçalho e o rodapé.

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

<!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>
    <header>
        <h1>Meu tema personalizado</h1>
    </header>
    <main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            _e( '抱歉，没有找到您要的内容。', 'my-first-theme' );
        endif;
        ?&gt;
    </main>
    <footer>
        <p>© Meu Site</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

tomar nota dewp_head()ewp_footer()Esses dois “ganchos” (hooks) permitem que plugins e temas insiram código nos locais apropriados e devem ser acionados (chamados) para que o código funcione corretamente.

Dividir o modelo em componentes modulares.

O código acima contém todo o código em um único arquivo, o que pode torná-lo difícil de manter com o tempo. Agora, vamos proceder com a divisão do código em módulos, tornando-o mais organizado e fácil de atualizar.

Criarheader.php…Abre issoMova todo o código que está antes da tag para dentro:

<!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>
<header>
    <h1><a href="/pt/</?php echo esc_url( home_url( '/' ) ); ?>">Meu tema personalizado</a></h1>
</header>
<main>

Criarfooter.phpSerá fechado.Mova todo o código que está após a tag para:

</main>
<footer>
    <p>©  我的网站</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Então, simplifique seu texto.index.phpFicheiro:

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        the_title( &#039;<h2>', '</h2>' );
        the_content();
    endwhile;
else :
    _e( '抱歉，没有找到您要的内容。', 'my-first-theme' );
endif;
?&gt;

Agora, a estrutura do seu tema ficou clara e fácil de gerenciar. Você pode…WordPressNo painel de “Aparência” -> “Temas” do backend, você pode visualizar e ativar o tema desejado.

Integração de funções principais com opções personalizáveis

Após a conclusão da estrutura básica de um tema, é necessário dar-lhe “vida”, ou seja, adicionar elementos que o tornem mais dinâmico e atraente. Isso pode ser feito através de várias técnicas, como:functions.phpFunções e características para adicionar arquivos.

O registro de temas através do arquivo `functions.php` é suportado.

functions.phpO arquivo é relacionado ao seu tópico “Backend” e é usado para definir funções, registrar características, adicionar filtros, etc. Embora não seja um arquivo de modelo, ele é automaticamente incluído a cada vez que a página é carregada.

Nele, podemos usar… add_theme_support() Funções são utilizadas para declarar as funcionalidades suportadas por um determinado tema. Por exemplo, elas permitem ativar imagens destacadas em artigos, personalizar o logotipo do site ou definir formatos específicos para os textos dos artigos.

<?php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 启用自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 启用HTML5标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

A forma correta de introduzir folhas de estilo e scripts.

Nunca use códigos hardcoded (codificados de forma fixa, sem serem gerados dinamicamente) em arquivos de templates. ou Use etiquetas para introduzir recursos estáticos. A maneira correta de fazer isso é através… wp_enqueue_style() e wp_enqueue_script() Funções. Isso garante o gerenciamento de dependências, o controle de versões e a prevenção de carregamentos repetidos.

Nosfunctions.phpAdicione o seguinte:

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-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Adicionar um menu de navegação

O menu de navegação é a estrutura fundamental de um site. Primeiramente, use-o… register_nav_menus() Local de registro de funções:

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

E então,header.phpNão.Na região, para acionar esse menu:

<?php
wp_nav_menu(
    array(
        'theme_location' => 'primary',
        'menu_id'        => 'primary-menu',
        'container'      => 'nav',
        'container_class'=> 'primary-navigation',
    )
);
?>

Através dos passos acima, você criou um tema que possui uma estrutura básica, suporte a funções e código modularizado. Embora pareça simples, ele já contém tudo o necessário para um funcionamento eficiente.WordPressTodos os conceitos centrais do desenvolvimento de temas.

resumos

Desde a criação do ambiente local, passando pela elaboração do primeiro arquivo de modelo, até a implementação final…functions.phpIntegrando as funcionalidades principais, já passamos por um…WordPressO processo completo de criação de um tópico, do zero, começa com a compreensão do sistema de camadas dos modelos (templates). Esse sistema permite mapear diferentes solicitações de conteúdo para as partes correspondentes dos modelos.PHPArquivos de modelo. Além disso, o pensamento modular (desagregação).header.php， footer.phpPráticas de desenvolvimento padronizadas (registo correto dos scripts, utilização de funções de gancho) são a base para a criação de temas fáceis de manter e robustos. Partindo desse ponto, você pode continuar a explorar mais profundamente funcionalidades como a consulta personalizada de artigos, a criação de áreas para widgets e a integração de outros recursos.Customizer APIAlém disso, abordam tópicos avançados como o desenvolvimento de modelos personalizados, permitindo a criação de websites mais poderosos e profissionais.

Perguntas frequentes Perguntas frequentes

Como adicionar uma barra lateral a um tema?

NosWordPressNele, a barra lateral é chamada de “área de widgets”. Primeiramente,functions.phpUse isto no chinês (simplificado) register_sidebar() A função registra uma ou mais áreas para componentes (widgets).

function my_first_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; '<h3 class="widget-title">',
        'after_title'   =&gt; '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Em seguida, no arquivo de template onde você deseja exibir a barra lateral (por exemplo,...single.phpoupage.phpNeste caso, chamamos dynamic_sidebar() Uma função para exibi-lo.

O que é um subtópico e por que devemos usá-lo?

Um subtópico é um tópico que herda todas as funcionalidades e estilos de outro tópico (chamado de tópico pai). O seu arquivo central é…style.cssDentre eles, é necessário que seja aprovado.Template:Os campos da cabeça (header fields) declaram o seu tópico pai (parent topic).

O maior benefício do uso de subtemas é a segurança e a sustentabilidade. Quando o tema pai é atualizado, todas as modificações personalizadas que você fez no subtema (sobreposição de estilos, aprimoramentos de funcionalidades, alterações em modelos) não serão perdidas. Esta é a maneira padrão e recomendada de personalizar temas existentes.

O que pode acontecer se houver um erro no arquivo functions.php?

functions.phpErros de sintaxe ou erros fatais no arquivo podem causar o “apagão da tela” em todo o site (ou seja, a exibição de uma página em branco). Isso acontece porque o arquivo em questão…WordPressDurante o processo de carregamento do núcleo, qualquer erro pode interromper o fluxo de inicialização.

Nessa situação, você precisa proceder da seguinte maneira:FTPOu o gerenciador de arquivos do host apresentará um erro.functions.phpRenomear um arquivo (por exemplo, alterar seu nome para…)functions.php.bakDessa forma, o site ignorará temporariamente o arquivo e restaurará o acesso, permitindo que você corrija o erro.

Como criar modelos de página personalizados?

Os modelos de página personalizados permitem que você atribua um layout único a páginas específicas. Primeiro, crie um novo arquivo no diretório do seu tema.PHPNo topo do arquivo, adicione uma nota em um formato específico para declarar que este é um modelo de página.

Por exemplo, crie um chamado…page-fullwidth.phpArquivo:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽度页面模板。
 */
get_header(); ?>
<!-- 你的全宽页面内容结构 -->
<?php get_footer(); ?>

Após salvar, quando você criar ou editar uma página, poderá selecionar o modelo “Página de Largura Total” no menu suspenso “Propriedades da Página” -> “Modelo”.