Como Estilizar Diferentes Categorias Exclusivas no WordPress

O design sempre foi um dos aspectos mais importantes da interface do usuário. Uma boa interface de usuário levará a mais visitantes ao seu site e, eventualmente, mais receita para você.

Existem milhões de sites ativos hoje e você precisa fazer com que seu site seja único o suficiente para se destacar de seus concorrentes.

Quão popular é o WordPress

Existem muitas maneiras de criar seu site, mas a plataforma escolhida para o seu site pode ser um fator importante para determinar quanta personalização você pode fazer. Existem muitas plataformas que você pode escolher, mas o wordpress é um dos CMS mais populares do mundo devido à sua simplicidade e capacidade de personalização. O WordPress pode não ser tão simples quanto o Wix ou o Squarespace, mas seu poder de personalização o torna tão popular.

Qual é o problema de ser tão popular?

O WordPress tem uma comunidade enorme (muito útil) e você pode encontrar soluções para qualquer problema que possa encontrar durante sua jornada no wordpress. A comunidade está repleta de informações e recursos, um dos principais recursos são os temas wordpress. Você pode encontrar milhares de temas gratuitos na biblioteca wordpess.org e os números estão crescendo a cada dia.

Sendo o WordPress tão popular quanto é, há um problema com tanta popularidade de uma maneira diferente, já que um tema pode ser usado muitas vezes em sites diferentes, os sites que usam esse tema específico serão um pouco semelhantes. Portanto, seu site pode não ter exclusividade se você usar o tema como ele é.

Por que você deseja estilizar as categorias de maneira diferente?

Geralmente, em um blog ou site rico em conteúdo, diferentes tópicos são divididos em diferentes categorias. Esta é a página onde um visitante pode obter todas as informações de um determinado tema e que lhe dá a chance de apresentar categorias de uma forma única para proporcionar-lhes uma ótima experiência.

Portanto, estilizar cada categoria de maneira diferente pode dar a você uma vantagem sobre seus concorrentes, mesmo que estejam usando o mesmo tema.

A diferença pode ser tão simples quanto cores diferentes para cada categoria para layouts diferentes.

Vamos ver como você pode fazer isso.

Formas de estilizar categorias

Além dos temas gratuitos, você pode comprar temas premium de diferentes mercados. Geralmente, esses temas são carregados com recursos personalizados, mas mesmo assim a maioria deles não oferece opções para estilizar suas categorias de maneira diferente.

Porque um tema pode ser utilizado de forma diferente de um site para outro, então o autor do tema não sabe como você vai usar o tema.

Portanto, você deve saber como estilizar as categorias de maneira diferente, há duas maneiras de fazer isso.

• Com modelos
• Com CSS

Agora vamos ver cada um com diferentes casos de uso.

Com modelos

Se você deseja fazer uma mudança estrutural no layout, deve usar modelos. Se terá barra lateral ou será página de largura total com modelos, você pode controlar o layout da sua página.

Deve funcionar no tema filho

Um pré-requisito para usar modelos é que você deve usar temas filho. Não é que não funcione no tema principal, mas o problema de modificar o tema principal é que você não pode controlar os arquivos lá, uma vez que o tema for atualizado, todas as suas alterações serão perdidas.

Você pode usar alguns temas premium prontos para o tema filho, mas se estiver usando temas gratuitos que geralmente não incluem nenhum tema filho, você precisa criar um. Depois de ter seu tema filho pronto, agora você pode criar seus modelos de categoria.

Como criar um modelo de categoria

O WordPress funciona em um sistema de templates que segue uma certa ordem hierárquica. Você deve conhecer essa hierarquia de modelos para criar modelos de categoria.

A ordem hierárquica da categoria é.

category-slug.php → category-id.php → category.php → archive.php → index.php

De acordo com a ordem, o wordpress procurará por category-slug.php onde slug significa nome da categoria, suponha que você tenha uma categoria chamada photoshop , então ele procurará por category-photoshop.php primeiro, se esse arquivo não existir, procurará por category-id.php ou seja, ele procurará por qualquer arquivo com o id de categoria, por exemplo category-3.php se esse não estiver disponível, procurará por category.php se este arquivo estiver ausente também, tentará usar o arquivo archive.php como modelo se aquele não encontrado estiver bem, ele finalmente usará index.php como seu modelo base.

Para fazer um modelo de categoria você tem que encontrar o arquivo category.php no seu tema, a maioria dos temas terá o arquivo category.php mas se você não encontrar isso então procure por archive.php .

Observação: em alguns frameworks, você pode não encontrar esses arquivos para os casos em que precisa seguir essa diretriz específica do framework.

Agora, supondo que você esteja trabalhando em um tema filho, copie o arquivo category.php ou archive.php do tema pai e cole-o no mesmo local da pasta do tema filho.

Por exemplo, se você encontrou o arquivo necessário no diretório raiz do tema pai, você deve colocá-lo no diretório raiz do tema filho da mesma forma que se estivesse em uma subpasta, crie uma subpasta com o mesmo nome e cole-a lá.

Agora vamos dizer que você tem uma categoria chamada photoshop , renomeie o novo arquivo no tema filho como este category-photoshop.php e pronto, a categoria photoshop usará este template.

Agora vamos ver através de um exemplo.

Nota: Estaremos usando o tema wordpress vinte dezessete aqui para nossos exemplos, o processo funcionará em qualquer tema, mas a estrutura html será diferente de tema para tema.

Agora criamos um modelo de categoria, vamos fazer alguma personalização.

Veja como fica o modelo atual.

Isto é o que estamos tentando alcançar.

Estrutura básica

O tema Twenty Seventeen tem um layout de duas colunas, mas queremos um layout de coluna única, faremos este modelo com largura total sem barra lateral.

No tema vinte e dezessete não há arquivo category.php , então usamos archive.php como nosso modelo base e o nomeamos como category-photoshop.php .

Código antigo (archive.php).

<?php
/**
 * The template for displaying archive pages
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

<div class="wrap">

<?php if ( have_posts() ) : ?>
 <header class="page-header">
 <?php
 the_archive_title( '<h1 class="page-title">', '</h1>' );
 the_archive_description( '<div class="taxonomy-description">', '</div>' );
 ?>
 </header><!-- .page-header -->
 <?php endif; ?>

<div id="primary" class="content-area">
 <main id="main" class="site-main" role="main">

<?php
 if ( have_posts() ) : ?>
 <?php
 /* Start the Loop */
 while ( have_posts() ) : the_post();

/*
 * Include the Post-Format-specific template for the content.
 * If you want to override this in a child theme, then include a file
 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
 */
 get_template_part( 'template-parts/post/content', get_post_format() );

endwhile;

the_posts_pagination( array(
 'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>',
 'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ),
 'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>',
 ) );

else :

get_template_part( 'template-parts/post/content', 'none' );

endif; ?>

</main><!-- #main -->
 </div><!-- #primary -->
 <?php get_sidebar(); ?>
</div><!-- .wrap -->

<?php get_footer();

Novo código (categoria-photoshop.php).

<?php
/**
 * The template for displaying photoshop pages
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

<div class="wrap">

<?php if ( have_posts() ) : ?>
 <header class="page-header">
 <?php
 the_archive_title( '<h1 class="page-title">', '</h1>' );
 the_archive_description( '<div class="taxonomy-description">', '</div>' );
 ?>
 </header><!-- .page-header -->
 <?php endif; ?>

<div id="primary" class="content-area">
 <main id="main" class="site-main" role="main">

<?php
 if ( have_posts() ) : ?>
 <?php
 /* Start the Loop */
 while ( have_posts() ) : the_post();

/*
 * Include the Post-Format-specific template for the content.
 * If you want to override this in a child theme, then include a file
 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
 */
 get_template_part( 'template-parts/post/content', get_post_format() );

endwhile;

the_posts_pagination( array(
 'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>',
 'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ),
 'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>',
 ) );

else :

get_template_part( 'template-parts/post/content', 'none' );

endif; ?>

</main><!-- #main -->
 </div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();

Aqui você pode ver que eu removi o <?php get_sidebar(); ?> <?php get_sidebar(); ?> porque este modelo não terá barras laterais.

Isso removerá a barra lateral, mas o layout ainda não é de largura total, temos que fazer alguns ajustes de CSS. Lembre-se de que todos os ajustes de CSS serão feitos nos arquivos CSS dos temas filhos e não no tema pai.

O WordPress adiciona uma classe exclusiva a cada categoria com o nome da categoria no corpo, como esta category-photoshop você pode segmentar essa classe para estilizar a página.

CSS:

@media screen and (min-width: 48em) {
.category-photoshop #primary {
 float: none;
 width: 100%;
}
}

Usando a media query simplesmente para corresponder à folha de estilo do tema pai.

Adicionando Descrição da Categoria

Você pode mostrar uma descrição adicional de cada categoria adicionando a descrição na seção de categorias. Fornecer informações adicionais ajudará os visitantes a entender melhor o tópico, mas você pode tornar esta seção mais interessante, dando uma aparência única para cada categoria.

De acordo com nosso design, precisaremos de uma imagem personalizada no lado esquerdo e nome da categoria com descrição no lado direito.

<?php
/**
 * The template for displaying photoshop category
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

<div class="wrap">

<?php if ( have_posts() ) : ?>
 <header class="page-header">
 <div class="header-category-img"><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/photoshop-banner.jpg" alt="Photoshop"></div>
 <div class="header-category-title">
 <h1 class="page-title"><?php single_term_title()?></h1>
 <?php 
 the_archive_description( '<div class="taxonomy-description">', '</div>' );
 ?>
 </div>
 </header><!-- .page-header -->
 <?php endif; ?>

<div id="primary" class="content-area">
 <main id="main" class="site-main" role="main">

<?php
 if ( have_posts() ) : ?>
 <?php
 /* Start the Loop */
 while ( have_posts() ) : the_post();

/*
 * Include the Post-Format-specific template for the content.
 * If you want to override this in a child theme, then include a file
 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
 */
 get_template_part( 'template-parts/post/content-photoshop', get_post_format() );

endwhile;

the_posts_pagination( array(
 'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>',
 'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ),
 'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>',
 ) );

else :

get_template_part( 'template-parts/post/content-photoshop', 'none' );

endif; ?>

</main><!-- #main -->
 </div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();

CSS:

.page-header {
 border-bottom: 1px solid #ccc;
 box-sizing: border-box;
 margin-bottom: 1.5em;
 padding-bottom: 0.5em;
}
.header-category-title {
 float: left;
 padding-top: 15px;
 width: 85%;
}
.header-category-img {
 float: left;
 width: 15%;
}

Você pode ver que fiz algumas alterações na seção page-header , mas a mais importante é single_term_title() porque quero exibir apenas o nome da categoria como este Photoshop em vez de Category:Photoshop .

Se movendo.

Visualização da caixa

Fizemos as mudanças básicas, como fazer um layout de coluna e modificamos a seção de descrição da categoria, agora vamos fazer algo um pouco mais avançado, vamos converter a listagem de postagens da exibição de lista para uma exibição de gird ou caixa com 3 itens por coluna.

Para fazer essas alterações, temos que modificar o caminho get_template_part porque o conteúdo está sendo chamado de um local diferente aqui, mas em algum tema você pode encontrar o conteúdo colocado diretamente no modelo base.

get_template_part( 'template-parts/post/content-photoshop', get_post_format() );

Agora, para modificar essa página de conteúdo, você deve copiar o arquivo do tema pai para o tema filho e colocá-lo na mesma estrutura de pastas e renomeá-lo como desejar.

Aqui eu copiei o arquivo content.php do tema pai e colei como content-photoshop.php no tema filho. Ele foi renomeado porque quaisquer alterações feitas aqui afetarão apenas este modelo.

Código (content-photoshop.php).

<?php
/**
 * Template part for displaying photoshop posts
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.2
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class("one-third"); ?> >
 <?php
 if ( is_sticky() && is_home() ) :
 echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );
 endif;
 ?>
 <?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
 <div class="post-thumbnail">
 <a href="<?php the_permalink(); ?>">
 <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
 </a>
 </div><!-- .post-thumbnail -->
 <?php endif; ?>
 <header class="entry-header1">
 <?php
 if ( is_single() ) {
 the_title( '<h1 class="entry-title">', '</h1>' );
 } elseif ( is_front_page() && is_home() ) {
 the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
 } else {
 the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
 }
 if ( 'post' === get_post_type() ) {
 echo '<div class="entry-meta">';
 if ( is_single() ) {
 twentyseventeen_posted_on();
 } else {
 echo twentyseventeen_time_link();
 twentyseventeen_edit_link();
 };
 echo '</div><!-- .entry-meta -->';
 };
 ?>
 </header><!-- .entry-header -->

<div class="entry-content">
 <?php
 /* translators: %s: Name of current post */
 if ( is_single() ) :
 the_content( sprintf(
 __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
 get_the_title()
 ) );

ks29so_link_pages( array(
 'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
 'after' => '</div>',
 'link_before' => '<span class="page-number">',
 'link_after' => '</span>',
 ) );
 else:

the_excerpt( sprintf(
 __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
 get_the_title()
 ) );

ks29so_link_pages( array(
 'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
 'after' => '</div>',
 'link_before' => '<span class="page-number">',
 'link_after' => '</span>',
 ) );
 endif;
 ?>
 </div><!-- .entry-content -->

<?php
 if ( is_single() ) {
 twentyseventeen_entry_footer();
 }
 ?>

</article><!-- #post-## -->

Agora, algumas coisas a serem observadas aqui que adicionei uma classe personalizada de one-third na seção do artigo e alterei o tipo de conteúdo para excerpt para a exibição de caixa, outras alterações estruturais são autoexplicativas.

CSS:

.category-photoshop main{
 margin:0 -15px; 
}
.one-third {
 box-sizing: border-box;
 float: left;
 padding: 0 15px;
 width: 33.333%;
}
.one-third .post-container {
 border: 1px solid #ccc;
 padding: 10px;
}
.one-third .post-thumbnail{
 margin-bottom:0;
}
.one-third h2{
 margin-bottom:0.2em;
}

Agora é assim que o layout se parece.

Apenas com CSS

Se você não estiver confortável com o código php, mesmo assim, você pode estilizar as páginas de categoria apenas com CSS, mas essas alterações serão limitadas de forma que você não possa adicionar ou modificar o código, você só poderá estilizar os elementos existentes.

Vamos ver através de exemplos como mesmo com essas limitações você pode tornar suas páginas de categoria únicas.

Digamos que queremos estilizar nossa categoria wordpress a partir disso.

para isso.

Estilo básico

Você pode alterar a cor do plano de fundo muito facilmente com CSS, direcionando a classe que o wordpress fornece.

Algo assim.

CSS:

.category-wordpress .site-content-contain {
 background-color:#eaeaea;
}

Adicionando ícone ao título da categoria

Você pode adicionar ícones exclusivos a cada categoria com imagens de fundo, conforme o requisito aqui, adicionaremos um apenas à nossa categoria wordpress.

CSS:

.category-wordpress .page-header {
 border-bottom: 1px solid #ccc;
 margin-bottom: 1.5em;
 padding-bottom: 0.5em;
}
.category-wordpress .page-header h1{
 background:url("assets/images/wordpress-logo.png") no-repeat left center;
 padding-bottom:5px;
 padding-left:35px; 
}

Fazendo página de largura total

Você pode converter duas ou mais páginas de coluna em uma página de largura total pelo menos visualmente por meio de CSS.

CSS:

.category-wordpress:not(.error404) #primary{
 float: none;
 width: 100%;
}

.category-wordpress #secondary{
 display:none; 
}

Eu sei que é um hack de CSS e não é aconselhável como prática recomendada, mas você pode atingir seu objetivo de design dessa maneira, especialmente se não estiver confiante o suficiente para trabalhar com modelos.

Mas se você pode trabalhar com templates então este método de fazer uma página de largura total não é aconselhável como um atalho porque tudo o que você está fazendo é escondê-la de mostrar no navegador enquanto ela permanece no DOM.

Conclusão

Como você pode ver, você pode fazer muito para estilizar diferentes categorias e os exemplos mencionados acima são apenas um ponto de partida, mas as possibilidades dependem da sua capacidade de trabalhar com modelos e CSS. Dependendo do seu nível de habilidade, você pode escolher como deseja estilizar suas categorias.

Então, você conhece outras maneiras de estilizar diferentes categorias de maneira diferente, deixe-nos saber na seção de comentários abaixo.