WordPress custom Theme Tutorial

WordPress custom Theme Tutorial

aprender a criar temas WordPress personalizados abre um mundo totalmente novo para você explorar. Ele permite que você crie designs personalizados para você, seus clientes e até mesmo contribua de volta para a comunidade de código aberto.

neste guia, vamos levá – lo do zero para ter um tema totalmente funcional que pode ser submetido ao WordPress.org diretório do tema.

para acompanhar, você precisará de uma compreensão básica de HTML, CSS, PHP e como o WordPress funciona.

todo o código usado neste guia estará disponível para referência neste repositório Github.

Passo #1: como Criar Arquivos Essenciais para o Seu Tema Personalizado

bom funcionamento de Um tema WordPress pode consistir de apenas dois arquivos: o estilo.css e índice.pai. Isso é possível devido à hierarquia de modelos do WordPress.

quando o WordPress produz uma página da web, ele procura o modelo mais específico disponível, se um modelo não existir, ele irá descer na hierarquia até encontrar um que o faça. Aqui está um exemplo prático:

o usuário está em https://example.com/practical-example , que é uma página. O WordPress tentará localizar um modelo nesta ordem:

1. 1. • page – {slug}.php – o slug página é / prático-exemplo, WordPress vai olhar para usar o seu-tema / Página-prático-exemplo.php
      • page-{id}.php-o ID da página é 42, WordPress vai olhar para usar o seu-tema / Página-42.pai.
      • página.php-WordPress vai tentar o propósito geral seu-tema / Página.modelo php.
      • singular.php-o modelo singular pode renderizar postagens e páginas, por isso é tentado após a Página mais específica.php
      • índice.php-por último seu-tema / índice.php é usado se nenhum outro modelo for encontrado.

vamos começar construindo um tema com apenas os arquivos essenciais e, em seguida, podemos colocar mais recursos à medida que exploramos como eles funcionam.

em /wp-content/themes/, crie uma pasta chamada my-custom-theme e crie esses dois arquivos a seguir:

estilo.css

para o WordPress reconhecer nosso tema e produzi-lo corretamente na lista Aparência → Temas, precisamos colocar algum código específico do WordPress no topo do estilo.css, parece assim:

/*Theme Name: My Custom ThemeTheme URI: https://yourwebsite.com/themeAuthor: Your NameAuthor URI: https://yourwebsite.comDescription: This is my first custom theme!Version: 1.0.0License: GNU General Public License v2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Text Domain: my-custom-themeTags: custom-background*/

tecnicamente, nenhum dos Campos é necessário, mas se você deseja que seu tema tenha uma boa aparência no wp-admin, eles são altamente incentivados. Eles também são necessários se você estiver distribuindo seu tema no WordPress.

1. 1. • nome do tema-você deve sempre fornecer um nome do tema. Se você não fizer isso, o nome da pasta será usado, my-custom-theme em nosso exemplo.
      • tema URI-se usado, o tema URI deve fornecer um link para uma página onde os visitantes podem aprender mais sobre o tema.
      • Autor-seu nome vai aqui.
      • Autor URI – um link para o seu site pessoal ou comercial pode ser colocado aqui.
      • descrição-A descrição é mostrada no modal do tema WP-admin e também na lista de temas do WordPress.
      • os números de versão ajudam os desenvolvedores a acompanhar as alterações e informar aos usuários se estão usando a versão mais recente. Seguimos o sistema de numeração SemVer para denotar a gravidade das alterações em uma atualização.Licença-como você licencia seu tema depende de você, mas se você escolher uma licença não compatível com GPL, não poderá distribuir seu tema no WordPress.
      • License Uri – este é simplesmente um link para a licença listada acima.
      • domínio de texto-o domínio de texto é usado ao traduzir seu tema para outros idiomas. Não se preocupe, vamos explorar isso em profundidade mais tarde. Por enquanto, basta saber que é uma boa prática para a pasta do tema e o domínio de texto ser o nome do tema separado por hífens em vez de espaços.
      • Tags-as Tags só são usadas se você estiver enviando seu tema para o WordPress.org diretório do tema. Eles são a base do mecanismo de ‘filtro de recursos’.

Copie e cole o acima em estilo.css e você terá algo assim:

nota: parece um pouco em branco no momento, pois ainda não temos uma captura de tela. Vamos acrescentar isso mais tarde.

índice.php

índice.php é o único outro arquivo estritamente necessário. Seu trabalho é renderizar toda a saída front-end para o nosso tema.

desde o índice.o php vai renderizar todas as nossas páginas (home, posts, categorias, arquivos), vai fazer muito trabalho. Para começar, precisamos de uma seção principal que cubra os fundamentos do HTML.

<!DOCTYPE html><html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <?php wp_head(); ?> </head>

este é HTML padrão com uma exceção, (<https://developer.wordpress.org/reference/hooks/wp_head/>). wp_head é uma função central que permite que WordPress e plugins de terceiros insiram código no cabeçalho sem modificar seus arquivos de modelo. Isso é chamado de gancho de ação.

se você estiver familiarizado com HTML, pode notar que não há uma tag <title> para produzir o título da página. Isso ocorre porque o WordPress pode usar o gancho wp_head para inserir dinamicamente o título.

outro uso de wp_head é para enfileirar estilos (.css) e scripts (.js). Existem razões muito boas para fazer isso em vez de codificá-las, que veremos mais adiante.

Seguinte, temos o corpo da página:

<body <?php body_class(); ?>>

body_class() é uma função de ajuda fornecida pelo WordPress que irá gerar uma lista útil de classes CSS que descrevem a página que está sendo exibido, como:

class="page page-id-2 page-parent page-template-default logged-in"

body_class(); também aceita um parâmetro, de forma que você pode adicionar suas próprias classes, por exemplo:

<body <?php body_class( 'wide-template blue-bg' ); ?>>

em seguida, temos o cabeçalho do modelo.

<header class="site-header"><p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p><p class="site-description"><?php bloginfo( 'description' ); ?></p></header><! – .site-header – >

aqui estamos usando as funções de modelo integradas do WordPress para gerar o Título e a descrição do Site. Também usamos uma função auxiliar, home_url (), para vincular o título do Site à página inicial.

em seguida, o corpo da página:

<div class="site-content"><?phpif ( have_posts() ) :while ( have_posts() ) :the_post();?><article <?php post_class(); ?>><header class="entry-header"><?php the_title( '<h1 class="entry-title">', '</h1>' ); ?></header><! – .entry-header – ><div class="entry-content"><?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?></div><! – .entry-content – ></article><! – #post-## – ><?php// If comments are open or we have at least one comment, load up the comment template.if ( comments_open() || get_comments_number() ) :comments_template();endif;endwhile;else :?><article class="no-results"><header class="entry-header"><h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1></header><! – .entry-header – ><div class="entry-content"><p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p></div><! – .entry-content – ></article><! – .no-results – ><?phpendif;?></div><! – .site-content – >

é aqui que fica interessante (e um pouco mais complexo). Aqui estamos usando o recurso mais importante do WordPress, o Loop. O loop faz o trabalho duro de descobrir em qual página o usuário está e o que deve ser mostrado. Em seguida, ele retorna uma lista de uma ou mais ‘postagens’ que podemos percorrer e enviar dados usando funções de modelo.

se o Loop não retornar nenhum resultado, por exemplo, em uma página 404 ou postagem excluída, usamos um operador else para mostrar uma mensagem predefinida.

sem qualquer código circundante, um loop simplificado se parece com isso:

if ( have_posts() ) : // check if the loop has returned any posts.while ( have_posts() ) : // loop through each returned post.the_post(); // set up the content so we can use template tags like the_title().the_title(); // output the post title.the_content(); // output the post content.endwhile;else : echo 'No Page Found'; // output an error message if there are no posts.endif;?>

Nota: Como o WordPress tem suas origens nos blogs, muitas funções usam a terminologia ‘post’, embora possam retornar e produzir qualquer tipo de conteúdo (postagens, páginas, tipos de postagens personalizadas).

por último, temos o rodapé, tudo o que precisamos fazer aqui é fechar as tags HTML que abrimos anteriormente. Há outro gancho de ação, wp_footer (), que é usado ativamente pelo WordPress e plugins para incluir scripts no rodapé necessários para renderizar a página.

<?php wp_footer(); ?></body></html>

se você tem acompanhado até agora, você terá um tema WordPress totalmente funcional que se parece com isso:

nosso tema não vai ganhar nenhum prêmio de design (não tem CSS) e está faltando muitos recursos que os usuários consideram essenciais (barras laterais, navegação, metadados, miniaturas, paginação, etc.) mas é um ótimo começo!Vamos continuar e ver como podemos melhorá-lo.Passo #2: Criar funções.php

funções.o php não é estritamente um arquivo necessário, mas oferece tantos benefícios que 99,99% dos temas o possuem. Em funções.php você pode utilizar a funcionalidade de tema integrada do WordPress e também adicionar seu próprio código PHP personalizado.

crie uma função.php em sua pasta de tema agora como estaremos adicionando código a ele nas próximas seções.

adicionar um menu de navegação

a maioria, se não todos os sites utilizam um menu de navegação, mas até agora nosso tema não suporta um. Para dizer ao WordPress que nosso tema possui um menu de navegação, devemos registrá-lo em funções.php assim:

register_nav_menus( array( 'menu-1' => __( 'Primary Menu', 'my-custom-theme' ),);

observação: register_nav_menus () aceita uma matriz para que você possa registrar mais de um menu, se necessário.

WordPress agora sabe sobre o nosso menu, mas ainda precisamos produzi-lo em nosso tema. Fazemos isso adicionando o seguinte código abaixo da descrição do site no índice.php:

wp_nav_menu( array( 'theme_location' => 'menu-1',) );

Agora temos uma (sem estilo) menu de navegação:

Adicionando uma barra Lateral

o Nosso tema não tem uma barra lateral (widget de área), quer, vamos corrigir isso agora.

primeiro, precisamos registrar a barra lateral em funções.php:

function my_custom_theme_sidebar() { register_sidebar( array( 'name' => __( 'Primary Sidebar', 'my-custom-theme' ), 'id' => 'sidebar-1', ) );}add_action( 'widgets_init', 'my_custom_theme_sidebar' );

agora Crie a barra lateral.php na pasta Tema e adicione o seguinte código:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) { ?> <ul class="sidebar"> <?php dynamic_sidebar('sidebar-1' ); ?> </ul><?php } ?>

aqui estamos usando uma instrução if para verificar se a barra lateral está ‘ativa’ antes de produzirmos o código. Uma barra lateral ativa é aquela à qual o usuário adicionou pelo menos um widget.

o último passo é incluir a barra lateral no índice.php, acima wp_footer () adicione uma chamada get_sidebar ().

adicionando imagens em destaque

como barras laterais e menus de navegação, não podemos apenas produzir imagens em destaque em nosso tema e esperar que funcionem, devemos dizer ao WordPress que apoiamos esse recurso primeiro. Em funções.php adicionar:

add_theme_support( 'post-thumbnails' );

Agora podemos adicionar the_post_thumbnail(); dentro do nosso loop e as miniaturas funcionarão. O único problema é que eles produzirão no tamanho máximo do WordPress de 1920px x 2560px, o que é muito grande para a maioria dos usos. Felizmente, o WordPress tem outra função auxiliar: add_image_size ();

quando um usuário carrega uma imagem e, se o tamanho da imagem for definido, o WordPress gerará uma versão da imagem carregada nesse tamanho (mantendo o original). Se a imagem do usuário for menor do que as dimensões que você definiu, o WordPress não fará nada, pois não pode tornar uma imagem maior do que a original.

para usar uma imagem de recurso otimizada em vez do original, coloque o seguinte código nas funções.php:

add_image_size( 'my-custom-image-size', 640, 999 );

o primeiro parâmetro é a alça, o segundo é a largura da imagem e o terceiro é a altura. A altura e a largura são opcionais caso você queira limitar apenas uma dimensão.

em índice.php:

the_post_thumbnail( 'my-custom-image-size' );

enfileirando estilos e Scripts

anteriormente, afirmamos que é melhor enfileirar estilos e scripts em vez de codificá-los diretamente nos arquivos de modelo. Isso porque o enfileiramento permite muito mais flexibilidade.

quando feito corretamente, o enfileiramento também informa ao WordPress quais recursos estão sendo carregados. Quando o WordPress sabe quais recursos são necessários, ele pode garantir que o mesmo recurso não esteja sendo carregado mais de uma vez. Isso é especialmente importante quando você tem uma biblioteca extremamente popular como jQuery ou FontAwesome que vários temas e plugins estarão utilizando.

outro benefício do enfileiramento é que um recurso que é enfileirado pode ser baixado por um plugin, evitando a necessidade de modificar arquivos de modelo.

Embora nosso tema tenha um estilo.arquivo css ainda não está usando, vamos perguntar isso agora:

function my_custom_theme_enqueue() { wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

get_stylesheet_uri() é uma função auxiliar que recupera o URI da folha de estilo do tema atual. Se fôssemos enqueueing qualquer outro arquivo que iria precisar para fazer isso em vez:

wp_enqueue_style( 'my-stylesheet', get_template_directory_uri() . '/css/style.css' );

Nosso tema não tem qualquer scripts, se ele fez poderíamos enfileirar-los como esta:

function my_custom_theme_enqueue() {wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/scripts.js' );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

Uma exceção para o acima é de scripts que tenham sido pré-registadas pelo WordPress, nesses casos, você só precisa fornecer o primeiro parâmetro ($handle):

wp_enqueue_script( 'jquery' );

adicionando estilo com CSS

nosso tema tem bases fortes, mas não tem nenhum design, adicionando algum CSS básico ao estilo.css fará uma grande diferença. Adicionamos em torno de ~100 linhas de CSS para o nosso exemplo de tema como uma demonstração e o resultado se parece com isso:

Tag de Título

Todos os temas devem utilizar o WordPress é uma funcionalidade integrada para gerar a tag de título, que é habilitado adicionando este código para as funções.arquivo php: add_theme_support( 'title-tag' ); isso é tudo o que há para ele, WordPress irá lidar com a saída da página <título> e se necessário plugins podem modificar a saída usando filtros. Os plugins de SEO geralmente fazem isso em um esforço para otimizar ainda mais os títulos.

Passo #3: Adicionar Peças de modelo

agora 80% do nosso código de modelo está em índice.pai.

embora isso funcione, isso resultará em muita repetição de código quando tivermos outros arquivos de modelo, como singular.php, pesquisa.php e arquivo.pai. As peças do modelo facilitam o desenvolvimento do tema, permitindo-nos reutilizar o código entre os modelos. Como nosso cabeçalho e rodapé serão os mesmos em todas as páginas, eles são um candidato perfeito para usar peças de modelo. Primeiro, criar cabeçalho.php e mova o seguinte código do Índice.php:

<!DOCTYPE html><html <?php language_attributes(); ?>><head><meta charset="<?php bloginfo( 'charset' ); ?>"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="profile" href="<https://gmpg.org/xfn/11>"><?php wp_head(); ?></head> <header class="site-header"> <p class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php bloginfo( 'name' ); ?> </a> </p> <p class="site-description"><?php bloginfo( 'description' ); ?></p><?phpwp_nav_menu( array( 'theme_location' => 'menu-1',) );?> </header><! – .site-header – >

em índice.php substitua o código acima por:

<?php get_template_part( 'header' ); ?>

nota: ao obter uma parte do modelo, você deve omitir o.php do identificador da parte do modelo.

em seguida, crie uma parte do modelo de rodapé movendo este código para o rodapé.php e repetindo o processo acima:

<?php wp_footer(); ?></body></html>

por fim, moveremos o código ‘sem resultados’ para uma parte do modelo também, pois é provável que seja usado em vários modelos. Criar conteúdo-Nenhum.php e mova este código para o novo arquivo.

<article class="no-results"> <header class="entry-header"> <h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1> </header><! – .entry-header – > <div class="entry-content"> <p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p> </div><! – .entry-content – ></article><! – .no-results – >

seu Índice agora deve ficar assim:

<?php get_template_part( 'header' ); ?> <div class="site-content"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <?php the_post_thumbnail(); ?> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><! – .entry-header – > <div class="entry-content"> <?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?> </div><! – .entry-content – > </article><! – #post-## – > <?php // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; else : get_template_part( 'content-none' ); endif;?></div><! – .site-content – ><?phpget_sidebar();get_template_part( 'footer' );

embora o acima funcione perfeitamente, há uma ligeira melhoria que podemos fazer. O WordPress tem funções auxiliares para incluir as partes do modelo de cabeçalho, rodapé e barra lateral. Como é uma prática recomendada usar a funcionalidade principal sempre que possível, devemos usá-las.

substitua get_template_part( 'header' ); por get_header(); e get_template_part( 'footer' ); porget_footer();

Etapa #4: Adicione singular.php, arquivo.php, pesquisa.php e 404.php

a base que concluímos com as peças do modelo pagará dividendos à medida que adicionarmos novos arquivos de modelo ao nosso tema. Abaixo listamos o mais comum. Para evitar sobrecarregar você com exemplos de código, vinculamos ao código-fonte no Github.

singular.php

postagens e páginas, quando mostradas em seus próprios URLs, são consideradas ‘singulares’, pois na maioria das vezes o layout será o mesmo para ambos os tipos de página. Mas no caso de não ser você pode usar a Página mais específica.php e single.php (post) em vez disso.

exemplo de código-singular.php

arquivo.php

os modelos de arquivo geralmente diferem dos modelos singulares de duas maneiras: eles mostram trechos em vez do conteúdo completo e apresentam um cabeçalho de arquivo explicando o conteúdo.

Consulte-o para o modelo de hierarquia e você vai ver que o arquivo de modelo abrange todos os tipos de arquivos (autor, categoria, tag, taxonomia, data) se isso não funcionar para o seu caso de uso, você ainda pode usar o mais modelos específicos de:

1. 1. • autor.php
      • categoria.php
      • tag.php
      • taxonomia.php
      • data.php

exemplo de arquivo de código.php

pesquisar.php

sites WordPress podem ser pesquisados usando o ?s = parâmetro URL, por exemplo, yourwebsite.com?s=test. Pesquisa.o modelo php produz os resultados dessas pesquisas.

exemplo de pesquisa de código.php

404.php

a declaração else que adicionamos no índice.o php captura erros de “página não encontrada”, mas você pode querer desacoplar essa funcionalidade em seu próprio arquivo de modelo para ter mais controle sobre a saída. Esse é o caso de uso do 404.arquivo de modelo php.

Exemplo De Código – 404.php

Passo #5: arquivos auxiliares

se você estiver distribuindo seu tema para o público, os seguintes arquivos são imperativos. Sem eles, seu tema será rejeitado em repositórios de temas e mercados.

captura de tela.png

a captura de tela é mostrada na lista de temas wp-admin quando o usuário está selecionando um novo tema. Aqui estão algumas práticas recomendadas que você deve seguir:

1. 1. • as capturas de Tela devem ser 1200px x 900px
      • as capturas de Tela devem estar em .png ou .formato jpg
      • as capturas de Tela devem ser uma representação precisa do tema
      • as capturas de Tela devem ser otimizadas (use tinypng.com ou similar)

leia-me.txt

o WordPress não usa nenhuma informação do readme.txt, ele puxa tudo o que precisa do estilo.Forum. Por outro lado, o diretório de temas do WordPress extrai informações importantes do arquivo readme e o considera um arquivo necessário.

a maioria dos desenvolvedores usa readme.txt como o local central para armazenar todas as informações sobre seu tema. Um simples readme.TXT se parece com isso:

=== Theme Name ===Requires at least: 5.0Tested up to: 5.2Requires PHP: 5.6License: GPLv2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Short description. No more than 150 chars.== Description ==Theme desc.== Changelog === 1.0 =* Added new option== Resources ==* normalize.css <https://necolas.github.io/normalize.css/>, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, (<https://opensource.org/licenses/MIT>)

1. 1. • requer pelo menos-esta é a versão mínima do WordPress com a qual seu tema é compatível.
      • testado até – este campo denota a versão mais recente do WordPress com a qual seu tema foi testado.
      • requer PHP – este campo denota a versão mínima do PHP em que seu tema funcionará.
      • Descrição – Este campo de descrição não é exibido atualmente em nenhum lugar.
      • Changelog – o changelog não é usado em nenhum lugar, mas os desenvolvedores e alguns usuários farão referência a este arquivo para ver quais alterações foram feitas.
      • recursos-a maioria dos recursos de terceiros requer atribuição de algum tipo. A seção de recursos é um lugar amplamente aceito para colocá-los. Mesmo para recursos que não exigem explicitamente atribuição, ainda é uma boa prática listá-los aqui para que os usuários estejam cientes das licenças de recursos que estão usando.

Passo #6: Crie modelos de página

os modelos de página permitem que os desenvolvedores criem modelos personalizados que podem ser usados para postagens e páginas individuais. Por exemplo, a maioria dos temas tem um layout de duas colunas (barra lateral de conteúdo), mas em algumas páginas, o usuário pode querer apenas se concentrar no conteúdo e não mostrar uma barra lateral. É aí que um modelo de página pode ajudar.

como são criados os “modelos de página”?

em nossa pasta de Temas, Crie uma nova pasta chamada ‘page-templates’ e dentro dessa pasta crie um arquivo chamado single-column.pai. Para acelerar as coisas, copie todo o código do singular.php para Page-templates / single-column.php e remova a chamada para get_sidebar (), pois este modelo não precisará disso.

Agora precisamos adicionar um cabeçalho especial que diz WordPress este é um modelo de página, parece que esta:

/*Template Name: Single Column TemplateTemplate Post Type: post, page*/

O código é auto-explicativo, estamos simplesmente dizendo WordPress o nome do modelo e que tipos de pós que ele pode ser usado com.

isso é tudo o que existe, nosso novo modelo de página agora está disponível no editor em ‘Atributos de página’.

Etapa 7: torne seu tema compatível com RTL.css

nem todos os idiomas lidos da esquerda para a direita. Árabe e hebraico, por exemplo, são lidos da direita para a esquerda (RTL). Há uma maneira simples de tornar seu tema compatível com os idiomas RTL.

crie um novo arquivo na sua pasta de temas chamada rtl.css, em seguida, copie e cole o seguinte código:

body {direction: rtl;unicode-bidi: embed;}

se um idioma RTL é o idioma ativo em um site WordPress, o WordPress sabe carregar esse arquivo CSS automaticamente.

esta é uma implementação muito básica da funcionalidade RTL para você começar. Se você está interessado em aprender mais aqui estão dois recursos fantásticos:

documentação de Suporte de Idiomas da direita para a esquerda

vinte e vinte código RTL

Passo #8: Sempre Siga as melhores práticas

as melhores práticas evoluíram ao longo do tempo para facilitar a construção e manutenção de temas do WordPress. Não apenas seguir esses princípios o ajudará, mas também tornará mais fácil para outros desenvolvedores quando precisarem trabalhar com seu código.

1) Use temas iniciais

os temas iniciais fornecem uma base sólida para você construir seu tema. Normalmente, eles são leves, contêm pouco ou nenhum estilo e nenhuma opção de configuração. Com o tempo, você pode construir o seu próprio starter tema que você pode basear todos os seus projetos, mas, por agora, aqui estão algumas opções populares:

1. 1. • Ressalta
      • Andaime
      • HTML5 em Branco

2) Conheça o WordPress Padrões de Codificação

padrões de Codificação são uma forma de formatar o seu código, de maneira consistente em toda a base de código. O WordPress tem padrões de codificação para HTML, CSS, Javascript e PHP. Embora o uso de um padrão de codificação não tenha efeito na experiência do usuário final, ele torna seu código muito mais legível. Mesmo que você não use os padrões de codificação do WordPress, sempre recomendamos o uso de um padrão.

1. 1. • WordPress.org Padrões de Codificação
      • WPCS
      • PHP Padrões de Codificação

3) Use a Localização

Graças ao trabalho de voluntários, o WordPress está disponível em centenas de idiomas. Se o seu tema vai ser lançado publicamente, ele precisa ser construído de uma forma que permita que ele seja traduzido também.

não se preocupe, é super fácil de fazer. Tudo o que precisamos fazer é garantir que todas as strings sejam passadas por uma ‘função de localização’ em vez de serem enviadas diretamente.

em vez disso:

<?php echo 'Previous Post'; ?>

em vez disso, fazemos isso:

<?php echo __( 'Previous Post', 'my-custom-theme' ); ?>

__() é uma função de localização que aceita uma string e um domínio de texto. A função retorna uma tradução da string fornecida ou a string original se uma tradução não estiver disponível.

4) evite a funcionalidade do Plugin

quando um usuário muda o tema, apenas a camada de apresentação deve mudar. O conteúdo e a funcionalidade devem permanecer os mesmos. O que isso significa é que qualquer função que afete como as funções do WordPress devem estar contidas em um plugin, não no seu tema. Alguns exemplos de funcionalidade do plugin incluem:

1. 1. • Tipos de Pós Personalizado
      • Página Construtores
      • Mídia Social de Compartilhamento de
      • Search Engine Optimization (SEO)

Embora possa parecer conveniente (e, possivelmente, de um ponto de venda) para incluir SEO controles em um tema, ele, na verdade, prejudica o usuário a longo prazo. No futuro, eles precisarão mudar seu tema, mas não podem, Porque todas as suas configurações de SEO estão fortemente acopladas ao tema atual. Em contraste, se as configurações fossem armazenadas em um plug-in, elas poderiam alterar o tema sem se preocupar.

5) Prefixação (evitar conflitos)

para evitar conflitos, todas as funções, classes e variáveis globais criadas pelo seu tema devem ser prefixadas. Isso é importante porque é impossível saber qual outro código está sendo executado no site do Usuário. A prefixação evita confrontos de nomes e erros fatais.

o nome do seu tema separado por traços ou sublinhados funcionará como um prefixo na maioria das vezes. Se o nome do tema for muito longo, as iniciais podem funcionar.

Theme Name: Scaffoldclass Scaffold_Class {}function scaffold_function() {}global $scaffold_globalTheme Name: My Long Theme Nameclass MLTN_Class {}function mltn_function() {}global $mltn_global

6) Use a funcionalidade principal

onde ela existe, você deve sempre usar a funcionalidade principal em vez de reinventar a roda. Isso inclui, mas não se limita a barras laterais, Menus de navegação, miniaturas de Postagens, cabeçalhos personalizados e fundos personalizados. Esses recursos foram testados por milhões de usuários e são ativamente mantidos e aprimorados.

se você precisar alterar a funcionalidade ou a saída de uma função principal, é possível usar um dos muitos ganchos e filtros que o WordPress oferece. Por exemplo, wp_nav_menu() tem um parâmetro ‘walker’ para que você possa ter controle total da saída.

7) Dados de escape e higienização

como desenvolvedor de temas, você deve estar familiarizado com o escape e a higienização de dados para proteger seus usuários de possíveis exploits.

escapar

escapar é o processo de verificação de dados é seguro antes de sua saída e sanitizing está verificando dados antes de ser salvo no banco de dados.

WordPress tem funções auxiliares que você pode usar para escapar de dados para que você não precisa construir aqueles você mesmo. esc_html é um exemplo de uma função de escape. É assim que uma saída sem escape se parece:

echo get_theme_mod( 'error_page_title' );

para escapar da saída, fazemos isso:

echo esc_html( get_theme_mod( 'error_page_title' ) );

algumas outras funções de escape que você deve estar ciente são esc_attr (), absint (), esc_url ().

também É possível traduzir e escapar de uma seqüência de caracteres usando uma única função:

echo esc_html( __( '404 Not Found', 'my-custom-theme' ) );

Torna-se:

echo esc_html__( '404 Not Found', 'my-custom-theme' );// oresc_html_e( '404 Not Found', 'my-custom-theme' );

Dica: em qualquer lugar em seu tema, onde você tem echo $ você deve verificar se ele precisa ser escapado, ele normalmente faz.

sanitização

se você adicionar configurações ao seu tema, você precisa se certificar de que os dados que os usuários inserem nessas configurações são seguros antes de entrar no banco de dados. O WordPress tem várias funções para ajudar na higienização da entrada.

ao adicionar uma configuração ao seu tema usando a API do personalizador, ele tem um parâmetro chamado ‘sanitize_callback’ que aceita o nome de uma função de sanitização. Qualquer entrada que a configuração leva é verificada pela função que você fornece para ‘sanitize_callback’ antes de entrar no banco de dados.

destaca a importância da sanitização de que, se mesmo uma de suas configurações estiver faltando o sanitize_callback, ela não será aceita no diretório de temas do WordPress.

$wp_customize->add_setting( 'my_custom_theme_setting', array( 'sanitize_callback' => 'sanitize_text_field' // A core sanitization function. ));

uma lista oficial de funções de sanitização e escape pode ser vista aqui: sanitização de dados/Escape

Passo # 9: distribua seu tema WordPress

os temas podem ser distribuídos por diferentes canais, dependendo do resultado que você deseja alcançar. Se o seu resultado é simplesmente contribuir para a comunidade de código aberto, então não há melhor maneira de fazer isso do que enviar seu tema para o diretório WordPress. Se, em vez disso, você está procurando vender seu tema e ganhar dinheiro diretamente, existem maneiras de fazer isso também.

Aqui estão os principais sites de distribuição de temas:

1) WordPress.org (Melhor lugar para obter downloads e usuários)

O principal benefício da hospedagem de seu tema no WordPress é que você obtenha uma visibilidade impulso a partir de seu tema a ser visto não apenas sobre o wordpress.site da organização, mas também no painel wp-admin.

outro benefício de hospedar seu tema com WordPress é o sistema de atualização integrado. Se você atualizar seu tema, todos os usuários serão notificados dentro de seus painéis wp-admin e terão um caminho fácil para atualizar para a versão mais recente.

WordPress.org só aceita temas gratuitos, mas isso não significa que você não pode ganhar dinheiro. Um tema gratuito pode ser um ótimo canal para promover seu tema premium, plugin ou serviço.

2) WordPress.com

WordPress.com hospeda temas gratuitos e premium. No entanto, eles não estão abertos a novos envios de autores há alguns anos.

3) ThemeForest

ThemeForest é o mercado líder para temas premium. O tema mais vendido (Avada) tem vendas superiores a US $5.000.000.

de um modo geral, os compradores do Theme Forest esperam temas “multifuncionais “completos. Todos os principais temas têm funcionalidade de construtor de páginas e são suportados por equipes de desenvolvedores. É um mercado muito difícil de explorar para novos autores.

4) mercado criativo e Mercado Mojo

mercado criativo e Mercado Mojo são pequenos players no mercado de temas premium, razão pela qual os agrupamos. Ambos oferecem efetivamente o mesmo serviço que ThemeForest, mas em menor escala.

5) Github

Github é a maneira mais fácil de tornar seu tema gratuito público. Não há processo de revisão e não há diretrizes a seguir. No entanto, você não se beneficiará da visibilidade de wordpress.org e precisará construir seu próprio mecanismo de atualização para que os usuários obtenham as versões mais recentes.

Passo # 10: Teste e melhore o código

1) testando seu tema

teste de unidade de tema

o teste de unidade de tema é um arquivo de importação de conteúdo WordPress padrão que contém uma ampla gama de tipos de Conteúdo e casos de borda. É fácil fazer upload para o seu ambiente de desenvolvimento e destacará muitos cenários que você pode ter esquecido.

WP_DEBUG

como desenvolvedor de temas, testar seu tema com WP_DEBUG ativado é o mínimo que você deve estar fazendo. Seu tema deve retornar sem erros ou avisos quando WP_DEBUG está definido como true.

também é importante repetir o teste com as diferentes versões do PHP que seu tema suporta. Com cada versão principal do PHP, há novas mudanças, avisos e depreciação. Não é incomum que um tema seja livre de erros no PHP5.6, mas mostre erros no PHP7.

para habilitar WP_DEBUG, adicione o seguinte código ao wp-config.php:

DEFINE( 'WP_DEBUG', true );

Monster Widget

Monster Widget é um plugin útil que permite adicionar 13 widgets principais à sua barra lateral de uma só vez. Os widgets principais usam uma variedade de elementos HTML, o que os torna perfeitos para testar seu tema.

Theme Sniffer

o Theme Sniffer é um plugin criado pela Theme Review Team (TRT). Ele pega muitos (mas não todos) erros de escape e localização. Ele também verifica seu tema em relação aos padrões de codificação do WordPress.

2) Enviando seu tema para WordPress.org

no início deste guia, dissemos que no momento em que você chegou ao fim você teria um tema que você poderia enviar para wordpress.org. vamos olhar para esse processo.

processo de Upload

o processo de upload é simples. Crie ou faça login na sua conta do WordPress e navegue até esta página– https://wordpress.org/themes/upload/

você pode zip seu tema e enviá-lo agora, mas aqui estão algumas coisas que você pode querer saber primeiro.

requisitos

a equipe de revisão do tema (TRT) tem um conjunto estrito de requisitos. Seu tema não será aceito no diretório até que atenda a todos os requisitos.

processo de revisão

quando você carrega um tema, há um processo de revisão de dois estágios que deve passar antes que possa ser aceito no diretório.

primeiro, uma verificação automatizada é realizada assim que você pressiona Upload. Nos bastidores, o verificador automatizado funciona de maneira muito semelhante ao plugin Theme Sniffer. Se encontrar algum erro, ele rejeitará o tema e o processo de upload terminará lá.

se o seu tema passar na verificação automatizada, ele se juntará a uma fila de temas aguardando uma revisão humana. A revisão humana é completada por voluntários do TRT. O número de temas na fila excede em muito o número de revisores, o que significa que muitas vezes pode levar de 2 a 3 meses para que seu tema chegue à frente da fila.

é imperativo que seu tema seja livre de erros e cumpra todos os requisitos no momento em que atingir o estágio de revisão humana, como se tivesse mais de 3 erros significativos, ele pode ser rejeitado. Se um tema for rejeitado na fase de revisão humana, ele deve voltar à fila na parte de trás, o que significa esperar de 2 a 3 meses novamente por outra revisão humana.

Recurso Útil: Os erros mais comuns de desenvolvimento de temas do WordPress (e como corrigi-los)

vale a pena notar que o TRT está sempre procurando novos revisores, o voluntariado pode ser uma ótima experiência de aprendizado e uma maneira de contribuir para a comunidade de código aberto.

3) Sua Lista de temas

Parabéns, seu tema foi aprovado! Agora você tem sua própria lista que se parece com isso.

aqui está uma visão geral do que você pode esperar ver nesta página:

1. 1. • captura de tela – a captura de tela é a primeira coisa que os usuários em potencial veem, portanto, torne-a o mais atraente possível. Mas lembre-se de que ainda deve ser uma representação precisa do tema e não uma renderização do photoshop. Inspire-se nos temas mais populares.
      • descrição-A descrição que é retirada do estilo.css é um lugar ideal para descrever seu tema e seus principais recursos. Também ajuda a listar plugins recomendados ou necessários aqui. A descrição não suporta qualquer formatação (negrito, itálico, hiperlinks) ou mesmo quebras de linha.
      • Tags-esta é uma representação das tags listadas em estilo.Forum. Apenas essas tags aqui são aceitas.
      • botão de visualização – a visualização é gerada por wordpress.org e como desenvolvedores de temas, não temos controle sobre a saída. Infelizmente, como o visualizador usa conteúdo básico e nenhuma configuração, geralmente resulta em uma visualização menos do que perfeita.
      • link da Página Inicial do tema – o URL do botão de visualização é retirado do campo’ Theme URI ‘ em seu estilo.Forum. Existem requisitos estritos de que esse URL só deve ser usado para exibir uma página exibindo informações sobre seu tema.
      • instalações ativas – este é o número de sites que usam ativamente o tema. O número é arredondado para os dez, cem ou mil mais próximos. Não é possível recuperar um número exato.
      • Downloads por dia – é quantas vezes seu tema foi baixado. Um ‘Download’ pode ser um novo download ou uma atualização de tema.
      • comentários-para que um usuário deixe um comentário, ele deve estar conectado a um wordpress.org conta. De um modo geral, as avaliações são difíceis de obter, a menos que você peça explicitamente aos seus usuários que as enviem.
      • suporte-a plataforma de suporte integrada é ótima para gerenciar e resolver problemas com seu tema. O Usuário deve estar logado para criar um thread de suporte.
      • traduções-a plataforma de tradução é um recurso fantástico. Se você seguiu o Conselho ao longo deste guia para localizar seu tema, seus usuários poderão traduzi-lo para outros idiomas e expandir sua base de usuários em potencial além de apenas usuários que falam inglês.

4) Atualizando o Seu Tema

Quando você faz alterações para o seu tema no futuro e precisa atualizar a versão hospedado no WordPress, o processo é simples.

primeiro atualize o campo’ Version: ‘e o changelog no readme.txt. Em seguida, feche o arquivo e faça o upload novamente usando a mesma página de upload de antes.

o sistema o reconhecerá como uma atualização e o aprovará automaticamente para que não exija outra revisão humana.