Como criar modelos personalizados do WordPress manualmente – um guia

Se você não estiver satisfeito com o design do seu site e o tema escolhido não oferecer o nível de opções de personalização necessário, talvez seja hora de considerar a criação de seu próprio modelo personalizado! Dependendo de suas necessidades, este modelo do WordPress pode ser um modelo de postagem personalizado ou modelo de página ou visualização de categoria.

Uma das coisas interessantes sobre o WordPress é que, não importa como seu site WordPress foi construído, você sempre pode alterar o layout ou o design a qualquer momento. Isso pode ser feito substituindo um modelo pré-criado ou criando o seu próprio. O WordPress oferece uma enorme flexibilidade e oferece a capacidade de criar seu próprio modelo para qualquer coisa.

Apesar do fato de que criar seu próprio modelo abre uma variedade de possibilidades de design, a maioria dos usuários do WordPress provavelmente fugiria do desafio, pois se preocupam que criar seu próprio modelo personalizado do WordPress seja muito complexo. Nesta série de dois artigos, veremos as duas opções que estão abertas para você. Em primeiro lugar, neste artigo, veremos como você pode codificar manualmente um modelo personalizado do WordPress (que oferece o máximo em flexibilidade) e, em seguida, examinaremos como você pode usar construtores de páginas populares para suportar parte do trabalho pesado necessário ao criar um modelo personalizado do WordPress.

Neste artigo, veremos maneiras de criar modelos personalizados para páginas, postagens e até categorias de postagem. Vamos começar analisando por que você pode querer um modelo personalizado.

Nota: Este artigo pressupõe um conhecimento prático de HTML, CSS e PHP.

Quando você precisa de um modelo WordPress personalizado?

Talvez você ainda não tenha certeza de por que realmente precisa usar um modelo personalizado do WordPress. A maneira mais fácil de explicar isso é com um exemplo.

Vamos imaginar que você tenha um site para o seu negócio. O tema 'Twenty Twenty' está ativado e todas as páginas e posts necessários já estão criados e preenchidos com conteúdo (texto e imagens), um trecho e uma imagem em destaque.

As configurações gerais também são definidas e você fez várias alterações por meio do Personalizador (como cores de link, cor de sobreposição do modelo de capa etc.)

Também foi criado um menu com 5 itens: Homepage – Perfil da Empresa – Serviços – Quem Somos – Fale Conosco

Na seção Serviços há um submenu: Serviço 1 – Serviço 2 – Serviço 3.

Então, da perspectiva de um desenvolvedor do WordPress, você basicamente tem:

• Quatro páginas padrão ( Página inicial – Perfil da empresa – Sobre nós – Fale conosco )
• Uma página de arquivo (Serviços)
• Três páginas de postagem (Serviço 1 – Serviço 2 – Serviço 3)

Por padrão, todas as 3 páginas do Post de Serviço terão o mesmo layout. A única opção que você tem atualmente para diferenciar esses layouts individuais de postagens selecionando um dos três modelos fornecidos por meio da configuração Post Attributes.

Se selecionarmos cada um dos diferentes modelos, veremos que eles se parecem com isso:

Modelo padrão

Modelo de largura total

Modelo de Capa

Se você tiver sorte, um desses estilos funcionará para você e você pode optar por usá-los em seu site. Se não, no entanto, e você se sente frustrado porque certos elementos não parecem 'exatamente como você quer', não se preocupe ...

Vamos começar e ver o que pode ser alcançado com um modelo personalizado.

Como criar manualmente um modelo de postagem personalizado do WordPress

O que faremos no tutorial a seguir é criar uma única visualização de postagem totalmente personalizada e que será especificada dentro de seu próprio arquivo PHP. Também adicionaremos uma opção chamada 'Meu modelo de postagem personalizado' ao menu suspenso de modelos nos atributos de postagem que corresponderão ao layout de postagem personalizado e apresentarão nossa estrutura exclusiva.

Primeiro passo: Apresentando nosso modelo ao WordPress

Para começar, precisamos criar um arquivo PHP chamado algo como: “my-custom-post.php” na pasta raiz do seu tema WordPress (em nosso exemplo, está localizado em /themes/twentytwenty/).

Abra o arquivo com seu editor de texto favorito (como o Sublime) e adicione o conteúdo abaixo:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header();

Esta linha * Template Name: My custom post template define o nome que será exibido no menu suspenso do modelo. Dê uma olhada na captura de tela abaixo e você verá como isso ficaria.

O * Template Post Type: post é opcional e define o tipo de post para o qual o template aparecerá como opção. Como definimos isso como 'post', esse modelo não aparecerá no menu de opções de modelo de uma página, como pode ser visto no exemplo abaixo.

A última linha: get_header(); ?> get_header(); ?> recupera o conteúdo do cabeçalho.

Neste ponto, se você escolher “Meu modelo de postagem personalizado” como um modelo ativo para, digamos, nossa postagem 'Serviço 1', a saída ficará em branco. Isso é o que esperávamos, pois ainda precisamos adicionar qualquer estrutura à página. Você veria algo assim:

Adicionando estrutura ao nosso modelo personalizado do WordPress

Embora seja totalmente possível construir a estrutura para nossa página inteiramente do zero, às vezes pode ser mais fácil pegar a estrutura de postagem existente que está sendo usada em nosso modelo de tema e modificá-la.

Se dermos uma olhada na hierarquia de templates do WordPress podemos ver que, dependendo do tema, o template de post único vem do arquivo singular.php ou single.php localizado dentro da pasta do tema.

Para esclarecer melhor – quando posts e páginas usam a mesma estrutura, o arquivo singular.php é usado, caso contrário (como no popular tema Astra, por exemplo), você verá arquivos single.php, page.php, archive.php que são codificados para fornecer diferentes estruturas para postagens, páginas e layouts de blog, respectivamente.

Neste exemplo, usando o tema Twenty Twenty, podemos ver que o arquivo singular.php usa a função get_template_part para recuperar o layout solicitado da pasta template-parts.

 <main role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content', get_post_type() ); } } ?> </main><!-- #site-content -->

O que o código acima faz inteligentemente é verificar se há conteúdo na postagem e, em caso afirmativo, imprime o conteúdo usando a estrutura especificada pelo modelo selecionado. Isso se aplica em todos os casos, independentemente de uma postagem, página ou arquivo estar sendo usado.

Agora podemos ver como nosso tema está extraindo dados de layout de modelos existentes, agora estamos prontos para começar a construir nosso próprio modelo. Para definir a aparência do nosso modelo, primeiro precisamos projetá-lo. Você pode querer que sua página de postagem seja apresentada no seguinte formato:

Depois de decidir sobre um design de layout, você precisará codificá-lo usando HTML, CSS e PHP. Este artigo pressupõe que você tenha um conhecimento prático desses idiomas e possa criar o layout necessário. Tomando o design acima, escreveríamos algum código inicial que, adicionado ao seu arquivo my-custom-post.php, ficaria assim:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header(); ?> <main class="mcpt-post" role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <h2><?php the_title(); ?></h2> <div> <div><?php the_excerpt(); ?></div> <div><?php the_post_thumbnail(); ?></div> </div> <div> <div> <span class="metakey">Author: </span><?php the_author_posts_link(); ?><br> <span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?><br> <span class="metakey">Category: </span><?php the_category(', '); ?> </div> <div><?php the_content(); ?></div> </div> <?php } } ?> </main><!-- #site-content --> <style> .mcpt-post { width: 80%; margin: 0 auto; } h2 { text-align: center; } div#content-top-left { width: 30%; float: left; font-size: 26px; font-family: book antiqua; font-style: italic; padding: 30px; color: grey; } div#content-top-right { width: 70%; float: left; } div#content-main-left { width: 30%; float: left; padding: 30px; font-family: book antiqua; } div#content-main-right { width: 70%; float: left; padding-top: 30px; font-family: tahoma; color: slategray; } span.metakey { color: grey; } </style> <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> <?php get_footer(); ?>

Existem funções de atalho que nosso tema Twenty Twenty fornece para meta de postagem e outros dados que podemos querer publicar. Em vez de usá-los, usaremos as funções padrão do WordPress para que seu modelo funcione em qualquer tema. Os que trabalharemos são os seguintes:

• the_title() – ecoa o título do post
• the_excerpt() – ecoa o trecho do post
• the_post_thumbnail() – exibe o tamanho padrão da miniatura do post. Você pode usar as opções the_post_thumbnail() para gerar um tamanho de imagem específico em destaque
• the_content() – Gera o conteúdo do post

Se salvarmos nossas atualizações e agora dermos uma olhada na postagem 'Serviço 1', veremos o layout do modelo personalizado aplicado.

Como criar um modelo de categoria de postagem personalizada do WordPress

Agora que vimos como é relativamente fácil criar nosso próprio layout de modelo de postagem, podemos seguir em frente e aplicar princípios semelhantes para criar nosso próprio layout de exibição de categoria.

Uma maneira fácil de fazer isso é editar diretamente o arquivo index.php (localizado em nossa pasta raiz /themes/twentytwenty/). Embora editar esse arquivo diretamente seja bom para fins de tutorial, se o site estiver ativo, convém usar um tema filho para garantir que nenhuma atualização seja substituída na próxima vez que você atualizar seu tema.

Se olharmos para o código index.php, notamos que ele é preenchido principalmente com condições PHP “if” que especificam as saídas disponíveis dependendo do tipo de conteúdo. Por exemplo, o código a seguir verifica se o conteúdo inclui postagens (é uma postagem, página ou arquivo) ou é uma página de resultados de pesquisa e exibe o conteúdo correto de acordo.

 if ( have_posts() ) { . . . } elseif ( is_search() ) { . . . }

Se você está seguindo este tutorial usando o tema Twenty Twenty, encontre o seguinte código em seu arquivo index.php:

 $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

No template-parts/content.php podemos ver que o conteúdo é recuperado usando a função 'get_template_part'.

Em vez de usar essas funções específicas do tema para especificar o layout da nossa página de categoria de postagem, usaremos as funções padrão do WordPress para cada elemento. Isso significa que vamos alterar o código acima para o seguinte:

 while ( have_posts() ) { the_post(); include 'my-custom-category-view.php'; }

Se estiver atento verá que estamos a referenciar um ficheiro chamado my-custom-category-view.php que agora necessitamos de criar e adicionar à pasta do nosso tema (uma abordagem alternativa seria adicionar esta informação directamente ao nosso arquivo index.php , mas tê-lo salvo como um arquivo separado é muito mais organizado.

Crie um arquivo my-custom-category-view.php e adicione o seguinte código:

 <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="intro-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div>

Você verá que conseguimos usar o formato mais avançado da função the_title() para especificar o título do post. O link para a página de postagem única foi gerado usando a função get_permalink().

Para finalizar, agora você precisará adicionar alguns estilos adicionais ao seu arquivo style.css:

 .article { width: 80%; margin: 0 auto; font-family: book antiqua; clear: both; height: 320px; border-bottom: 1px solid darkgrey; } .article:nth-child(odd) .featured-image { float: right; } .featured-image { width: 40%; display: block; padding: 30px; float: left; } .article .content { display: block; padding: 30px; } .post-meta { margin: 0; } .post-meta div { width: 100%; } .article .content h3 { margin: 0; } .article .content h3 a { text-decoration: none; }

Vamos ver o que conseguimos até agora:

Agradável!

Como você pode ver, ainda existem alguns problemas em relação ao ajuste das imagens, pois elas são de proporções diferentes. Podemos corrigir isso facilmente adicionando mais algumas linhas ao nosso CSS para centralizar as imagens e fornecer dimensões fixas:

 .featured-image img { width: 350px; height: 250px; object-fit: cover; }

Dessa forma, é claro, ainda estamos usando as imagens originais que não são necessariamente ótimas do ponto de vista do desempenho. A melhor prática aqui é usar tamanhos de imagem do WordPress. Se você quiser tornar seu novo layout de página responsivo, consulte também este guia abrangente para obter mais informações.

E é isso, muito bem! Agora você conseguiu criar seu próprio layout e design personalizados para a visualização da categoria de postagem.

Como criar um modelo de página personalizada do WordPress

Até agora, criamos um layout personalizado para nossa página de postagens e também um layout personalizado para os resultados da categoria. Você poderá aplicar os métodos usados ​​ao criar um modelo personalizado para páginas, bem como aplicar exatamente os mesmos princípios.

Antes de terminarmos este artigo, porém, vamos dar uma olhada rápida em um modelo de página um pouco mais complexo. Neste exemplo, colocaremos nossas páginas de postagens em nosso modelo para que possamos exibi-las da maneira que elas apareceriam em uma página de categoria, mas com o benefício adicional da capacidade de edição oferecida por uma página (em vez de uma página de categoria) .

Nosso objetivo será criar uma página de visão geral de 'Serviços' que liste nossos três serviços de negócios (neste exemplo, Serviço 1, Serviço 2 e Serviço 3). Em vez de ter que adicioná-los manualmente à nossa página, eles serão puxados dinamicamente para a página. Embora na prática você não precise se preocupar com isso, os princípios de codificação são úteis para entender e demonstrar ainda mais a flexibilidade oferecida pelo WordPress.

Para começar, crie um novo arquivo dentro da pasta do seu tema e nomeie-o como my-services-template.php . Feito isso, adicionaremos alguns comentários de declaração necessários, como fizemos antes com o modelo de postagem única. Também vamos usar a função get_template_part().

 <?php /* * Template Name: My post category template * Template Post Type: page */ get_header(); ?> <div class="clear"></div> </header> <!-- / END HOME SECTION --> <div class="site-content"> <div class="container"> <div class="content-left-wrap col-md-9"> <div class="content-area"> <main class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); // standard WordPress loop. ?> <?php get_template_part( 'template-parts/content', 'cat_services' ); // loading our custom file. ?> <?php endwhile; // end of the loop. ?> </main><!-- #main --> </div><!-- #primary --> </div> <div class="sidebar-wrap col-md-3 content-left-wrap"> <?php get_sidebar(); ?> </div> </div><!-- .container --> <?php get_footer(); ?>

A função get_template_part() é basicamente um mecanismo que nos permite carregar pedaços de código reutilizáveis. Nesse caso, ele pegará o conteúdo de template-parts/content-cat_services.php . É neste arquivo que iremos inserir algum código que irá gerar os posts da categoria 'Serviços'.

Em resumo, o que o código neste arquivo fará é:

• Dê um título à página da categoria.
• Consultar as postagens da categoria especificada no banco de dados.
• Percorra as postagens e exiba um layout para cada uma delas.

 <h1 align="center"><?php the_title(); ?></h1><!-- category page title --> <?php $args = array( 'cat'=>4, 'orderby' => 'title' ); $cat_query = new WP_Query( $args ); //Query the specified category's posts if($cat_query->have_posts()) { while( $cat_query->have_posts() ) { $cat_query->the_post(); //Loop through the posts ?> <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="excerpt-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div> <?php wp_reset_postdata(); } } ?>

Examinaremos as consultas mais detalhadamente em um artigo futuro. O que você precisa saber para os propósitos deste artigo é que $args = array( 'cat'=>4, 'orderby' => 'title' ); está recuperando a categoria de postagem com o número de identificação 4 (ID=4). Este número de categoria está relacionado à nossa categoria de 'Serviços'.

Então, como você pode ver o ID de cada categoria? É bem simples na verdade. Vá para Menu Posts > Categorias e abra qualquer categoria para editar. O ID está no URL da página de edição da categoria, conforme mostrado abaixo:

Para visualizar nosso novo modelo, precisamos ir ao Pages e criar uma nova página. Na área de edição da página, você não precisa inserir nenhum conteúdo. Em vez disso, basta selecionar a opção 'Meu modelo de categoria de postagem' no menu de modelo suspenso Atributos da página.

Por fim, vá ao menu e adicione um item “Serviços” para nossa nova página para substituir o item atual da categoria Serviços. O menu agora deve ficar assim

Vejamos o que fizemos:

O método acima mostra como criar um modelo de página personalizada do WordPress que puxa uma categoria específica (neste exemplo, nossos 'Serviços'). Se você selecionar o mesmo modelo para outra página de categoria, verá novamente as postagens da categoria Serviços, conforme solicitamos especificamente com o ID da categoria (ID = 4). Portanto, se você quisesse um novo modelo de página que pusesse em uma categoria diferente, precisaria criar um arquivo de modelo separado para fazer isso (e atualizar o ID da categoria de acordo).

Conclusão

Ser capaz de criar seu próprio modelo personalizado para o seu site WordPress oferece o máximo controle sobre a aparência do seu site. A criação de modelos personalizados para a visualização única ou de categoria dos seus tipos de postagem vale o esforço. Obviamente, não apenas permite controle total sobre os elementos de design do seu site, mas também permite replicar rapidamente um determinado layout para páginas futuras.

Veja também

• Como criar modelos personalizados do WordPress usando construtores de páginas – um guia