Como criar um tema personalizado do WordPress

Publicados: 2021-08-06

O WordPress ocupa uma grande porcentagem dos sites do mundo, representando 37% de todos os sites atualmente online. Embora existam muitas razões e fatores para esse sucesso, uma das principais razões é a popularidade dos recursos disponíveis para todos os usuários. Plugins, temas, posts, páginas, categorias, taxonomias, funções de usuário e manipulação de mídia apenas para citar alguns. Para aproveitar ao máximo o WordPress, é recomendável que os usuários estudem e aprendam a usar todos esses recursos. Neste blog, vamos nos concentrar e discutir temas do WordPress e orientá-lo no básico necessário sobre como criar um tema personalizado do WordPress.

O que é um tema personalizado?

Tudo no frontend do seu site está sendo executado e controlado usando algo chamado 'tema'. O tema de um site é responsável pelo design e funcionalidade específicos do site. Você pode conferir o repositório de temas do WordPress ou Themeforest para exemplos de temas; aqui você encontrará milhares de temas listados para você explorar e baixar.

Embora os temas estabelecidos do WordPress sejam ótimos, se você tiver a capacidade e a necessidade, também poderá criar seu próprio tema personalizado para um cliente, para você ou enviar para os mercados com a intenção de vendê-lo. Ao criar um tema comercial, você precisará seguir as diretrizes do marketplace para padrões de codificação, estrutura de arquivos e pastas, etc. Você pode encontrar mais detalhes sobre essas diretrizes nos sites do marketplace .

Neste blog, faremos um tutorial para mostrar uma visão geral básica sobre como criar seu próprio tema WordPress, cobrindo todos os conceitos básicos e etapas associadas ao processo.

Crie um tema personalizado do WordPress

Temas WordPress são construídos com arquivos de modelo, scripts, estilos, imagens, etc. Para prosseguir, você deve ter conhecimento prático de PHP, HTML e CSS, que são necessários para construir um tema personalizado. Compreender JavaScript também pode ser uma vantagem adicional.

Para começar, vamos primeiro nomear o tema 'Updraft'. Crie uma pasta chamada 'Updraft' dentro de wp-content/themes . Dentro desta pasta 'Updraft', você escreverá seu código relacionado ao tema, armazenará arquivos, imagens, fontes, etc.

Os principais arquivos do tema WordPress personalizado são:

  • estilo.css
  • index.php
  • funções.php

O style.css será o arquivo de folha de estilo principal e você pode adicionar todo o seu CSS neste arquivo. Lembre-se que você deve incluir um cabeçalho de informações sobre o tema. O cabeçalho deve ser semelhante ao formato abaixo e estar na parte superior de style.css .

 [código]
/*
Nome do tema: Updraft
URI do tema: https://updraftplus.com
Autor: UpdraftPlus
URI do autor: https://updraftplus.com
Descrição: O tema personalizado criado para o site.
Versão: 1.0
Licença: GNU General Public License v2 ou posterior
Licença URI: http://www.gnu.org/licenses/gpl-2.0.html
Domínio de texto: updraft
*/
[/código]

Em seguida, vá para Aparência >> Temas, onde você verá seu tema listado. Ative-o. Quando você verificar o frontend do seu site, ele mostrará uma tela em branco - já que ainda não adicionamos nada ao tema.

Lembre-se de armazenar suas imagens, scripts e estilos em seu diretório de temas. O diretório do tema se refere à pasta 'wp-content/themes/Updraft'. Certifique-se de mantê-los organizados usando uma boa estrutura de pastas, criando pastas específicas para imagens, scripts e estilos; Copie os arquivos para o respectivo diretório.

Arquivo de funções

O functions.php é o arquivo onde você pode adicionar código para diferentes propósitos. Este arquivo é carregado automaticamente durante a inicialização do WordPress, com o código escrito nele executado automaticamente.

As seguintes operações no arquivo functions.php geralmente são realizadas nesta ordem:

  • Enfileirar folhas de estilo e scripts do tema (adicione os arquivos JS e CSS ao site).
  • Ativar barras laterais, menus de navegação, postar miniaturas, etc.
  • Defina as funções usadas em todo o aplicativo.
  • etc.

O usuário pode adicionar seus estilos e scripts do arquivo functions.php da seguinte forma. Consulte o link a seguir para obter mais documentação .

 [código]
function include_js_css() {
wp_register_style( "bootstrap", get_stylesheet_directory_uri() .
"/styles/bootstrap.min.css", array(), false, "all" );
wp_enqueue_style("bootstrap");
wp_register_script('bootstrap', get_stylesheet_directory_uri() .
'/scripts/bootstrap.min.js', array(), false, true);
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts', 'include_js_css');
[/código]

A função get_stylesheet_directory_uri() fornece um caminho relativo do diretório do tema ativo. O resto do código pode ser visto como o caminho dos ativos.

Da mesma forma, para adicionar Menus de Navegação, Postar Miniaturas:

 [código]
function updraft_theme_setup() {
add_theme_support( 'post-thumbnails' );
registrar_nav_menus(
variedade(
'primário' => __( 'Menu principal' ),
'footer1=' => __('Menu Rodapé'),
'loja' => __( 'Menu da página de compras' ),
)
);
}
add_action( 'after_setup_theme', 'updraft_theme_setup' );
[/código]

Em seguida, vá para o painel do WordPress e adicione uma postagem ou página. Você deve ver a seção 'Imagem em destaque'. Além disso, em Aparência >> Menus, você encontrará o Menu Primário e o Menu de Rodapé em Gerenciar Locais .

Esses são apenas alguns dos recursos básicos que você pode cobrir ao usar o arquivo 'Function'. Há muito mais que você pode adicionar neste arquivo, se assim o desejar.

Arquivos de modelo

Ao criar seu tema, os arquivos de modelo podem ser usados ​​para afetar o layout e o design de diferentes partes do seu site. Por exemplo, você usaria o modelo header.php para criar um cabeçalho ou o modelo comments.php para incluir comentários em seu site. Os arquivos de modelo têm uma extensão .php . Como são arquivos PHP, todas as páginas saem como HTML.

Usando modelos, os desenvolvedores podem distribuir código entre vários arquivos. Abaixo estão listados alguns dos arquivos em questão.

  • index.php : O modelo principal. Este arquivo deve ser responsável pela listagem de postagens. Quando você define a página Postagens em Configurações >> Leituras , este modelo é executado.
  • page.php : Este template é responsável por renderizar suas páginas. Essa configuração pode ser substituída atribuindo um modelo de página personalizado a páginas individuais.
  • single.php : Usado quando um único post é consultado.
  • header.php : Adicione sua parte de cabeçalho neste modelo.
  • footer.php : Adicione sua parte de rodapé neste modelo.
  • sidebar.php : Adicione widgets neste modelo.

Obtenha uma lista de todos os arquivos de modelo disponíveis aqui .

Modelos de página personalizados

Por padrão, todas as suas páginas são renderizadas através do template page.php . Mas, na prática, às vezes você precisa exibir fluxos separados em páginas diferentes. Nesse cenário, é recomendável usar o poder dos modelos de página personalizados.

Por exemplo, se você tem uma página de 'Carreira' e deseja adicionar seu código a esta página; para conseguir isso, você precisaria criar um arquivo career.php no diretório do tema e colocar o comentário abaixo no topo do arquivo.

 [código]
<?php
/*
Nome do modelo: Carreira
*/
[/código]

Em seguida, vá para a seção de edição da página e atribua este modelo de 'Carreira' na caixa Atributos da página .

Agora, quando você visitar a página Carreira – o código do career.php será executado.

Arquivo de cabeçalho

Seu site terá um cabeçalho comum em todas as páginas. Você pode colocar este cabeçalho comum no header.php . O código do cabeçalho será algo assim:

 [código]
<!DOCTYPEhtml>
<html <?php language_attributes(); ?>>
<cabeça>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- seu cardápio -->
[/código]

No código acima, você notará que usamos algumas funções disponíveis no WordPress.

  • wp_head() : Este método insere elementos cruciais em seu documento – por exemplo, scripts, estilos e meta tags.
  • body_class() : Isso adicionará classes diferentes ao elemento body.
  • wp_body_open() : Usado para inserir código imediatamente após abrir a tag body. Um exemplo disso seria o script do Google Analytics.

Os menus podem ser adicionados dinamicamente através da função wp_nav_menu() . Assumindo que você já criou um menu em Aparência >> Menus e atribuiu o local 'primário' a ele. O código abaixo gera os elementos do menu dinamicamente.

 [código]
<?php
wp_nav_menu(
variedade(
'theme_location' => 'primário',
'container_class' => 'menus',
)
);
?>
[/código]

Depois que seu arquivo de cabeçalho estiver definido, use a função get_header() para incluir esse arquivo em seus outros modelos.

Arquivo de rodapé

Semelhante ao arquivo de cabeçalho, seu código comum para o rodapé irá para dentro do template footer.php .

 [código]
<!-- elementos de rodapé -->
<?php wp_footer(); ?>
</body>
</html>
[/código]

Aqui, use o wp_footer() que insere elementos, especificamente scripts, neste local. Usar get_footer() incluirá o conteúdo deste arquivo em outros lugares.

Arquivo da barra lateral

A barra lateral é uma coluna vertical usada para exibir informações em seu site que não são mostradas no conteúdo principal. Pode incluir artigos populares, banners de propaganda, um formulário de envio de boletim informativo, etc. As barras laterais contêm widgets que um administrador pode personalizar. O template sidebar.php incluirá os widgets do seu site.

Neste exemplo, criaremos uma barra lateral básica adicionando o código abaixo ao arquivo functions.php .

 [código]
function updraft_widgets_init() {
registrar_sidebar(
variedade(
'name' => esc_html__(Home Sidebar' ),
'id' => 'barra lateral-1',
'description' => esc_html__( 'Adicione widgets aqui para aparecer em sua barra lateral.' ),
'before_widget' => '<seção class="widget">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'updraft_widgets_init' );
[/código]

Em seguida, vá para Aparência >> Widgets . Aqui você encontrará a barra lateral acima. Neste exemplo, vamos adicionar alguns widgets a esta barra lateral. Para adicionar esta barra lateral ao frontend, adicione o seguinte código em sidebar.php.

 [código]
<div class="sidebar">
<?php
if ( is_active_sidebar( 'sidebar-1' ) ) {
dynamic_sidebar('sidebar-1');
}
?>
</div>
[/código]

Finalmente, lembre-se de nomear o método como ' get_sidebar()' para que você possa incluir facilmente a barra lateral em qualquer outra página como e quando necessário.

Renderizando páginas e postagens

Como já mencionado, todas as páginas do WordPress são renderizadas e executadas usando o código que você escreveu no arquivo page.php , exceto páginas com modelo de página personalizado. O código abaixo é um exemplo que mostrará uma página com o título da página, descrição e imagem em destaque.

 [código]
<?php
get_header();
?>
<div class="content-area">
<main class="site-main">
<?php
while (have_posts()):
the_post();
?>
<?php
if ( has_post_thumbnail() ):
the_post_thumbnail();
fim se;
?>
<header class="entry-header">
<?php the_title(); ?>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
<?php
fim;
?>
</main>
</div>
<?php
get_footer();
[/código]

Um código semelhante irá dentro do arquivo single.php para exibir as informações do post. Para renderizar a listagem de postagens corretamente (seu index.php ), além dos métodos acima – você também pode usar o seguinte:

  • the_catgeory() : Exibe a lista de categorias para um post.
  • the_permalink() : Exibe o permalink do post atual.
  • the_excerpt() : Exibe o trecho do post.

I18n para temas personalizados do WordPress

Ao construir um tema personalizado, tente lembrar que ele deve ser desenvolvido de forma a dar suporte à internacionalização. Ao fazer isso, torna possível que seu tema seja facilmente traduzido para outros idiomas.

Para adicionar suporte a I18n, lembre-se de usar um domínio de texto do qual você pode analisar os arquivos de origem e extrair as strings traduzíveis. Neste exemplo, estamos usando o domínio de texto 'Updraft', mas você pode escolher qualquer identificador exclusivo. Podemos definir o domínio do texto da seguinte forma.

 [código]
function i18n_setup() {
load_theme_textdomain( 'updraft', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'i18n_setup');
[/código]

Agora, sempre que você usar strings estáticas em seus arquivos de tema, envolva-as dentro das funções __() ou _e() .

 [código]
<h2><?php _e('Nome', 'updraft); ?></h2>
<?php echo __('E-mail do usuário', 'updraft'); ?>
[/código]

Existem ferramentas especiais disponíveis como POEDIT que ajudam a gerar arquivos de idioma traduzidos. Consulte este blog para obter mais informações.

Este blog cobriu o básico sobre a criação de temas personalizados do WordPress. No entanto, é um tema vasto que requer muito tempo e paciência. Abaixo estão alguns recursos úteis com os quais você deve se familiarizar e que o ajudarão a começar a criar seus temas do WordPress.

  • O loop do WordPress
  • Tags de modelo
  • Páginas de categoria
  • Função_Referência
  • Tag condicional
  • Padrões de codificação do WordPress

Ao criar um novo tema para o seu site WordPress, lembre-se de que você precisará fazer backup dele após cada alteração ou corre o risco de perder todo o seu trabalho. Use o UpdraftPlus – o plug-in de backup, restauração e clone do WordPress mais confiável e líder do mundo.

O post Como criar um tema personalizado do WordPress apareceu primeiro no UpdraftPlus. UpdraftPlus – Plugin de backup, restauração e migração para WordPress.