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

Новий код (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(); 
Тут ви бачите, що я видалив, <?php get_sidebar(); ?>оскільки цей шаблон не матиме бічних панелей.
 

              Це видалить бічну панель, але макет все ще не на всю ширину, нам потрібно зробити деякі налаштування CSS. Пам'ятайте, що всі коригування CSS буде внесено до файлів CSS дочірніх тем, а не до батьківської теми.
            
 

              WordPress додає унікальний клас до кожної категорії з назвою категорії в тілі, як це category-photoshopви можете націлити на цей клас, щоб стилізувати сторінку.
            
 
 
 CSS: 
 
@media screen and (min-width: 48em) {
.category-photoshop #primary {
 float: none;
 width: 100%;
}
}
 

              Використання media queryпросто для відповідності таблиці стилів батьківської теми.
            
 

              Додавання опису категорії

            
 

              Ви можете показати додатковий опис кожної категорії, додавши опис у розділ категорій. Надання додаткової інформації допоможе відвідувачам краще зрозуміти тему, але ви можете зробити цей розділ цікавішим, надавши унікальний вигляд кожній категорії.
            
 

              Згідно з нашим дизайном, нам знадобиться спеціальне зображення ліворуч і назва категорії з описом праворуч.
            
 
<?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%;
                      }
 
 
 
Ви бачите, що я зробив чимало змін у page-headerрозділі, але найважливішою є те, single_term_title()що я хочу відображати лише назву категорії, як цей Photoshop, а не Category:Photoshop.
 
Жити далі.
 
Перегляд коробки
 
Ми внесли основні зміни, як-от створення макета одного стовпця, і змінили розділ опису категорії, а тепер давайте зробимо щось більш просунуте, ми перетворимо список публікацій зі списку на режим смуги або коробки з 3 елементами на стовпець.
 
Щоб внести ці зміни, нам потрібно змінити get_template_partшлях, оскільки тут вміст викликається з іншого місця, але в деяких темах вміст розміщено безпосередньо в базовому шаблоні.
 
get_template_part( 'template-parts/post/content-photoshop', get_post_format() );
 
Тепер, щоб змінити цю сторінку вмісту, вам потрібно скопіювати файл із батьківської теми до дочірньої теми та помістити його в ту саму структуру папок, а потім перейменувати на свій розсуд.
 
Тут я скопіював content.phpфайл із батьківської теми та вставив його як content-photoshop.phpу дочірню тему. Він перейменований, оскільки будь-які зміни, внесені тут, стосуватимуться лише цього шаблону.
 
 
 
Код (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-thirdу розділі статей користувальницький клас і змінив тип вмісту на excerptдля вікна, інші структурні зміни не пояснюються.
                      
 
 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;
}
 

                        Ось як макет виглядає.
                      
 
 

                        Тільки з CSS

                      
 

                        Якщо ви не вмієте працювати з PHP-кодом, ви можете стилізувати сторінки категорій лише за допомогою CSS, але ці зміни будуть обмежені таким чином, що ви не зможете додавати або змінювати код, ви можете лише стилізувати існуючі елементи.
                      
 

                        Давайте на прикладах розглянемо, як навіть із цими обмеженнями ви можете зробити свої сторінки категорій унікальними.
                      
 

                        Скажімо, ми хочемо створити стиль нашої категорії WordPress з цього.
                      
 
 

                        до цього.
                      
 
 

                        Основний стиль

                      
 

                        Ви можете легко змінити колір фону за допомогою CSS, націлившись на клас, який надає WordPress.
                      
 

                        Щось на зразок цього.
                      
 
 CSS: 
 
.category-wordpress .site-content-contain {
 background-color:#eaeaea;
}
 

                        Додавання значка до назви категорії

                      
 

                        Ви можете додати унікальні значки до кожної категорії з фоновими зображеннями, відповідно до вимог тут ми додамо один лише до нашої категорії WordPress.
                      
 
 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;
}
 

                        Створення сторінки на всю ширину

                      
 

                        Ви можете перетворити сторінку з двома або більше стовпцями на сторінку повної ширини принаймні візуально за допомогою CSS.
                      
 
 CSS: 
 
.category-wordpress:not(.error404) #primary{
 float: none;
 width: 100%;
}
 
.category-wordpress #secondary{
 display:none;
}
 

                        Я знаю, що це хак CSS і не рекомендується як найкраща практика, але ви можете досягти своєї мети дизайну таким чином, особливо якщо ви недостатньо впевнені в роботі з шаблонами.
                      
 
 

                        Але якщо ви можете працювати з шаблонами, тоді цей метод створення сторінки повної ширини не рекомендується як ярлик, оскільки все, що ви робите, це приховування її від показу в браузері, поки вона залишається в DOM.
                      
 

                        Висновок

                      
 

                        Як бачите, ви можете зробити багато для стилізації різних категорій, і наведені вище приклади є лише відправною точкою, але можливості залежать від вашого вміння працювати з шаблонами та CSS. Залежно від рівня ваших навичок ви можете вибрати спосіб стилізації категорій.
                      
 

                        Отже, чи знаєте ви інші способи стилізації різних категорій по-різному, повідомте нам у розділі коментарів нижче.
                      
 

                        Джерело запису: instantshift.com