Guia de introdução ao desenvolvimento de temas do WordPress: construa a aparência do seu site do zero

No campo atual do desenvolvimento de websites, o WordPress ocupa uma posição importante devido à sua grande flexibilidade e ao seu vasto ecossistema. A aparência e o conjunto de funcionalidades de um website WordPress dependem, em grande parte, dos seus temas (templates). Aprender a desenvolver um tema para o WordPress do zero não só lhe permitirá controlar completamente o design do website, como também será um excelente meio de compreender em profundidade os princípios fundamentais do funcionamento do próprio WordPress. Este artigo irá guiá-lo através de todos os passos necessários para criar um tema básico, mas completamente funcional.

Ambiente de desenvolvimento e infraestrutura

Antes de escrever a primeira linha de código, é essencial criar um ambiente de desenvolvimento local adequado. Você pode usar ferramentas como XAMPP, MAMP, Local by Flywheel ou Docker. Certifique-se de que o ambiente contém PHP, MySQL e Apache/Nginx. Em seguida, instale uma nova instância do WordPress para testes.

Um tema do WordPress é essencialmente um tema que está localizado no diretório /wp-content/themes/ Os arquivos localizados dentro da pasta do diretório são o que compõem o identificador do seu tema. Dentro desta pasta, existem dois arquivos que são obrigatórios e formam a estrutura básica do tema.

Leitura recomendada Desenvolvimento de temas para WordPress do início ao fim: criação de sites personalizados de alto desempenho。

Documento de declaração de informações sobre o tema

O primeiro arquivo necessário é… style.cssSua função não é apenas armazenar os estilos, mas, o que é mais importante, é o bloco de comentários no cabeçalho do arquivo, que é usado para declarar os metadados do tema para o WordPress. Este bloco de informações deve ser colocado no topo do arquivo.

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
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Dentre eles,Text Domain Usado para internacionalização; será posteriormente utilizado nos temas. __() ou _e() A função deve traduzir as strings de forma consistente com este padrão.

Funções principais e arquivos de introdução de templates

O segundo arquivo necessário é index.phpÉ o arquivo de modelo padrão para o tema; quando o WordPress não consegue encontrar um arquivo de modelo mais específico, ele é usado para renderizar a página. Mesmo que esteja temporariamente vazio, ele deve estar presente.

No entanto, uma abordagem mais moderna e padrão é criar um… functions.php Arquivo. Este arquivo é um “plugin de funcionalidades” para o seu tema, usado para adicionar suporte a funcionalidades específicas do tema, menus de registro, barras laterais, além de estilos e scripts relacionados à fila de espera (queue). Embora não seja obrigatório, é quase um recurso padrão em todos os temas.

<?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' );
    // 注册一个导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

Criar o arquivo de modelo principal.

O WordPress utiliza um sistema de camadas de templates para determinar qual arquivo de template deve ser usado para uma determinada página. Compreender e criar esses arquivos é fundamental no desenvolvimento de temas. Além disso… index.phpVocê precisa criar, no mínimo, os seguintes modelos básicos:

Leitura recomendada Guia de introdução ao desenvolvimento de temas do WordPress: construir uma interface avançada do zero。

Cabeçalho e Rodapé Universais para Todo o Site

header.php O arquivo contém o código comum que aparece no topo de cada página, como a declaração do tipo de documento, a região geográfica, o título do site e o menu principal. get_header() A função é chamada dentro do template.

footer.php O arquivo contém código genérico que é inserido no final de cada página, como informações de copyright, referências a scripts, etc. get_footer() Chamada de função.

Um típico… header.php A parte inicial é a seguinte:

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 1008>
<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 1005>
<?php wp_body_open(); ?>
<header>
    <h1><a href="/pt/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    <p><?php bloginfo( 'description' ); ?></p>
    <nav>
        'primary',
            'menu_class'     =&gt; 'primary-menu',
        ));
        ?&gt;
    </nav>
</header>

wp_head() e wp_footer() Esses são ganchos (hooks) de extrema importância; muitos plugins e funcionalidades do núcleo do WordPress dependem deles para injetar código. É essencial garantir que eles estejam presentes.

Ciclagem de artigos e exibição de conteúdo

single.php Destinado a exibir um único artigo de blog ou um tipo de artigo personalizado. O seu elemento central é o “WordPress Loop”, que é o mecanismo utilizado para recuperar e exibir o conteúdo do banco de dados.

Um básico single.php A estrutura é a seguinte:

Leitura recomendada Do Zero ao Mestre em Desenvolvimento de Temas para WordPress: Um Guia Prático para Construir Sites Modernos。

<main>
    
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <h1>\n</h1>
            <div class="meta">
                Publicado em:  | Autor:
            </div>
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="post-thumbnail">
                    <?php the_post_thumbnail( 'large' ); ?>
                </div>
            
            <div class="content">
                \n
            </div>
        </article>
        
</main>

page.php Usado para exibir páginas estáticas; sua estrutura é semelhante à… single.php Semelhante, mas geralmente não exibe a data de publicação nem o autor.

Estilos, scripts e barras laterais

Um tema atraente e com funcionalidades corretas não pode prescindir do suporte de CSS e JavaScript; além disso, a barra lateral oferece um local para a instalação de ferramentas adicionais (ou “gadgets”).

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

Adicionar estilos e scripts de forma segura

Nunca faça links diretos (links “hard”) para arquivos CSS e JS dentro de arquivos de template. A maneira correta de incluí-los é através de… functions.php Documentos, utilizando wp_enqueue_style() e wp_enqueue_script() Uma função é utilizada para “enfileirar” esses elementos. Isso garante que as dependências sejam respeitadas corretamente e evita o carregamento repetido de recursos.

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' );

Registar a barra lateral dinâmica

A barra lateral (área de ferramentas) permite que os usuários adicionem conteúdo dinamicamente através do painel de administração do WordPress. Você precisa primeiro… functions.php Registre-o no sistema.

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' );

Após o registro, você poderá usar os arquivos de modelo (como…) sidebar.phpO conceito de "design thinking" é usado no contexto de dynamic_sidebar( 'sidebar-1' ) Use uma função para chamar essa barra lateral e, onde for necessário, exiba o conteúdo apropriado. get_sidebar() Introdução.

Internacionalização do tema e preparação para a publicação

Depois de concluir o desenvolvimento básico do tema, ainda há dois passos importantes: a internacionalização (i18n) para possibilitar a tradução, e a preparação para a publicação.

Suporte à tradução de texto

A internacionalização significa envolver todas as strings de texto direcionadas aos usuários em funções específicas do WordPress, de modo que possam ser traduzidas para outros idiomas. Isso é realizado principalmente utilizando… ()、_e() Funções, bem como… esc_html() Variantes equivalentes.

Você precisa garantir que, no style.css O correto foi definido. Text DomainE também em functions.php Não. after_setup_theme Chamado durante a ação. load_theme_textdomain()。

function my_first_theme_load_textdomain() {
    load_theme_textdomain( 'my-first-theme', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_first_theme_load_textdomain' );

Depois disso, use algo semelhante… echo __( '阅读更多', 'my-first-theme' ); É possível exibir todas as strings de uma determinada maneira. Os desenvolvedores podem usar ferramentas como o Poedit para gerar essas strings. .pot Traduzir o arquivo de modelo.

Criar capturas de tela do tópico e uma lista de verificação

Antes de enviar o tema para o diretório ou entregar ao cliente, é necessário criar uma captura de tela do tema. Este é um processo chamado… screenshot.png A imagem deve ter dimensões de 1200×900 pixels e mostrar a aparência do seu tema. Coloque-a no diretório raiz do seu tema.

Além disso, realizar uma verificação do tema de tempos em tempos é um bom hábito. Você pode instalar o plugin “Theme Check”, que realizará uma série de testes no seu tema de acordo com os mais recentes padrões do diretório de temas do WordPress, garantindo a qualidade do código, a segurança e a compatibilidade do mesmo.

resumos

Desenvolver um tema para o WordPress do zero é um processo sistemático que envolve vários aspectos, desde a estrutura básica dos arquivos, a hierarquia dos templates, até as funções de programação e a internacionalização do tema. Ao criar um novo tema, é necessário considerar todos esses elementos de forma integrada para garantir que o resultado seja funcional, intuitivo e adaptável a diferentes idiomas e culturas. style.css、functions.php Além disso, há uma série de arquivos de modelo que você pode usar para construir gradualmente a estrutura do site. É essencial entender e usar corretamente os ciclos, etiquetas de modelo e funções de gancho (hooks) do WordPress. Seguir as melhores práticas, como executar scripts de forma segura, registrar menus e barras laterais, e adicionar suporte a traduções para todo o texto, tornará o seu tema mais profissional, robusto e fácil de manter. Esse processo não só lhe permite personalizar a aparência do site, mas também lhe permite compreender mais profundamente o funcionamento do poderoso sistema de gerenciamento de conteúdo WordPress.

Perguntas frequentes Perguntas frequentes

Quais linguagens de programação são essenciais para desenvolver temas para o WordPress?

Para desenvolver temas para o WordPress, é essencial dominar PHP, HTML, CSS e JavaScript básico. O PHP é usado para processar lógica e chamar funções do WordPress; o HTML é responsável pela construção da estrutura da página; o CSS cuida do design dos estilos; e o JavaScript é utilizado para criar efeitos interativos. É de extrema importância ter um entendimento profundo das funções e do sistema de ganchos (hooks) do próprio WordPress.

Como fazer com que o meu tema suporte o editor de blocos do Gutenberg?

Para que o seu tema ofereça melhor suporte ao editor de blocos Gutenberg, você pode: functions.php Adicione funcionalidades de suporte a temas relacionados. Por exemplo, use… add_theme_support( 'wp-block-styles' ) Para carregar os estilos padrão do bloco principal, use… add_theme_support( 'align-wide' ) Para ativar as opções de alinhamento largo e alinhamento completo, você pode também adicionar estilos ao editor de texto, garantindo que a visualização dos artigos e páginas no editor de backend seja consistente com a visualização no frontend.

Qual é a diferença entre o arquivo functions.php do tema e um plugin?

functions.php Os arquivos fazem parte de um tema e suas funções estão intimamente ligadas a esse tema; portanto, quando o tema é alterado, o código contido neles geralmente deixa de funcionar. O principal objetivo dos arquivos é adicionar funcionalidades, estilos e scripts específicos para um determinado tema. Por outro lado, os plugins são módulos de funcionalidade independentes dos temas, criados para fornecer recursos genéricos ou específicos que possam ser utilizados em diferentes temas. Existe um princípio simples: se uma funcionalidade está intimamente relacionada à aparência do site, ela deve ser incluída no tema; se, no entanto, a funcionalidade é reutilizável e independente, é mais apropriado transformá-la em um plugin.

Como depurar os erros de PHP que encontro no desenvolvimento de temas?

Primeiro, certifique-se de que em seu… wp-config.php O modo de depuração está ativado no arquivo. define( ‘WP_DEBUG’, true ); Esta linha foi configurada para… trueIsso exibirá todos os erros, avisos e notificações do PHP na página. Para maior segurança (para não mostrar os erros ao público), você pode configurar isso simultaneamente. define( ‘WP_DEBUG_LOG’, true ); Registre o erro em… /wp-content/debug.log O arquivo está contendo as informações necessárias. Além disso, utilize as ferramentas de desenvolvimento do navegador (console e aba de rede) para verificar erros de JavaScript e problemas com o carregamento de recursos.