<!-- .wrap --><br />   <?php get_footer();

Neuer Code (category-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(); ?>   
   <?php if (have_posts() ): ?>   
  <?php  the_archive_title( '<h1 class="page-title">', '' );
         the_archive_description( '<div class="taxonomy-description">', '</div>' );
         ?>
         </header><!-- .page-header -->
         <?php endif; ?>   
   
   <?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(); 
Hier sehen Sie, dass ich die entfernt habe, <?php get_sidebar(); ?>da diese Vorlage keine Seitenleisten haben wird.
 

              Dadurch wird die Seitenleiste entfernt, aber das Layout ist immer noch nicht in voller Breite. Wir müssen einige CSS-Anpassungen vornehmen. Denken Sie daran, dass alle CSS-Anpassungen an den CSS-Dateien des untergeordneten Designs und nicht am übergeordneten Design vorgenommen werden.
            
 

              WordPress fügt jeder Kategorie eine eindeutige Klasse mit ihrem Kategorienamen im Hauptteil hinzu. So category-photoshopkönnen Sie diese Klasse als Ziel für die Gestaltung der Seite verwenden.
            
 
 
 CSS: 
 
@media screen and (min-width: 48em) {
.category-photoshop #primary {
 float: none;
 width: 100%;
}
}
 

              Verwenden des media queryStylesheets zum einfachen Anpassen des übergeordneten Designs.
            
 

              Kategoriebeschreibung hinzufügen

            
 

              Sie können eine zusätzliche Beschreibung jeder Kategorie anzeigen, indem Sie die Beschreibung im Abschnitt „Kategorien“ hinzufügen. Die Bereitstellung zusätzlicher Informationen hilft den Besuchern, das Thema besser zu verstehen, aber Sie können diesen Abschnitt interessanter gestalten, indem Sie jeder Kategorie ein einzigartiges Aussehen verleihen.
            
 

              Gemäß unserem Design benötigen wir ein benutzerdefiniertes Bild auf der linken Seite und einen Kategorienamen mit Beschreibung auf der rechten Seite.
            
 
<?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(); ?>
 
 
   <?php if (have_posts() ): ?>   
   
 <img src="%3C?php%20echo%20get_stylesheet_directory_uri();%20?%3E/assets/images/photoshop-banner.webp" alt="Photoshop" /> 
 
 
 
   

                    <?php single_term_title()?>

                  
 
 <?php  the_archive_description( '

<div class="taxonomy-description">', '</div>
<p>' );<br />
                   ?><br />
                   </header>
</div>
<p>                   <!-- .page-header --><br />
                   <?php endif; ?>  
 
  
 

   <?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>',<br />
                       'next_text' => '<span class="screen-reader-text">'. __( 'Next page', 'twentyseventeen' ). '</span>'. twentyseventeen_get_svg( array( 'icon' => 'arrow-right') ),<br />
                       'before_page_number' => '<span class="meta-nav screen-reader-text">'. __( 'Page', 'twentyseventeen' ). ' </span>',<br />
                       ) );<br />
                       <br />
                      else:  <br />
                      get_template_part( 'template-parts/post/content-photoshop', 'none' );<br />
                       <br />
                      endif; ?><br />
                       <br />
                      </main><!-- #main --><br />
                       </div>
<p><!-- #primary --><br />
                      <!-- .wrap --><br />
                       <br />
                      <?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%;
                      }
 
 
 
Sie können sehen, dass ich einige Änderungen in diesem page-headerAbschnitt vorgenommen habe, aber die wichtigste ist, single_term_title()dass ich nur Kategorienamen wie dieses Photoshop anstelle von Kategorie: Photoshop anzeigen möchte.
 
Weiter gehts.
 
Box-Ansicht
 
Wir haben die grundlegenden Änderungen vorgenommen, wie z. B. das Erstellen eines einspaltigen Layouts, und den Abschnitt mit der Kategoriebeschreibung geändert. Lassen Sie uns nun etwas Fortgeschritteneres tun. Wir konvertieren die Beitragsliste von der Listenansicht in eine Gitter- oder Kastenansicht mit 3 Elementen pro Spalte.
 
Um diese Änderungen vorzunehmen, müssen wir get_template_partden Pfad ändern, da der Inhalt hier von einem anderen Ort aufgerufen wird, aber in einigen Themen finden Sie möglicherweise, dass der Inhalt direkt in der Basisvorlage platziert wird.
 
get_template_part( 'template-parts/post/content-photoshop', get_post_format() );
 
Um diese Inhaltsseite jetzt zu ändern, müssen Sie die Datei vom übergeordneten Thema zum untergeordneten Thema kopieren und in derselben Ordnerstruktur ablegen und dann nach Belieben umbenennen.
 
Hier habe ich die content.phpDatei aus dem Parent-Theme kopiert und wie im Child-Theme eingefügt content-photoshop.php. Es wird umbenannt, da alle Änderungen, die hier vorgenommen werden, nur diese Vorlage betreffen.
 
 
 
Code (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
                       */
                       
                      ?>   
 >  <?php  if (is_sticky() && is_home() ):  echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack') );
                         endif;
                         ?>
                         <?php if ('' !== get_the_post_thumbnail() &&! is_single() ): ?>   
   <a href="https://inform.click%3C"> <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>  </a>   
  <?php endif; ?>   
  <?php  if (is_single()) {
                           the_title( '<h1 class="entry-title">', '' );
                           } elseif (is_front_page() && is_home()) {
                           the_title( '<h3 class="entry-title"><a href="https://inform.click'.%20esc_url(%20get_permalink()%20).%20'" rel="bookmark">', '</a></h3>' );
                           } else {
                           the_title( '<h2 class="entry-title"><a href="https://inform.click'.%20esc_url(%20get_permalink()%20).%20'" 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"', '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();
                           }
                           ?>   
 
<!-- #post-## --> 
 one-thirdHier sind nun einige Dinge zu beachten, dass ich eine benutzerdefinierte Klasse im Artikelbereich hinzugefügt und den Inhaltstyp excerptfür die Boxansicht geändert habe, andere strukturelle Änderungen sind selbsterklärend.
                      
 
 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;
}
 

                        So sieht nun das Layout aus.
                      
 
 

                        Nur mit CSS

                      
 

                        Wenn Sie mit PHP-Code nicht vertraut sind, können Sie die Kategorieseiten auch nur mit CSS gestalten, aber diese Änderungen sind so begrenzt, dass Sie den Code nicht hinzufügen oder ändern können, Sie können nur die vorhandenen Elemente gestalten.
                      
 

                        Sehen wir uns anhand eines Beispiels an, wie Sie selbst mit diesen Einschränkungen Ihre Kategorieseiten einzigartig machen können.
                      
 

                        Nehmen wir an, wir möchten unsere WordPress-Kategorie daraus gestalten.
                      
 
 

                        dazu.
                      
 
 

                        Basis-Styling

                      
 

                        Sie können die Hintergrundfarbe sehr einfach mit CSS ändern, indem Sie auf die von WordPress bereitgestellte Klasse abzielen.
                      
 

                        Etwas wie das.
                      
 
 CSS: 
 
.category-wordpress .site-content-contain {
 background-color:#eaeaea;
}
 

                        Symbol zum Kategorietitel hinzufügen

                      
 

                        Sie können jeder Kategorie eindeutige Symbole mit Hintergrundbildern hinzufügen, je nach Anforderung werden wir hier nur eines zu unserer WordPress-Kategorie hinzufügen.
                      
 
 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.webp") no-repeat left center;
 padding-bottom:5px;
 padding-left:35px;
}
 

                        Seite in voller Breite erstellen

                      
 

                        Sie können zwei- oder mehrspaltige Seiten zumindest visuell durch CSS in eine Seite mit voller Breite umwandeln.
                      
 
 CSS: 
 
.category-wordpress:not(.error404) #primary{
 float: none;
 width: 100%;
}
 
.category-wordpress #secondary{
 display:none;
}
 

                        Ich weiß, es ist ein CSS-Hack und nicht als Best Practice zu empfehlen, aber Sie können Ihr Designziel auf diese Weise erreichen, insbesondere wenn Sie sich im Umgang mit Vorlagen nicht sicher genug fühlen.
                      
 
 

                        Wenn Sie jedoch mit Vorlagen arbeiten können, ist diese Methode zum Erstellen einer Seite in voller Breite als Abkürzung nicht ratsam, da Sie sie lediglich vor der Anzeige im Browser verbergen, während sie im DOM verbleibt.
                      
 

                        Fazit

                      
 

                        Wie Sie sehen können, können Sie viel tun, um verschiedene Kategorien zu stylen, und die oben genannten Beispiele sind nur ein Ausgangspunkt, aber die Möglichkeiten hängen von Ihrer Fähigkeit ab, mit Vorlagen und CSS zu arbeiten. Abhängig von Ihrem Können können Sie wählen, wie Sie Ihre Kategorien gestalten möchten.
                      
 

                        Kennen Sie also andere Möglichkeiten, verschiedene Kategorien anders zu gestalten, lassen Sie es uns im Kommentarbereich unten wissen.
                      
 

                        Aufnahmequelle: instantshift.com