![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-287596-6382d0ab8675b.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-287596-6382d0b34bc17.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-287596-6382d0b553c52.webp\")
<\/a><\/p>\n> \u00a0<?php \u00a0if (is_sticky() && is_home() ): \u00a0echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack') );\n \u00a0endif;\n \u00a0?>\n \u00a0<?php if ('' !== get_the_post_thumbnail() &&! is_single() ): ?> \u00a0<\/code>\n \n \u00a0 <a href=\"https:\/\/inform.click%3C\">\u00a0<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?> \u00a0<\/a> \u00a0<\/code>\n <\/div>\n \u00a0<?php endif; ?> \u00a0<\/code>\n \n \u00a0<?php \u00a0if (is_single()) {\n \u00a0the_title( '<h1 class=\"entry-title\">', '' );\n \u00a0} elseif (is_front_page() && is_home()) {\n \u00a0the_title( '<h3 class=\"entry-title\"><a href=\"https:\/\/inform.click'.%20esc_url(%20get_permalink()%20).%20'\" rel=\"bookmark\">', '<\/a><\/h3>' );\n \u00a0} else {\n \u00a0the_title( '<h2 class=\"entry-title\"><a href=\"https:\/\/inform.click'.%20esc_url(%20get_permalink()%20).%20'\" rel=\"bookmark\">', '<\/a><\/h2>' );\n \u00a0}\n \u00a0if ('post' === get_post_type()) {\n \u00a0echo '<div class=\"entry-meta\">';\n \u00a0if (is_single()) {\n \u00a0twentyseventeen_posted_on();\n \u00a0} else {\n \u00a0echo twentyseventeen_time_link();\n \u00a0twentyseventeen_edit_link();\n \u00a0};\n \u00a0echo '<\/div><!-- .entry-meta -->';\n \u00a0};\n \u00a0?>\n \u00a0<\/header><!-- .entry-header -->\n \u00a0\n <div class=\"entry-content\">\n \u00a0<?php \u00a0\/* translators: %s: Name of current post *\/\n \u00a0if (is_single() ): \u00a0the_content( sprintf(\n \u00a0__( 'Continue reading<span class=\"screen-reader-text\"> \"%s\"', 'twentyseventeen' ),\n \u00a0get_the_title()\n \u00a0) );\n \u00a0\n ks29so_link_pages( array(\n \u00a0'before' => '<div class=\"page-links\">'. __( 'Pages:', 'twentyseventeen' ),\n \u00a0'after' => '<\/div>',\n \u00a0'link_before' => '<span class=\"page-number\">',\n \u00a0'link_after' => '<\/span>',\n \u00a0) );\n \u00a0else:\n \u00a0\n the_excerpt( sprintf(\n \u00a0__( 'Continue reading<span class=\"screen-reader-text\"> \"%s\"<\/span>', 'twentyseventeen' ),\n \u00a0get_the_title()\n \u00a0) );\n \u00a0\n ks29so_link_pages( array(\n \u00a0'before' => '<div class=\"page-links\">'. __( 'Pages:', 'twentyseventeen' ),\n \u00a0'after' => '<\/div>',\n \u00a0'link_before' => '<span class=\"page-number\">',\n \u00a0'link_after' => '<\/span>',\n \u00a0) );\n \u00a0endif;\n \u00a0?>\n \u00a0<\/div><!-- .entry-content -->\n \u00a0\n <?php \u00a0if (is_single()) {\n \u00a0twentyseventeen_entry_footer();\n \u00a0}\n \u00a0?> \u00a0<\/code>\n <\/header>\n <\/article><!-- #post-## --><\/code>\n \n Agora, algumas coisas a serem observadas aqui: adicionei uma classe personalizada one-third<\/code>na se\u00e7\u00e3o do artigo e alterei o tipo de conte\u00fado excerpt<\/code>para a exibi\u00e7\u00e3o de caixa, outras altera\u00e7\u00f5es estruturais s\u00e3o autoexplicativas.\n <\/p>\n \n CSS:<\/strong>\n <\/p>\n .category-photoshop main{\n margin:0 -15px;\n}\n.one-third {\n box-sizing: border-box;\n float: left;\n padding: 0 15px;\n width: 33.333%;\n}\n.one-third .post-container {\n border: 1px solid #ccc;\n padding: 10px;\n}\n.one-third .post-thumbnail{\n margin-bottom:0;\n}\n.one-third h2{\n margin-bottom:0.2em;\n}<\/code><\/pre>\n\n Agora \u00e9 assim que o layout se parece.\n <\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-287596-6382d0aedc77e.webp\")
<\/a><\/p>\n\n Somente com CSS
\n <\/h3>\n
\n Se voc\u00ea n\u00e3o estiver confort\u00e1vel com o c\u00f3digo php, voc\u00ea pode estilizar as p\u00e1ginas da categoria apenas com CSS, mas essas altera\u00e7\u00f5es ser\u00e3o limitadas de forma que voc\u00ea n\u00e3o possa adicionar ou modificar o c\u00f3digo, voc\u00ea s\u00f3 pode estilizar os elementos existentes.\n <\/p>\n
\n Vamos ver atrav\u00e9s de exemplos como, mesmo com essas limita\u00e7\u00f5es, voc\u00ea pode tornar suas p\u00e1ginas de categoria \u00fanicas.\n <\/p>\n
\n Digamos que queremos estilizar nossa categoria wordpress a partir disso.\n <\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-287596-6382d0bb17929.webp\")
<\/a><\/p>\n\n para isso.\n <\/p>\n
\n
\u00a0 <?php \u00a0if (have_posts() ): ?> \u00a0<?php \u00a0\/* Start the Loop *\/\n \u00a0while (have_posts() ): the_post();\n \u00a0\n \/*\n \u00a0* Include the Post-Format-specific template for the content.\n \u00a0* If you want to override this in a child theme, then include a file\n \u00a0* called content-___.php (where ___ is the Post Format name) and that will be used instead.\n \u00a0*\/\n \u00a0get_template_part( 'template-parts\/post\/content', get_post_format() );\n \u00a0\n endwhile;\n \u00a0\n the_posts_pagination( array(\n \u00a0'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left') ). '<span class=\"screen-reader-text\">'. __( 'Previous page', 'twentyseventeen' ). '<\/span>',<br \/>\n \u00a0'next_text' => '<span class=\"screen-reader-text\">'. __( 'Next page', 'twentyseventeen' ). '<\/span>'. twentyseventeen_get_svg( array( 'icon' => 'arrow-right') ),<br \/>\n \u00a0'before_page_number' => '<span class=\"meta-nav screen-reader-text\">'. __( 'Page', 'twentyseventeen' ). ' <\/span>',<br \/>\n \u00a0) );<br \/>\n \u00a0<br \/>\n else: \u00a0<br \/>\n get_template_part( 'template-parts\/post\/content', 'none' );<br \/>\n \u00a0<br \/>\n endif; ?><br \/>\n \u00a0<br \/>\n <\/main><!-- #main --><br \/>\n \u00a0<\/div>\n<p><!-- #primary --><br \/>\n \u00a0<?php get_sidebar(); ?><\/code>
\n <\/main>\n <\/div>\n<!-- .wrap --><br \/>\n \u00a0 <?php get_footer();<\/code><\/code><\/p>\nNovo c\u00f3digo (categoria-photoshop.php).<\/p>\n
<?php \/**\n \u00a0* The template for displaying photoshop pages\n \u00a0*\n \u00a0* @link https:\/\/codex.wordpress.org\/Template_Hierarchy\n \u00a0*\n \u00a0* @package WordPress\n \u00a0* @subpackage Twenty_Seventeen\n \u00a0* @since 1.0\n \u00a0* @version 1.0\n \u00a0*\/\n \u00a0\n get_header(); ?> \u00a0<\/code>\n \n \u00a0 <?php if (have_posts() ): ?> \u00a0<\/code>\n \n \u00a0<?php \u00a0the_archive_title( '<h1 class=\"page-title\">', '' );\n \u00a0the_archive_description( '<div class=\"taxonomy-description\">', '<\/div>' );\n \u00a0?>\n \u00a0<\/header><!-- .page-header -->\n \u00a0<?php endif; ?> \u00a0<\/code>\n \n \u00a0<\/code>\n \n \u00a0 <?php \u00a0if (have_posts() ): ?> \u00a0<?php \u00a0\/* Start the Loop *\/\n \u00a0while (have_posts() ): the_post();\n \u00a0\n \/*\n \u00a0* Include the Post-Format-specific template for the content.\n \u00a0* If you want to override this in a child theme, then include a file\n \u00a0* called content-___.php (where ___ is the Post Format name) and that will be used instead.\n \u00a0*\/\n \u00a0get_template_part( 'template-parts\/post\/content', get_post_format() );\n \u00a0\n endwhile;\n \u00a0\n the_posts_pagination( array(\n \u00a0'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left') ). '<span class=\"screen-reader-text\">'. __( 'Previous page', 'twentyseventeen' ). '<\/span>',\n \u00a0'next_text' => '<span class=\"screen-reader-text\">'. __( 'Next page', 'twentyseventeen' ). '<\/span>'. twentyseventeen_get_svg( array( 'icon' => 'arrow-right') ),\n \u00a0'before_page_number' => '<span class=\"meta-nav screen-reader-text\">'. __( 'Page', 'twentyseventeen' ). ' <\/span>',\n \u00a0) );\n \u00a0\n else: \u00a0\n get_template_part( 'template-parts\/post\/content', 'none' );\n \u00a0\n endif; ?>\n \u00a0\n <\/main><!-- #main -->\n \u00a0<\/div><!-- #primary -->\n <\/div><!-- .wrap -->\n \u00a0\n <?php get_footer();<\/code><\/code><\/pre>\nAqui voc\u00ea pode ver que removi <?php get_sidebar(); ?><\/code>porque este modelo n\u00e3o ter\u00e1 barras laterais.<\/p>\n\n Isso remover\u00e1 a barra lateral, mas o layout ainda n\u00e3o est\u00e1 na largura total, temos que fazer alguns ajustes de CSS. Lembre-se de que todos os ajustes de CSS ser\u00e3o feitos nos arquivos CSS dos temas filhos, n\u00e3o no tema pai.\n <\/p>\n
\n O WordPress adiciona uma classe exclusiva a cada categoria com seu nome de categoria no corpo, assim category-photoshop<\/code>voc\u00ea pode direcionar essa classe para estilizar a p\u00e1gina.\n <\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-287596-6382d0b127323.webp\")
<\/a><\/p>\n\n CSS:<\/strong>\n <\/p>\n@media screen and (min-width: 48em) {\n.category-photoshop #primary {\n float: none;\n width: 100%;\n}\n}<\/code><\/pre>\n\n Usando media query<\/code>simplesmente para corresponder \u00e0 folha de estilo do tema pai.\n <\/p>\n\n Adicionando descri\u00e7\u00e3o de categoria
\n <\/h5>\n
\n Voc\u00ea pode mostrar uma descri\u00e7\u00e3o adicional de cada categoria adicionando a descri\u00e7\u00e3o na se\u00e7\u00e3o de categorias. Fornecer informa\u00e7\u00f5es adicionais ajudar\u00e1 os visitantes a entender melhor o t\u00f3pico, mas voc\u00ea pode tornar esta se\u00e7\u00e3o mais interessante dando uma apar\u00eancia \u00fanica para cada categoria.\n <\/p>\n
\n De acordo com nosso design, precisaremos de uma imagem personalizada no lado esquerdo e o nome da categoria com a descri\u00e7\u00e3o no lado direito.\n <\/p>\n
<?php \/**\n\u00a0* The template for displaying photoshop category\n\u00a0*\n\u00a0* @link https:\/\/codex.wordpress.org\/Template_Hierarchy\n\u00a0*\n\u00a0* @package WordPress\n\u00a0* @subpackage Twenty_Seventeen\n\u00a0* @since 1.0\n\u00a0* @version 1.0\n\u00a0*\/\n\u00a0\nget_header(); ?>\n \n<\/code><\/pre>\n\n \u00a0 <?php if (have_posts() ): ?> \u00a0<\/code><\/p>\n\n \u00a0<\/code><\/p>\n\n <img src=\"%3C?php%20echo%20get_stylesheet_directory_uri();%20?%3E\/assets\/images\/photoshop-banner.webp\" alt=\"Photoshop\" \/><\/code>\n <\/div>\n\u00a0<\/code><\/p>\n\n \u00a0<\/code><\/p>\n\n <?php single_term_title()?><\/code>
\n <\/h1>\n\u00a0<?php \u00a0the_archive_description( '\n\n<div class=\"taxonomy-description\">', '<\/div>\n<p>' );<br \/>\n \u00a0?><br \/>\n \u00a0<\/header>\n<\/div>\n<p> \u00a0<!-- .page-header --><br \/>\n \u00a0<?php endif; ?> \u00a0<\/code><\/p>\n\n \u00a0<\/code>
\n
\n \u00a0 <?php \u00a0if (have_posts() ): ?> \u00a0<?php \u00a0\/* Start the Loop *\/\n \u00a0while (have_posts() ): the_post();\n \u00a0\n \/*\n \u00a0* Include the Post-Format-specific template for the content.\n \u00a0* If you want to override this in a child theme, then include a file\n \u00a0* called content-___.php (where ___ is the Post Format name) and that will be used instead.\n \u00a0*\/\n \u00a0get_template_part( 'template-parts\/post\/content-photoshop', get_post_format() );\n \u00a0\n endwhile;\n \u00a0\n the_posts_pagination( array(\n \u00a0'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left') ). '<span class=\"screen-reader-text\">'. __( 'Previous page', 'twentyseventeen' ). '<\/span>',<br \/>\n \u00a0'next_text' => '<span class=\"screen-reader-text\">'. __( 'Next page', 'twentyseventeen' ). '<\/span>'. twentyseventeen_get_svg( array( 'icon' => 'arrow-right') ),<br \/>\n \u00a0'before_page_number' => '<span class=\"meta-nav screen-reader-text\">'. __( 'Page', 'twentyseventeen' ). ' <\/span>',<br \/>\n \u00a0) );<br \/>\n \u00a0<br \/>\n else: \u00a0<br \/>\n get_template_part( 'template-parts\/post\/content-photoshop', 'none' );<br \/>\n \u00a0<br \/>\n endif; ?><br \/>\n \u00a0<br \/>\n <\/main><!-- #main --><br \/>\n \u00a0<\/div>\n<p><!-- #primary --><br \/>\n <!-- .wrap --><br \/>\n \u00a0<br \/>\n <?php get_footer();<\/code><\/code><\/p>\nCSS:<\/strong><\/p>\n.page-header {\n \u00a0border-bottom: 1px solid #ccc;\n \u00a0box-sizing: border-box;\n \u00a0margin-bottom: 1.5em;\n \u00a0padding-bottom: 0.5em;\n }\n .header-category-title {\n \u00a0float: left;\n \u00a0padding-top: 15px;\n \u00a0width: 85%;\n }\n .header-category-img {\n \u00a0float: left;\n \u00a0width: 15%;\n }<\/code><\/pre>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-287596-6382d0c070623.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-287596-6382d0c38733b.webp\")
<\/a><\/p>\n