WordPress ประเภทโพสต์ที่กำหนดเอง – ก้าวต่อไป

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

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

มาเริ่มกันเลย!

การแสดงประเภทโพสต์ที่กำหนดเองได้ทุกที่

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

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

การใช้ฟังก์ชัน WP_Query เพื่อแสดงประเภทโพสต์ที่กำหนดเอง

เพื่อแสดงโพสต์สูตรอาหารใหม่ของเราในตำแหน่งที่เราเลือกบนเว็บไซต์ของเรา เราจะใช้ฟังก์ชัน WP_Query ในอาร์กิวเมนต์ เราสามารถค้นหา post_types ซึ่งจะใช้ในอินสแตนซ์นี้ เนื่องจากจะกำหนดประเภทโพสต์ที่เราต้องการสอบถาม นอกจากนี้ เราจะใช้พารามิเตอร์ publish และ orderby ลำดับ เนื่องจากเราต้องการแสดงโพสต์สูตรอาหารที่มีสถานะเผยแพร่แล้ว และเรียงลำดับตามวันที่จากมากไปน้อยเพื่อแสดงรายการล่าสุดก่อน

ลองนึกภาพว่าเราต้องการแสดงรายการโพสต์สูตรอาหารของเราในส่วนท้ายของเว็บไซต์ของเราเหนือข้อมูลลิขสิทธิ์ ในการดำเนินการนี้ เราจะใช้ข้อมูลโค้ดสั้นๆ ซึ่งในกรณีของเรา จำเป็นต้องแทรกลงในไฟล์ singular.php ด้านล่างจุดเริ่มต้นขององค์ประกอบ <footer>

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?>

เรากำลังใช้ธีมเริ่มต้นของ WordPress Twenty Twenty ในตัวอย่างนี้ หากคุณใช้ธีมอื่นที่ไม่ใช่ Twenty Twenty คุณควรแก้ไขไฟล์ที่มีเนื้อหาส่วนท้ายสำหรับธีมของคุณ

ด้วยการเพิ่มรหัส เราสามารถเปิดเว็บไซต์ของเรา และเราควรเห็นโพสต์สูตรอาหารของเราแสดงอยู่ในส่วนท้ายของเรา

เลย์เอาต์และลักษณะที่ปรากฏของโพสต์เหล่านี้ในส่วนท้ายของคุณสามารถกำหนดสไตล์เพื่อดูว่าคุณต้องการโดยใช้ CSS อย่างไร ตำแหน่งที่ดีที่สุดในการเพิ่ม CSS คือ style.css ที่อยู่ใต้โฟลเดอร์หลักของธีมของคุณ เรามี CSS ที่คุณอาจต้องการใช้ด้านล่าง

 .recent-recipes h3 { font-size: 18px; margin: 15px 0; } .recipe { float: left; margin: 15px; } .recent-recipes { height: 240px; margin: 0 auto; width: 1190px; }

เมื่อบันทึก CSS นี้และรีเฟรชหน้าแล้ว คุณจะเห็นเลย์เอาต์ของโพสต์สูตรอาหารในส่วนท้ายที่เปลี่ยนไปดังนี้:

ความสำคัญของการรีเซ็ตลูป

คุณอาจสังเกตเห็นว่าหลังจากกำหนดอาร์กิวเมนต์ที่จำเป็นในโค้ดแล้ว ลูปการโพสต์จะเริ่มต้นและสิ้นสุดด้วย wp_reset_postdata() การใช้ฟังก์ชันนี้มีความสำคัญมาก และนี่คือเหตุผล

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

มาดูกันว่ามันทำงานอย่างไรในทางปฏิบัติโดยสะท้อนชื่อโพสต์ภายใต้โค้ดด้านบนดังนี้:

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?> <?php the_title(); ?>

ตอนนี้ หากเรารีเฟรชหน้าของเราที่ส่วนหน้าของเว็บไซต์ของเรา เราจะเห็นชื่อ 'โพสต์ 1' ภายใต้สูตรอาหารล่าสุดของเรา

สิ่งนี้สมเหตุสมผลเพราะเรารีเซ็ตกลับเป็นลูปเดิมด้วย wp_reset_postdata(); การทำงาน.

ตอนนี้แสดงความคิดเห็น wp_reset_postdata(); จากรหัสของคุณ คุณจะสังเกตเห็นว่า the_title(); รหัสจะสะท้อนชื่อ 'สูตร 1' แทน 'โพสต์ 1'

ประเภทโพสต์ที่กำหนดเอง – การจัดการเพิ่มเติม

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

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, ) ); } add_action( 'init', 'recipes_post_type' );

เราจะเพิ่มข้อโต้แย้งเพิ่มเติมเพื่อ:

1. เปลี่ยนกระสุน URL ของสูตร Custom Post Type
2. เปลี่ยนตำแหน่งของเมนูผู้ดูแลระบบ Custom Post Type
3. เปลี่ยนไอคอนเมนู

การเปลี่ยน Slug URL ประเภทโพสต์ที่กำหนดเอง

หากเราสร้างโพสต์สูตรและตั้งชื่อว่า 'สูตร 1' URL เริ่มต้นของโพสต์ 'สูตร 1' จะมีลักษณะดังนี้ https://mycompanyname.com/recipes/recipe-1/ โดยมีการตั้งค่าลิงก์ถาวรเป็น ' ชื่อโพสต์' ในการตั้งค่าลิงก์ถาวรของเรา

หากคุณต้องการเปลี่ยนวิธีที่ Recipes Custom Post Type ปรากฏใน URL คุณสามารถใช้อาร์กิวเมนต์ rewrite ด้วยคีย์ slug

ตามที่เราสังเกตจาก URL หากข้ามอาร์กิวเมนต์นี้ ค่าเริ่มต้นจะเป็นป้ายกำกับ "สูตร" ประเภทโพสต์ที่กำหนดเอง หากเราต้องการเปลี่ยนเป็น my-home-recipes เช่น เราต้องเขียนทับโดยแก้ไขข้อมูลโค้ดของเราให้มีลักษณะดังนี้:

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), ) ); } add_action( 'init', 'recipes_post_type' );

ตอนนี้ หากคุณบันทึกลิงก์ถาวร (ล้างแคชลิงก์ถาวร) และดูสูตรของคุณอีกครั้ง URL ของคุณควรเป็น https://mycompanyname.com/my-home-recipes/recipe-1/

โปรดทราบว่าหากคุณเปลี่ยนกระสุน คุณจะต้องเปลี่ยน URL ที่เก็บถาวรด้วยจาก /recipes/ เป็น /my-home-recipes/ ในหน้าเมนูหลัก

การเปลี่ยนตำแหน่งเมนูประเภทโพสต์แบบกำหนดเอง

หากคุณต้องการย้ายเมนูสูตรอาหารไปยังตำแหน่งอื่น คุณสามารถใช้อาร์กิวเมนต์ menu_position ดังนี้:

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, ) ); } add_action( 'init', 'recipes_post_type' );

ค่าที่คุณสามารถใช้สำหรับอาร์กิวเมนต์นี้คือ:

0 : อยู่บนสุด
5 : ด้านล่างโพสต์
10 : ด้านล่างสื่อ
15 : ลิงค์ด้านล่าง
20 : หน้าด้านล่าง
25 : ใต้คอมเม้นท์
60 : ต่ำกว่าช่องว่างแรกในเมนู
65 : ด้านล่างปลั๊กอิน
70 : ต่ำกว่า ผู้ใช้
75 : ด้านล่าง Tools
80 : ด้านล่าง การตั้งค่า
100 : ต่ำกว่าช่องว่างที่สองในเมนู

ภาพหน้าจอด้านล่างแสดงตำแหน่งของเมนูเมื่อมีการเพิ่มค่า 5 ไปยังอาร์กิวเมนต์ menu_position

การเปลี่ยนไอคอนเมนูประเภทโพสต์แบบกำหนดเอง

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

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'https://mycompanyname.com/wp-content/uploads/2020/10/recipes.svg', ) ); } add_action( 'init', 'recipes_post_type' );

ในการแสดงไอคอนของคุณเอง คุณสามารถแทรก URL แบบเต็มของตำแหน่งไอคอนเมนูของคุณ (ตามที่แสดงในโค้ดด้านบน) หรือใช้ไลบรารี WordPress Dashicons โดยเพิ่มชื่อคลาสของไอคอน คุณสามารถดูไอคอนที่มีคลาสที่เกี่ยวข้องได้ที่นี่

ตัวอย่างเช่น หากคุณเลือกไอคอนอาหาร คุณจะต้องเพิ่มมันลงในรหัสของคุณเช่น 'menu_icon' => 'dashicons-food'

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'dashicons-food', ) ); } add_action( 'init', 'recipes_post_type' );

ผลลัพธ์ที่ได้ควรเป็นไอคอนที่คุณเลือกปรากฏในเมนูโพสต์ที่กำหนดเอง... ช่วยให้โพสต์ที่กำหนดเองของคุณรู้สึกได้ กำหนดเองได้อย่างแท้จริง!

อ่านเพิ่มเติม

สร้างประเภทโพสต์ที่กำหนดเองของ WordPress โดยใช้ปลั๊กอิน
สร้าง WordPress Custom Post Types ด้วยตนเอง
สร้างประเภทโพสต์ที่กำหนดเองของ WordPress โดยใช้ปลั๊กอินของคุณเอง!

บทสรุป

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