ธีมหน้าร้าน WooCommerce สร้างเทมเพลตหลายหมวดหมู่

เป็นเรื่องปกติในร้านค้าออนไลน์หลายแห่งที่จะใช้เทมเพลตต่างๆ สำหรับหมวดหมู่ แท็ก ประเภทโพสต์ที่กำหนดเอง และการจัดหมวดหมู่ หากคุณใช้เทมเพลตที่แตกต่างกันสำหรับหมวดหมู่ คุณสามารถเพิ่มคุณสมบัติเฉพาะในหน้าหมวดหมู่ได้ ตัวอย่างเช่น คุณสามารถเพิ่มรูปภาพหมวดหมู่ แสดงคำอธิบายหมวดหมู่ อนุญาตให้ผู้ใช้สมัครรับหมวดหมู่ และเลือกเลย์เอาต์ที่แตกต่างกันสำหรับแต่ละหมวดหมู่

ธีมหน้าร้าน WooCommerce สร้างเทมเพลตหลายหมวดหมู่

ในบทช่วยสอนสั้นๆ นี้ ฉันจะแสดงวิธีสร้างเทมเพลตหมวดหมู่ในร้านค้า WooCommerce ของคุณ

ลำดับชั้นเทมเพลตสำหรับหน้าหมวดหมู่

WordPress มีระบบเทมเพลตที่มีประสิทธิภาพที่ช่วยให้คุณสามารถสร้างธีมได้โดยใช้เทมเพลตต่างๆ สำหรับส่วนต่างๆ ของเว็บไซต์ เมื่อแสดงหน้าใดๆ WordPress จะค้นหาเทมเพลตในลำดับชั้นที่กำหนดไว้ล่วงหน้า ตัวอย่างเช่น ในการแสดงหน้าประเภท หน้าจะค้นหาเทมเพลตในลำดับต่อไปนี้:

category-slug.php > category-id.php > category.php > archive.php > index.php

เทมเพลตแรกที่จะค้นหาคือเทมเพลตเฉพาะสำหรับหมวดหมู่นั้นโดยใช้กระสุนหมวดหมู่ เทมเพลต category-design.php จะใช้เพื่อแสดงหมวดหมู่ 'การออกแบบ' อย่างไรก็ตาม หากไม่พบเทมเพลตประเภททาก WordPress จะค้นหาเทมเพลต ID หมวดหมู่

จากนั้นจะค้นหาเทมเพลตหมวดหมู่ทั่วไป ซึ่งมักจะเป็นหมวดหมู่.php อย่างไรก็ตาม หากไม่มีเทมเพลตหมวดหมู่ทั่วไป WordPress จะค้นหาเทมเพลตทั่วไป

หลังจากนั้นจะใช้เทมเพลต index.php เพื่อแสดงหมวดหมู่

วิธีสร้างเทมเพลตหมวดหมู่

เทมเพลต category.php ทั่วไปมีลักษณะดังนี้:

 <?php

/**

* เทมเพลตหมวดหมู่อย่างง่าย

*/

 get_header(); ?>

 <section id="primary" class="site-content">

<div id="content" role="main">

 <?php

// ตรวจสอบว่ามีโพสต์ใด ๆ ที่จะแสดง

if ( have_posts() ) : ?>

 <header class="archive-header">

<h1 class="archive-title">หมวดหมู่: <?php single_cat_title( '', false ); ?></h1>

 <?php

// แสดงคำอธิบายหมวดหมู่เพิ่มเติม

 ถ้า ( category_description() ) : ?>

<div class="archive-meta"><?php echo category_description(); ?></div>

<?php endif; ?>

</header>

 <?php

 // เดอะลูป

ในขณะที่ ( have_posts() ) : the_post(); ?>

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="ลิงก์ถาวรไปยัง <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<small><?php the_time('F jS, Y') ?> โดย <?php the_author_posts_link() ?></small>

 <div class="entry">

<?php the_content(); ?>

  <p class="postmetadata"><?php

  comments_popup_link( 'ยังไม่มีความคิดเห็น', '1 ความคิดเห็น', '% ความคิดเห็น', 'ลิงก์ความคิดเห็น', 'ความคิดเห็นที่ปิดแล้ว');

?></p>

</div>

 <?php เมื่อสิ้นสุด;

 อื่นๆ: ?>

<p>ขออภัย ไม่มีบทความที่ตรงกับเกณฑ์ของคุณ</p>

 <?php endif; ?>

</div>

</section>

 <?php get_sidebar(); ?>

<?php get_footer(); ?>

สมมติว่าคุณมีหมวดหมู่ที่เรียกว่า "เสื้อผ้าที่มีสไตล์" โดยมีหมวดหมู่เป็น "มีระดับ" และคุณต้องการแสดงหมวดหมู่นี้แตกต่างจากหมวดหมู่อื่น ผลลัพธ์นี้สามารถทำได้โดยการสร้างเทมเพลตสำหรับหมวดหมู่นั้น ๆ

เมื่อต้องการทำเช่นนี้ ไปที่ ลักษณะที่ ปรากฏ > ตัวแก้ไข คุณจะเห็นไฟล์ธีมบางไฟล์ทางด้านขวาของคุณ คลิกที่ไฟล์ archive.php หากไม่มี ให้มองหา category.php อย่างไรก็ตาม หากคุณใช้ธีมหน้าร้าน คุณจะพบไฟล์ archive.php

คัดลอกเนื้อหาทั้งหมดของไฟล์ archive.php แล้ววางลงในโปรแกรมแก้ไขข้อความ เช่น Notepad บันทึกไฟล์นี้เป็น category-design.php

ขั้นตอนต่อไปคือไปที่ wp-content > Themes > Storefront theme อัปโหลดไฟล์ category-design.php ไปยังไดเร็กทอรีธีมของคุณ

เป็นมูลค่าการกล่าวขวัญว่าการเปลี่ยนแปลงใดๆ ที่คุณทำกับเทมเพลตนี้จะปรากฏเฉพาะในหน้าเก็บถาวรของหมวดหมู่นี้เท่านั้น คุณสามารถใช้เทคนิคนี้เพื่อสร้างเทมเพลตสำหรับหมวดหมู่ต่างๆ ได้มากเท่าที่คุณต้องการ คุณเพียงแค่ต้องใช้ category-{category-slug}.php เป็นชื่อไฟล์ พบประเภททากในส่วนหมวดหมู่ในพื้นที่ผู้ดูแลระบบ WordPress

นี่เป็นอีกตัวอย่างหนึ่งของเทมเพลต category-slug.php เหมือนกับเทมเพลต category.php โดยมีการเปลี่ยนแปลงเล็กน้อย:

 <?php

/**

* เทมเพลตหมวดหมู่อย่างง่าย

*/

get_header(); ?>

<section id="primary" class="site-content">

<div id="content" role="main">

<?php

// ตรวจสอบว่ามีโพสต์ใด ๆ ที่จะแสดง

if ( have_posts() ) : ?>

<header class="archive-header">

<?php

// เนื่องจากเทมเพลตนี้จะใช้สำหรับหมวดการออกแบบเท่านั้น

// เราสามารถเพิ่มชื่อหมวดหมู่และคำอธิบายได้ด้วยตนเอง

// หรือแม้แต่เพิ่มรูปภาพหรือเปลี่ยนเลย์เอาต์

?>

<h1 class="archive-title">บทความเกี่ยวกับการออกแบบ</h1>

<div class="archive-meta">

บทความและแบบฝึกหัดเกี่ยวกับการออกแบบและเว็บ

</div>

</header>

<?php

// เดอะลูป

ในขณะที่ ( have_posts() ) : the_post();

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="ลิงก์ถาวรไปยัง <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<small><?php the_time('F jS, Y') ?> โดย <?php the_author_posts_link() ?></small>

<div class="entry">

<?php the_excerpt(); ?>

<p class="postmetadata"><?php

comments_popup_link( 'ยังไม่มีความคิดเห็น', '1 ความคิดเห็น', '% ความคิดเห็น', 'ลิงก์ความคิดเห็น', 'ความคิดเห็นที่ปิดแล้ว');

?></p>

</div>

<?php เมื่อสิ้นสุด; // สิ้นสุดวง

อื่นๆ: ?>

<p>ขออภัย ไม่มีบทความที่ตรงกับเกณฑ์ของคุณ</p>

<?php endif; ?>

</div>

</section>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

อย่างไรก็ตาม หากคุณไม่ต้องการใช้เทมเพลต category-slug คุณสามารถใช้เทมเพลต category-id เพื่อสร้างเทมเพลตสำหรับ ID หมวดหมู่เฉพาะได้

วิธีใช้แท็กแบบมีเงื่อนไขสำหรับหมวดหมู่

เมื่อคุณสร้างเทมเพลตสำหรับธีมของคุณ คุณต้องแน่ใจว่าคุณต้องการเทมเพลตเพิ่มเติมหรือไม่ เนื่องจากในบางกรณีที่คุณต้องการสร้างนั้นไม่ซับซ้อนเกินไป และสามารถทำได้โดยใช้แท็กแบบมีเงื่อนไขภายในเทมเพลตทั่วไป

WordPress รองรับแท็กแบบมีเงื่อนไขมากมาย หนึ่งในนั้นคือแท็กเงื่อนไข is_category() คุณสามารถใช้เพื่อเปลี่ยนเทมเพลตของคุณเพื่อแสดงผลลัพธ์ที่แตกต่างกันหากเงื่อนไขตรงกัน ตัวอย่างเช่น คุณอาจต้องการแสดงข้อมูลเพิ่มเติมในหน้าเก็บหมวดหมู่สำหรับหมวดหมู่ ในการดำเนินการนี้ เพียงเพิ่มโค้ดนี้ในไฟล์ category.php ต่อจาก <?php if ( have_posts() ) : ?>

 <header class="archive-header">

<?php if(is_category( 'Featured' )) : ?>

<h1 class="archive-title">บทความเด่น:</h1>

<?php อื่น: ?>

<h1 class="archive-title">ที่เก็บหมวดหมู่: <?php single_cat_title(); ?> </h1>

<?php endif; ?>

</header>

บทสรุป

ในโพสต์นี้ ฉันได้เน้นว่าคุณสามารถใช้เทมเพลตต่างๆ สำหรับหมวดหมู่ แท็ก ประเภทโพสต์ที่กำหนดเอง และการจัดหมวดหมู่ได้ นอกจากนี้ ฉันได้แชร์ลำดับชั้นของเทมเพลตที่ใช้ใน WordPress สำหรับหน้าหมวดหมู่

นอกจากนี้ ฉันได้แสดงให้คุณเห็นว่าคุณสามารถสร้างเทมเพลตหมวดหมู่ได้อย่างไร และคุณสามารถใช้แท็กแบบมีเงื่อนไขสำหรับหมวดหมู่ได้อย่างไร

บทความที่คล้ายกัน

1. วิธีเพิ่มประเภทโพสต์ที่กำหนดเองในวิดเจ็ตแดชบอร์ด 'อย่างรวดเร็ว' WordPress
2. วิธีสร้างประเภทโพสต์ที่กำหนดเองใน WordPress โดยไม่ต้องใช้ปลั๊กอิน
3. วิธีเพิ่มเนื้อหาเริ่มต้นไปยังตัวแก้ไขประเภทโพสต์แบบกำหนดเอง
4. วิธีเพิ่มเนื้อหาก่อนหรือหลัง the_content & ในประเภทโพสต์ที่กำหนดเอง
5. วิธีลบหรือซ่อนความคิดเห็นจากประเภทโพสต์ที่กำหนดเอง » ปิดใช้งานความคิดเห็นในประเภทโพสต์ที่กำหนดเอง
6. วิธีสร้างการแบ่งหน้า WordPress สำหรับประเภทโพสต์ที่กำหนดเอง
7. วิธีลบหรือปิดใช้งาน autop ใน WordPress Posts & Custom Post Types