วิธีจัดเรียงโพสต์ในอนุกรมวิธานของ WordPress

จนถึงตอนนี้ Nelio ได้เผยแพร่ปลั๊กอินหลายตัวในที่เก็บ WordPress.org บางส่วนใช้งานได้ฟรีและเสนอวิธีแก้ปัญหาทั่วไปที่สวยงาม เช่น แผนที่ Nelio ซึ่งให้คุณแทรก Google แผนที่บนหน้าเว็บหรือโพสต์ของคุณที่สร้างด้วย Gutenberg และ Nelio Compare Images ซึ่งช่วยให้คุณแทรก บล็อกเพื่อเปรียบเทียบภาพสองภาพตามชื่อที่แสดงไว้ เรายังได้เผยแพร่ปลั๊กอินพรีเมียมสองสามตัวที่ช่วยเราชำระค่าใช้จ่าย: การทดสอบเนื้อหา Nelio และการทดสอบ Nelio A / B

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

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

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

ในการสร้างประเภทโพสต์ที่กำหนดเอง สิ่งที่คุณต้องทำคือใช้ฟังก์ชัน WordPress register_post_type ดังนี้:

 function nelio_add_help_type() { $labels = array( 'name' => __( 'Questions', 'nelio-help' ), 'singular_name' => __( 'Question', 'nelio-help' ), 'menu_name' => __( 'Testing's Help', 'nelio-help' ), 'all_items' => __( 'All Questions', 'nelio_help' ), 'add_new_item' => __( 'Add New Question', 'nelio_help' ), 'edit_item' => __( 'Edit Question', 'nelio_help' ), 'view_item' => __( 'View Question', 'nelio_help' ), ); register_post_type( 'nab_help', array( 'capability_type' => 'post', 'labels' => $labels, 'map_meta_cap' => true, 'menu_icon' => 'dashicons-welcome-learn-more', 'public' => true, 'show_in_rest' => true, 'supports' => [ 'title', 'editor', 'author' ], ) ); } add_action( 'init', 'nelio_add_help_type' );

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

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

วิธีสร้างอนุกรมวิธานใหม่ในการจัดระเบียบเนื้อหา

ฐานความรู้ของเราจัดอยู่ใน "หัวข้อ" และ "คำหลัก" ดังที่คุณเห็นในภาพหน้าจอต่อไปนี้:

หัวข้อและคำหลักจะเทียบเท่ากับหมวดหมู่และแท็กที่คุณมีโดยค่าเริ่มต้นในบทความของ WordPress มาเน้นที่อดีตกันก่อน เพราะอันหลังก็เหมือนกันทุกประการ

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

 function nelio_add_help_taxonomy() { $labels = array( 'name' => __( 'Topics', 'nelio-help' ), 'singular_name' => __( 'Topic', 'nelio-help' ), 'menu_name' => __( 'Topics', 'nelio-help' ), 'all_items' => __( 'All Topics', 'nelio_help' ), /* ... */ ); register_taxonomy( 'nab_topic', [ 'nab_help' ], array( 'hierarchical' => true, 'label' => __( 'Topic', 'nelio-help' ), 'query_var' => true, 'show_admin_column' => false, 'show_ui' => true, 'show_in_rest' => true, ) ); } add_action( 'init', 'nelio_add_help_taxonomy' );

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

วิธีจัดเรียงโพสต์ในอนุกรมวิธาน

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

การดูฐานข้อมูล

WordPress และความสัมพันธ์กับโพสต์ของคุณถูกจัดเก็บไว้ในตารางฐานข้อมูลที่แตกต่างกันสี่ตาราง:

• wp_terms มีเงื่อนไขทั้งหมดที่คุณสร้างขึ้นภายในอนุกรมวิธานที่กำหนด ตัวอย่างเช่น ใน หัวข้อ อนุกรมวิธาน เรามีข้อกำหนด เช่น คำถามทั่วไป ความเข้ากันได้ และ การชำระเงินและการเรียกเก็บเงิน
• wp_termmeta ช่วยให้เราจัดเก็บข้อมูลเพิ่มเติมที่เกี่ยวข้องกับแต่ละคำ มันค่อนข้างคล้ายกับ wp_postmeta
• wp_term_taxonomy แต่ละคำใน wp_terms กับอนุกรมวิธานที่กำหนด ตัวอย่างเช่น ตารางนี้ติดตามความจริงที่ว่าคำ คำถามทั่วไป นั้นเป็นตัวอย่างของอนุกรมวิธาน nab_topic
• wp_term_relationships เกี่ยวข้องแต่ละคำ ( term_taxonomy_id ) กับโพสต์ที่ "มี" ( object_id ) ตัวอย่างเช่น ตารางนี้บอกเราว่าคำถามเกี่ยวกับสิ่งที่การทดสอบ A/B ของ Nelio เป็น คำถามทั่วไป (และนั่นเป็นสาเหตุที่คำถามปรากฏขึ้นเมื่อเรียกดูหัวข้อ)

WordPress 2.5 เพิ่มฟิลด์ตัวเลขใหม่ในตาราง wp_term_relationships term_order ซึ่งช่วยให้เราสามารถระบุตำแหน่งที่องค์ประกอบบางอย่างใช้ภายในอนุกรมวิธาน ดูเหมือนว่าผู้สมัครที่เรากำลังมองหาเพื่อจัดเรียงคำถามของเราในหัวข้อของเรา… แต่มีสิ่งที่จับได้: เท่าที่ฉันสามารถบอกได้ WordPress ไม่มีกลไกมาตรฐานเพื่อ (1) กำหนดค่าของฟิลด์ term_order และ ( 2) ใช้เพื่อจัดเรียงโพสต์ในอนุกรมวิธานที่แน่นอน มาแก้ไขปัญหานี้กันเถอะ!

วิธีใช้ฟิลด์ term_order เพื่อจัดเรียงโพสต์ที่รวมอยู่ในอนุกรมวิธาน

สมมติว่าเราสามารถตั้งค่า term_order ที่เราต้องการได้ดังที่คุณเห็นในภาพหน้าจอต่อไปนี้:

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

โชคดีที่เราสามารถบอกให้ WordPress ใช้ฟิลด์นี้เพื่อจัดเรียงโพสต์ตามนั้น เพียงใช้ตัวกรอง posts_orderby เพื่อปรับแต่งการสืบค้นที่ดึงข้อมูลโพสต์ที่เป็นของคำบางคำ เพื่อให้รวมคำขอการเรียงลำดับ:

 add_filter( 'posts_orderby', 'nelio_sort_questions_in_topic', 99, 2 ); function nelio_sort_questions_in_topic( $orderby, $query ) { if ( ! nelio_is_topic_tax_query( $query ) ) return; global $wpdb; return "{$wpdb->term_relationships}.term_order ASC"; } function nelio_is_topic_tax_query( $query ) { if ( empty( $query->tax_query ) ) return; if ( empty( $query->tax_query->queries ) ) return; return in_array( $query->tax_query->queries[0]['taxonomy'], [ 'nab_topic' ], true ); }

ข้อมูลโค้ดก่อนหน้านี้ทั้งหมดทำเพื่อตรวจสอบว่าเรากำลังค้นหาอนุกรมวิธานบางอย่าง (ในกรณีของเรา nab_topic ) และเมื่อเราดำเนินการ เราจะเพิ่มส่วนคำ ORDER BY ในการสืบค้น เพื่อให้ผลลัพธ์สุดท้ายถูกจัดเรียงตามค่าของ แอตทริบิวต์ term_order ที่พบในตาราง $wpdb->term_relationships :

การใช้งานอินเทอร์เฟซผู้ใช้เพื่อสั่งเนื้อหาของอนุกรมวิธาน

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

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

เพื่อให้บรรลุผลตามที่ต้องการ เราต้องดำเนินการตามขั้นตอนต่อไปนี้:

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

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

อย่างที่ฉันบอกไป สิ่งแรกคือการลงทะเบียนหน้าที่เราจะใส่อินเทอร์เฟซ เราสามารถทำได้ง่ายๆ ด้วยฟังก์ชัน add_submenu_page ระหว่างการดำเนินการ admin_menu :

 add_action( 'admin_menu', function() { add_submenu_page( 'edit.php?post_type=nab_help', 'Sort', 'Sort', 'edit_others_posts', 'nab-help-question-sorter', __NAMESPACE__ . '\render_question_sorter' ) } );

วิธี render_question_sorter ฉันยังง่ายมาก:

 function render_question_sorter() { echo '<div class="wrap"><h1>Sort Questions</h1>'; $terms = get_terms( 'nab_topic' ); render_select( $terms ); foreach ( $terms as $term ) { render_questions_in_term( $term ); } render_script(); echo '</div>'; }

อย่างที่คุณเห็น เราเพียงแค่ดึงคำศัพท์ทั้งหมดในอนุกรมวิธาน nab_topic จากนั้นเราใช้ฟังก์ชันเสริมสามฟังก์ชันเพื่อ (1) แสดงตัวเลือก (2) แสดงคำถามในแต่ละหมวดหมู่ และ (3) เพิ่มสคริปต์ขนาดเล็กเพื่อสร้างทุกอย่าง พลวัต.

การแสดงตัวเลือกนั้นง่ายพอๆ กับการวนซ้ำในแต่ละคำและแสดง option :

 function render_select( $terms ) { echo '<select>'; foreach ( $terms as $term ) { printf( '<option value="%s">%s</option>', esc_attr( $term->slug ), esc_html( $term->name ) ); } echo '</select>'; }

เพื่อแสดงคำถามที่เรามีในแต่ละเทอมของอนุกรมวิธาน เราเปิดคิวรีไปยังฐานข้อมูลและทำซ้ำผ่านคำถามทั้งหมด:

 function render_questions_in_term( $term ) { printf( '<div class="term-block" data-term->', esc_attr( $term->slug ), esc_attr( $term->term_id ) ); echo '<div class="sortable">' $query = new WP_Query( array( 'post_type' => 'nab_help', 'post_per_page' => -1, 'tax_query' => array( array( 'taxonomy' => 'nab_topic', 'field' => 'term_id', 'terms' => $term->term_id, 'orderby' => 'term_order', ), ), ) ); while ( $query->have_posts() ) { $query->the_post(); global $post; printf( '<div class="question" data-question->%s</div>', esc_attr( $post->ID ), esc_html( $post->post_title ) ); } echo '</div>'; printf( '<input type="button" data-term- value="%s" />', esc_attr( $term->term_id ), esc_attr( 'Save' ) ); echo '</div>'; }

โปรดทราบว่าฟังก์ชันนี้แสดง div ที่ใช้ slug ของ $term ปัจจุบันเป็น ID จัดกลุ่มคำถามในองค์ประกอบ div อื่น และในที่สุดก็มีปุ่ม บันทึก รายละเอียดทั้งหมดเหล่านี้จะมีประโยชน์เมื่อเราแสดงสคริปต์ที่เชื่อมต่อแอปของเราในที่สุด

เมื่อทุกอย่างพร้อมแล้ว เราก็เพียงแค่เพิ่ม JavaScript เวทย์มนตร์ โดยเฉพาะอย่างยิ่ง UI ที่รวดเร็วและสกปรกนี้ต้องใช้สคริปต์สองตัว ( jquery และ jquery-ui ) เพื่อใช้งานฟังก์ชันการลากแล้วปล่อย ตามด้วย JS snippet ต่อไปนี้:

 ( function() { // MAKE QUESTIONS SORTABLE $( '.sortable' ).sortable(); // TERM SELECTOR const select = document.getElementById( 'topic' ); const termBlocks = [ ...document.querySelectorAll( '.term-block' ) ]; select.addEventListener( 'change', showSelectedTermBlock ); // Helper function function showSelectedTermBlock() { /* ... */ } // SAVE BUTTONS [ ...document.querySelectorAll( '.term-block input[type="button"]' ) ].forEach( addButtonLogic ); // Helper function function addButtonLogic( button ) { const termId = button.getAttribute( 'data-term-id' ); button.addEventListener( 'click', () => { button.disabled = true; const selector = `div[data-term-] .question`; const ids = [ ...document.querySelectorAll( selector ) ] .map( ( question ) => question.getAttribute( 'data-question-id' ); $.ajax( { url: ajaxurl, method: 'POST', data: { action: 'nelio_save_tax_sorting', objectIds: ids, termId, }, } ).always( () => button.disable = false ); } } } )()

เมื่อมองแวบแรก ตัวอย่างก่อนหน้าอาจดูซับซ้อน แต่ฉันสัญญา: มันไม่ใช่ ขั้นแรก เราทำให้คำถามของเรา "จัดเรียงได้" โดยใช้ฟังก์ชันที่ sortable ของ jQuery UI จากนั้น เราเพิ่มผู้ฟังไปยังองค์ประกอบที่ select ซึ่งแสดง/ซ่อนชุดคำถามที่เหมาะสมโดยใช้ฟังก์ชันตัวช่วย สุดท้าย เราเพิ่มตัวฟังการ click ลงในปุ่ม บันทึก ของเรา เพื่อที่ว่าเมื่อผู้ใช้คลิกที่ปุ่มเหล่านั้น ลำดับการจัดเรียงคำถามจะถูกจัดเก็บไว้ในฐานข้อมูล

อย่างที่คุณเห็น การบันทึกคำสั่งซื้อใหม่นี้ทำได้ผ่านคำขอ AJAX ซึ่งหมายความว่าเราจำเป็นต้องใช้ PHP callback แบบคู่กัน:

 add_action( 'wp_ajax_nelio_save_tax_sorting', __NAMESPACE__ . '\save_tax_sorting' ); function save_tax_sorting() { $term_id = isset( $_POST['termId'] ) ? absint( $_POST['termId'] : 0 ); if ( ! $term_id ) die(); $object_ids = isset( $_POST['objectIds'] ) ? $_POST['objectIds'] : []; if ( ! is_array( $object_ids ) || empty( $object_ids ) ) die(); $object_ids = array_values( array_map( 'absint', $object_ids ) ); global $wpdb; foreach ( $object_ids as $order => $object_id ) { $wpdb->update( $wpdb->term_relationships, array( 'term_order' => $order + 1 ), array( 'object_id' => $object_id, 'term_taxonomy_id' => $term_id, ), ); } die(); }

และนั่นแหล่ะ! ค่อนข้างง่ายใช่มั้ย

สรุป

WordPress ไม่มีกลไกเริ่มต้นในการจัดเรียงโพสต์ภายในอนุกรมวิธานบางอย่าง แต่ไม่เป็นไร! เราสามารถนำมาใช้ได้ด้วยตัวเอง: ทั้งหมดที่เราต้องทำเพื่อจัดเรียงบทความในอนุกรมวิธานของ WordPress คือตั้งค่าฟิลด์ term_order ในตารางฐานข้อมูล term_relationships แล้วขยาย WordPress ด้วยตัวกรอง posts_orderby เพื่อให้ใช้ฟิลด์ดังกล่าว

สุดท้าย เราได้สรุป UI แบบง่าย ๆ เพื่อเติมฟิลด์ term_order อย่างง่ายดายโดยการลากและวางโพสต์ที่รวมอยู่ในอนุกรมวิธานบางอย่าง

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

ภาพเด่นโดย Steve Johnson บน Unsplash