![\"\"](\"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 N\u00e5 er det noen ting \u00e5 merke seg her at jeg har lagt til en egendefinert klasse one-third<\/code>i artikkeldelen og har endret innholdstypen til excerpt<\/code>for boksvisningen, andre strukturelle endringer er selvforklarende.\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 Slik ser oppsettet ut n\u00e5.\n <\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-287596-6382d0aedc77e.webp\")
<\/a><\/p>\n\n Kun med CSS
\n <\/h3>\n
\n Hvis du ikke er komfortabel med php-kode selv da kan du style kategorisidene kun med CSS, men disse endringene vil v\u00e6re begrenset p\u00e5 en m\u00e5te som gj\u00f8r at du ikke kan legge til eller endre koden, du kan bare style de eksisterende elementene.\n <\/p>\n
\n La oss se gjennom et eksempel p\u00e5 hvordan du selv med disse begrensningene kan gj\u00f8re kategorisidene dine unike.\n <\/p>\n
\n La oss si at vi \u00f8nsker \u00e5 style v\u00e5r wordpress-kategori fra dette.\n <\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-287596-6382d0bb17929.webp\")
<\/a><\/p>\n\n til dette.\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 kode (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>\nHer kan du se at jeg har fjernet <?php get_sidebar(); ?><\/code>fordi denne malen ikke vil ha noen sidefelt.<\/p>\n\n Dette vil fjerne sidefeltet, men oppsettet er fortsatt ikke i full bredde, vi m\u00e5 gj\u00f8re noen CSS-justeringer. Husk at alle CSS-justeringer vil bli gjort til CSS-filer for undertemaer, ikke overordnet tema.\n <\/p>\n
\n WordPress legger til en unik klasse til hver kategori med kategorinavnet i br\u00f8dteksten slik at category-photoshop<\/code>du kan m\u00e5lrette den klassen for \u00e5 style siden.\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 Bruker media query<\/code>ganske enkelt for \u00e5 matche stilarket for overordnet tema.\n <\/p>\n\n Legger til kategoribeskrivelse
\n <\/h5>\n
\n Du kan vise en ekstra beskrivelse av hver kategori ved \u00e5 legge til beskrivelsen i kategoriseksjonen. \u00c5 gi tilleggsinformasjon vil hjelpe bes\u00f8kende bedre \u00e5 forst\u00e5 emnet, men du kan gj\u00f8re denne delen mer interessant ved \u00e5 gi et unikt utseende for hver kategori.\n <\/p>\n
\n I henhold til v\u00e5rt design trenger vi et tilpasset bilde p\u00e5 venstre side og kategorinavn med beskrivelse p\u00e5 h\u00f8yre side.\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