![\"\"](\"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 Nu n\u00e5gra saker att notera h\u00e4r att jag har lagt till en anpassad klass one-third<\/code>i artikelsektionen och har \u00e4ndrat inneh\u00e5llstypen till excerpt<\/code>f\u00f6r boxvyn, andra strukturella \u00e4ndringar \u00e4r sj\u00e4lvf\u00f6rklarande.\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 S\u00e5 h\u00e4r ser layouten ut.\n <\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-287596-6382d0aedc77e.webp\")
<\/a><\/p>\n\n Endast med CSS
\n <\/h3>\n
\n Om du inte \u00e4r bekv\u00e4m med php-kod \u00e4ven d\u00e5 kan du styla kategorisidorna med endast CSS, men dessa \u00e4ndringar kommer att begr\u00e4nsas p\u00e5 ett s\u00e4tt s\u00e5 att du inte kan l\u00e4gga till eller modifiera koden, du kan bara style de befintliga elementen.\n <\/p>\n
\n L\u00e5t oss se genom ett exempel hur du \u00e4ven med dessa begr\u00e4nsningar kan g\u00f6ra dina kategorisidor unika.\n <\/p>\n
\n L\u00e5t oss s\u00e4ga att vi vill styla v\u00e5r wordpress-kategori utifr\u00e5n detta.\n <\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-287596-6382d0bb17929.webp\")
<\/a><\/p>\n\n till detta.\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>\nNy kod (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>\nH\u00e4r kan du se att jag har tagit bort den <?php get_sidebar(); ?><\/code>eftersom den h\u00e4r mallen inte kommer att ha n\u00e5gra sidof\u00e4lt.<\/p>\n\n Detta kommer att ta bort sidof\u00e4ltet men layouten \u00e4r fortfarande inte full bredd vi m\u00e5ste g\u00f6ra lite CSS-justering. Kom ih\u00e5g att alla CSS-justeringar kommer att g\u00f6ras till CSS-filerna f\u00f6r underordnade teman, inte det \u00f6verordnade temat.\n <\/p>\n
\n WordPress l\u00e4gger till en unik klass till varje kategori med dess kategorinamn i kroppen s\u00e5 h\u00e4r category-photoshop<\/code>kan du rikta in dig p\u00e5 den klassen f\u00f6r att stila sidan.\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 Anv\u00e4nd media query<\/code>helt enkelt f\u00f6r att matcha stilmallen f\u00f6r det \u00f6verordnade temat.\n <\/p>\n\n L\u00e4gger till kategoribeskrivning
\n <\/h5>\n
\n Du kan visa ytterligare en beskrivning av varje kategori genom att l\u00e4gga till beskrivningen i kategorisektionen. Att tillhandah\u00e5lla ytterligare information hj\u00e4lper bes\u00f6karna att b\u00e4ttre f\u00f6rst\u00e5 \u00e4mnet, men du kan g\u00f6ra det h\u00e4r avsnittet mer intressant genom att ge varje kategori ett unikt utseende.\n <\/p>\n
\n Enligt v\u00e5r design beh\u00f6ver vi en anpassad bild p\u00e5 v\u00e4nster sida och kategorinamn med beskrivning p\u00e5 h\u00f6ger sida.\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