Guia de introdução ao desenvolvimento de temas no WordPress: construa o seu primeiro tema do zero.

Os preparativos antes de começar.

Antes de começar a escrever qualquer código, é necessário garantir que o ambiente de desenvolvimento esteja pronto. Primeiramente, você precisa de um ambiente de servidor local, como XAMPP, MAMP ou Docker. Em seguida, um editor de código é essencial; Visual Studio Code ou PHPStorm são boas opções. O mais importante é instalar a versão mais recente do WordPress e garantir que ele esteja funcionando corretamente.

Em seguida, no diretório da sua instalação do WordPress,wp-content/themesDentro da pasta, crie uma nova pasta; esta será o seu diretório de temas. Por exemplo, você pode nomeá-la…my-first-themeO nome deste diretório se tornará o seu identificador de tópico, portanto, é recomendado o uso de letras minúsculas, números e hifens.

Na pasta de temas, existem dois arquivos que são essenciais e mínimos para iniciar o funcionamento de um tema WordPress:style.csseindex.phpSem elas, o WordPress não conseguirá reconhecer o seu tema na lista “Aparência” -> “Temas” no painel de administração.

Leitura recomendada Aprenda a desenvolver temas do WordPress do zero: um guia completo para criar um site personalizado.。

Compreender a estrutura central dos arquivos relacionados ao tema.

Um tema WordPress completo é composto por uma série de arquivos de modelo (templates), que seguem convenções de nomeação específicas. Cada arquivo é responsável por renderizar uma parte diferente do site.

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

Esquemas de estilo e declarações de informações de tema

style.cssOs arquivos não são apenas usados para escrever estilos CSS; a área de comentários no início do arquivo é também onde o WordPress lê os metadados (meta data) do tema. Essa área deve estar no topo do arquivo e seguir um formato específico.

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

“Text Domain” é utilizado para a internacionalização e é um identificador essencial para o carregamento subsequente dos arquivos de tradução. Após preencher essas informações, atualize a página do tema no painel administrativo do WordPress e você deverá ver um ícone chamado “Meu Primeiro Tema”.

Qual é a função do arquivo de modelo principal?

index.phpEste é o arquivo do modelo principal do seu tema e também o modelo de “recurso” padrão do site. Quando o WordPress não consegue encontrar um arquivo de modelo mais específico…single.phpoupage.phpQuando isso acontece, é esse método que é utilizado.index.phpA sua estrutura mais básica consiste na chamada da parte de cabeça (header) do WordPress, no conteúdo do ciclo principal e na parte de rodapé (footer).

<main id="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>

\n

Expansão dos modelos básicos e introdução de novas funcionalidades

Apenasindex.php、style.cssIsso não é suficiente; precisamos separar as partes como o cabeçalho, o rodapé e os menus laterais para tornar a estrutura mais clara, e também introduzir as funcionalidades principais do tema.

Leitura recomendada Do zero: Passo a passo, ensinamos a você como desenvolver um tema personalizado para o WordPress.。

Separar os templates da parte superior (cabeça) da parte inferior (corpo) do conteúdo.

Criarheader.phpO arquivo contém uma declaração do tipo do documento, bem como o código HTML.Algumas partes, bem como o título e a área de navegação do site. Utilize isso.wp_head()Ganchos (hooks) são utilizados para garantir que os plugins e o núcleo do WordPress injetem corretamente os scripts e estilos necessários.

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

Criarfooter.phpO arquivo contém as informações do rodapé do site e, no final, é executada uma chamada (uma função ou instrução) para processar essas informações.wp_footer()Gancho.

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

Dessa forma,index.phpNesse caso, podemos usá-lo.get_header()eget_footer()Funções são usadas para introduzi-las.

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

Criar um arquivo de função

functions.phpÉ o “cérebro” do tema, responsável por adicionar funcionalidades, criar menus de registro, ativar imagens especiais, definir barras laterais, etc. Não é um arquivo de modelo, mas um arquivo PHP que é carregado automaticamente durante a inicialização do tema.

A seguir está…functions.phpUm exemplo básico de:

<?php
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
function my_first_theme_register_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_register_menus' );

// 引入主题的样式表和脚本
function my_first_theme_enqueue_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 引入一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_enqueue_scripts' );
?>

Criar mais arquivos de modelo.

Para que diferentes tipos de páginas tenham um layout mais apropriado, precisamos criar mais arquivos de templates específicos.

Leitura recomendada Desde a instalação até a aperfeiçoção: Guia completo e análise detalhada de técnicas práticas para criar sites com o WordPress。

Página única do artigo e modelo de página

single.phpUsado para renderizar um único artigo de blog. Sua estrutura é semelhante à…index.phpSemelhante, mas geralmente contém modelos de comentários.comments.phpA chamada de…

page.phpÉ usado para renderizar páginas estáticas. Geralmente, não exibe metadados como categorias ou etiquetas, mas se concentra no conteúdo da página em si.

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

Modelo de lista de arquivamento de artigos

archive.phpUsado para exibir categorias, etiquetas, autores, datas e outras informações nas páginas de arquivamento. Você pode usar etiquetas condicionais, como…is_category()、is_tag()Para distinguir os diferentes tipos de arquivos e exibir os títulos correspondentes.

Criar uma página de erro 404.

404.phpÉ a página que é exibida quando um usuário acessa um URL inexistente. Uma boa página 404 deve conter uma mensagem amigável, uma caixa de pesquisa e links para as páginas principais, para ajudar o usuário a encontrar o conteúdo desejado.

resumos

Através deste guia, você completou todo o processo, desde a criação de pastas e arquivos essenciais até a compreensão da estrutura hierárquica dos templates, passando pela expansão das funcionalidades do tema e pela criação de templates personalizados. Você construiu um tema com uma estrutura básica, reconhecido pelo WordPress e com funcionalidades adicionais. Embora pareça simples, ele já contém todos os conceitos fundamentais. Agora, você pode aprofundar seu conhecimento sobre as tags dos templates, as consultas personalizadas, os vários usos dos ciclos do WordPress, bem como sobre como criar tipos de artigos personalizados e opções de personalização do tema, a fim de tornar suas funcionalidades ainda mais poderosas e personalizadas.

Perguntas frequentes Perguntas frequentes

###: Por que o meu tema não está sendo exibido no painel administrativo do WordPress?
Por favor, verifique primeiro se a sua pasta de temas está localizada no local correto.wp-content/themes/No diretório. Em seguida, confira se a pasta contém os arquivos necessários.style.csseindex.phpArquivo. Por fim, abra-o.style.cssAssegure-se de que o bloco de comentários com as informações do tema no topo do arquivo esteja formatado corretamente, especialmente…Theme Name:Esta linha.

Como adicionar suporte para logotipo personalizado ao meu tema?

Você precisa do conteúdo relacionado ao tópico.functions.phpAdicione uma linha de código ao arquivo para ativar esta funcionalidade.add_theme_support( ‘custom-logo’ )Função: Ao ativá-la, os usuários poderão carregar e configurar o Logotipo em “Aparência” -> “Personalizar” -> “Identidade do Site”. Você também precisa…header.phpUse no local apropriado.the_custom_logo()Uma função para exibi-lo.

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

functions.phpAs funcionalidades contidas nesse componente estão intimamente ligadas ao tema atualmente ativado. Se você trocar de tema, essas funcionalidades não estarão mais disponíveis. Por outro lado, as funcionalidades dos plugins são independentes do tema; elas serão ativadas independentemente do tema escolhido, desde que o plugin esteja instalado e ativado. Portanto, se as suas funcionalidades estiverem fortemente relacionadas à apresentação visual do tema (como a localização dos campos de registro ou a definição do layout), é aconselhável colocá-las dentro de um plugin.functions.phpSe for uma funcionalidade genérica (como formulários de contato ou otimização para SEO), seria mais apropriado transformá-la em um plugin.

Como fazer com que o meu tema suporte múltiplas línguas?

Você precisa fazer duas coisas. A primeira é, durante o desenvolvimento, envolver todas as strings direcionadas aos usuários usando uma função de tradução. Por exemplo…__( ‘文本’, ‘my-first-theme’ )ou_e( ‘文本’, ‘my-first-theme’ )E assegure-se de…‘my-first-theme’E comstyle.cssPrimeiro, é necessário garantir que o “Text Domain” declarado esteja em conformidade com o especificado. Em segundo lugar, utilize ferramentas como o Poedit para extrair todas as strings que precisam ser traduzidas do código do seu tema e, em seguida, gerar o arquivo de traduções correspondente..potOs arquivos são, em seguida, utilizados pelos tradutores para criar as versões em línguas correspondentes..poE o compilado.moArquivo, e coloque-o no tópico./languages/No diretório.