Como criar modelos personalizados de postagem única no WordPress

Você já viu uma página de detalhes de postagem com um layout completamente diferente de outras postagens no mesmo site? Provavelmente porque está usando um modelo personalizado. Você pode atribuir um modelo personalizado a postagens individuais, oferecendo maior flexibilidade sobre a aparência do seu site.

Interessado em aprender como criar um modelo personalizado de postagem única? Neste post, mostrarei como você pode facilmente criar o seu!

O benefício dos modelos personalizados

Antes de começarmos a criar um, vamos explorar por que você pode precisar de um modelo personalizado e o que ele faz.

Se você deseja que uma postagem ou tipo de postagem específico se destaque do restante do seu conteúdo, considere a criação de um modelo de postagem única personalizado. Este modelo será aplicado apenas ao(s) post(ns) ao qual você o atribui, o que significa que pode ter um layout totalmente diferente dos seus posts padrão. Um design e layout exclusivos podem aumentar o envolvimento do usuário para essa postagem específica.

Pronto para desenvolver o seu? Criar e usar um modelo de postagem personalizado é semelhante a um modelo de página personalizado.

Como criar um modelo de postagem personalizado

Usarei o tema Twenty Seventeen para meu exemplo, mas o processo será o mesmo para qualquer tema.

Antes de criar um modelo de postagem personalizado, primeiro criarei um tema filho. Você pode trabalhar no tema principal, mas como está criando um modelo personalizado, se atualizar o tema pai, perderá seu modelo. Por esse motivo, é uma boa prática manter seus modelos personalizados separados do tema principal.

Para um modelo personalizado, você deve definir um nome de modelo (o nome do modelo) e um tipo de postagem de modelo (onde este modelo será usado). Se parece com isso:

 [php]
<?php
/* Nome do modelo: Post de largura total * Tipo de post de modelo: post*/ /*O modelo para exibição de postagens únicas de largura total. */
get_header();
?>
[/php]

Ao salvar o arquivo, mantenha o nome do arquivo relevante para o nome do modelo, como full-width-post.php . Se você visualizar uma postagem no painel de administração, ela mostrará o novo modelo em um menu suspenso da seção Atributos da postagem.

Nosso modelo personalizado está pronto, mas ainda não é útil. Vamos torná-lo um pouco mais benéfico!

Observação: trabalharemos em vários arquivos, portanto, acompanhe os nomes dos arquivos e das pastas.

Aqui está o layout atual das páginas de postagem do blog no tema Twenty Seventeen. Estou feliz com isso, então vamos deixar assim.

Agora, digamos que você queira um layout de largura total para alguns posts. Colocaremos o título do post acima dos metadados. Os metadados devem ter uma borda na parte superior e inferior, e o título e os metadados devem ser alinhados ao centro. Aqui está o wireframe:

Para fazer esse layout, você precisa descobrir qual arquivo é responsável por exibir as páginas de detalhes do post. Na maioria dos temas, single.php é o arquivo, a menos que haja determinados modelos predefinidos. A estrutura do código varia de tema para tema, portanto, pode levar um pouco de aprendizado para entender como seu tema específico funciona.

Depois de encontrar o arquivo que exibe as páginas de detalhes da postagem, você deve descobrir se uma função é usada para chamar outro arquivo ou se o modelo é criado diretamente. Neste exemplo com o tema Twenty Seventeen, é a função get_template_part.

O caminho get_template_part é a parte mais importante a seguir aqui.

 [php]

<div class="wrap">

<div id="principal" class="área de conteúdo">
        	<main id="main" class="site-principal" role="principal">
              	<?php /* Iniciar o Loop */ while ( have_posts() ): the_post(); get_template_part( 'template-parts/post/content', get_post_format() ); // Se os comentários estiverem abertos ou tivermos pelo menos um comentário, carregue o modelo de comentário. if ( comments_open() || get_comments_number() ): comments_template(); fim se; the_post_navigation( array( 'prev_text' => '<span class="screen-reader-text">' . __( 'Postagem anterior', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( ' Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</ span>%title</span>',
                          	'next_text' => '<span class="texto do leitor de tela">' . __('Próximo post', 'vinte e dezessete'). '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Próximo', 'vinte e dezessete' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'ícone' => 'seta para a direita' ) ) . '</span></span>',
                    	) );
              	enquanto isso; // Fim do loop.
              	?>
[/php]

Como você pode ver, está se referindo a um caminho:

 [php]
get_template_part( 'template-parts/post/content', get_post_format()
);
[/php] 

Portanto, o arquivo content.php é chamado dentro single.ph para exibir a página de detalhes do post.

Agora que você sabe como o arquivo single.php está funcionando, vamos copiar o código dele e colá-lo em nosso arquivo full-width-post.php criado anteriormente no tema filho. Como será um modelo de largura total, removeremos a barra lateral.

Agora copie o arquivo content.php do caminho mencionado acima. Você pode colá-lo no mesmo diretório onde está o arquivo de modelo, mas sugiro seguir a mesma estrutura de pastas do tema pai.

Você pode manter o nome do arquivo como está, mas se desejar alterar algo no modelo padrão, isso causará um conflito. Para evitar problemas, sugiro renomear o arquivo e mantê-lo relevante para o nome do modelo, como content-full-width.php .

Os arquivos estão no lugar, então agora vamos modificar o código para trocar o título do post e os metadados do post.

 [php]

<header class="cabeçalho de entrada">
        	<?php

        	if (is_single()) {
              	o título( '

<h1 class="entrada-título">', '</h1>

' );
        	} elseif ( is_front_page() && is_home() ) {
              	o título( '

<h3 class="entry-title"><a href="' . esc_url(get_permalink()). '" rel="marcador">', '</a></h3>

' );
        	} outro {
              	o título( '

<h2 class="entry-title"><a href="' . esc_url(get_permalink()). '" rel="marcador">', '</a></h2>

' );
        	}

        	if ( 'post' === get_post_type() ) {

              	eco'

<div class="entry-meta">';
                    	if (is_single()) {
                    	  	twentyseventeen_posted_on();
                    	} outro {
                          	echo twentyseventeen_time_link();
                          	twentyseventeen_edit_link();
                    	};
              	echo '</div>

<!-- .entry-meta -->';
        	};
        	?>
  	</cabeçalho>

<!-- .entry-header -->
[/php]

Para usar este modelo, edite a postagem desejada no administrador do WordPress e atribua o modelo no menu suspenso.

Se você verificar a postagem no front-end, ainda não está em largura total, mas o título e os metadados trocaram de lugar, então sabemos que a postagem está usando nosso modelo personalizado

Temos que adicionar algum CSS para torná-lo de largura total. O WordPress gera automaticamente uma classe de acordo com o nome do modelo na seção do corpo.

Use essa classe para direcionar esse modelo específico. Você pode adicionar o CSS ao arquivo style.css do tema filho.

 [css]
.post-template-full-width-post.has-sidebar:not(.error404) #primary{
float:nenhum;
largura:automático;
}

.post-template-full-width-post .entry-header{
alinhamento de texto: centro;
margem inferior:1,3em;
}

.post-template-full-width-post .entry-meta{
borda superior:1px sólido #ccc;
border-bottom:1px solid #ccc;
preenchimento: 15px 0;
}
[/css]

Agora temos o layout como queríamos. Qualquer postagem usando este modelo terá exatamente o mesmo estilo.

Você pode criar quantos modelos personalizados quiser para atender às suas necessidades. Você pode até criar modelos com base em categorias de postagem.

Posso usar um plugin para isso?

Se você não se sentir confortável com códigos PHP, então você pode usar alguns plugins, mas devo admitir, existem muito poucos plugins disponíveis para criar modelos de postagem personalizados e a maioria deles não é muito útil porque você tem que criar manualmente o modelo de qualquer maneira.

Achei o plugin Post Custom Templates Lite muito útil. É um plug-in gratuito que permite criar modelos de postagem sem qualquer codificação em uma interface agradável de arrastar e soltar. Ele tem muitas opções de personalização, portanto, se você deseja personalizar um modelo de postagem, em geral, este plug-in pode ajudá-lo.

Nota: A versão gratuita permite apenas que você personalize modelos de postagem normais. Você precisa usar a versão pro para poder criar modelos de postagem personalizados e obter alguns recursos adicionais.

Conclusão

Quer você trabalhe manualmente ou use um plug-in para criar um modelo personalizado de postagem única, ele permite que suas postagens mais importantes se destaquem das demais. Para inspiração, confira o site de Brian Dean; ele usa um modelo específico para suas postagens de guia definitivas para torná-las únicas em relação ao resto de suas postagens.

Então, experimente e crie seu próprio modelo de postagem única! Para obter os melhores resultados para cada site que você criar, escolha a plataforma de hospedagem gerenciada do WP Engine como sua única fonte de hospedagem WordPress!