![\"\"](\"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 Ora poche cose da notare qui che ho aggiunto una classe personalizzata one-third<\/code>nella sezione dell'articolo e ho cambiato il tipo di contenuto excerpt<\/code>per la visualizzazione della scatola, altre modifiche strutturali sono autoesplicative.\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 Ora ecco come appare il layout.\n <\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-287596-6382d0aedc77e.webp\")
<\/a><\/p>\n\n Solo con CSS
\n <\/h3>\n
\n Se non ti senti a tuo agio con il codice php anche allora puoi modellare le pagine delle categorie solo con CSS, ma queste modifiche saranno limitate in un modo che non puoi aggiungere o modificare il codice, puoi solo modellare gli elementi esistenti.\n <\/p>\n
\n Vediamo attraverso un esempio come anche con queste limitazioni puoi rendere uniche le tue pagine di categoria.\n <\/p>\n
\n Diciamo che vogliamo modellare la nostra categoria wordpress da questo.\n <\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-287596-6382d0bb17929.webp\")
<\/a><\/p>\n\n a questo.\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>\nNuovo codice (category-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>\nQui puoi vedere che ho rimosso <?php get_sidebar(); ?><\/code>perch\u00e9 questo modello non avr\u00e0 barre laterali.<\/p>\n\n Questo rimuover\u00e0 la barra laterale ma il layout non \u00e8 ancora a tutta larghezza, dobbiamo apportare alcune modifiche CSS. Ricorda che tutte le modifiche CSS verranno apportate ai file CSS dei temi figlio e non al tema principale.\n <\/p>\n
\n WordPress aggiunge una classe univoca a ciascuna categoria con il suo nome di categoria nel corpo in questo modo category-photoshop<\/code>puoi scegliere come target quella classe per modellare la pagina.\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>semplicemente per abbinare il foglio di stile del tema principale.\n <\/p>\n\n Aggiunta della descrizione della categoria
\n <\/h5>\n
\n Puoi mostrare una descrizione aggiuntiva di ciascuna categoria aggiungendo la descrizione nella sezione delle categorie. Fornire informazioni aggiuntive aiuter\u00e0 i visitatori a comprendere meglio l'argomento, ma puoi rendere questa sezione pi\u00f9 interessante dando un aspetto unico a ciascuna categoria.\n <\/p>\n
\n In base al nostro design, avremo bisogno di un'immagine personalizzata sul lato sinistro e del nome della categoria con la descrizione sul lato destro.\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