Cara Mengurutkan Postingan dalam Taksonomi WordPress

Sejauh ini Nelio telah menerbitkan beberapa plugin di repositori WordPress.org. Beberapa di antaranya benar-benar gratis dan menawarkan solusi elegan untuk masalah umum, seperti, misalnya, Nelio Maps, yang memungkinkan Anda menyisipkan peta Google di halaman atau postingan yang dibuat dengan Gutenberg, dan Nelio Bandingkan Gambar, yang memungkinkan Anda menyisipkan blok untuk, seperti namanya, membandingkan dua gambar secara berdampingan. Kami juga menerbitkan beberapa plugin premium yang membantu kami membayar tagihan: Konten Nelio dan Pengujian Nelio A / B.

Jika Anda melihat situs web kami, Anda akan melihat bahwa dua plugin premium kami menempati tempat yang menonjol, karena keduanya memiliki beberapa halaman arahan dan harga dan keduanya memiliki basis pengetahuan terkait di mana pengguna dapat menemukan jawaban atas pertanyaan mereka. Hari ini kita akan berbicara tentang bagaimana kita membuat halaman dokumentasi untuk Pengujian A/B Nelio dan Konten Nelio dan apa yang harus kita lakukan untuk mengurutkan pertanyaan sesuka kita.

Cara membuat jenis posting khusus di WordPress

Pertama, mari buat jenis posting khusus untuk melacak semua pertanyaan yang akan dikandung oleh basis pengetahuan kita. Anda dapat melihat hasilnya di tangkapan layar berikut, di mana ada contoh jenis posting baru ini untuk basis pengetahuan Nelio A/B Testing:

Untuk membuat jenis posting khusus, yang harus Anda lakukan adalah menggunakan fungsi register_post_type WordPress sebagai berikut:

 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' );

dan voila! Anda mungkin sudah tahu ada plugin seperti Bidang Kustom Tingkat Lanjut yang membantu Anda membuat dan menyesuaikan antarmuka jenis posting kustom, tetapi saya tidak selalu merekomendasikannya untuk menerapkan contoh sederhana seperti itu.

Omong-omong, jika Anda bertanya-tanya di mana cuplikan ini harus ditempatkan, jangan lewatkan tutorial kami tentang cara menyesuaikan WordPress dengan plugin khusus.

Cara membuat taksonomi baru untuk mengatur konten

Basis pengetahuan kami diatur dalam "Topik" dan "Kata Kunci", seperti yang Anda lihat di tangkapan layar berikut:

Topik dan Kata Kunci setara dengan Kategori dan Tag yang Anda miliki secara default di postingan WordPress. Mari kita fokus pada yang pertama, karena yang terakhir persis sama.

Seperti yang sudah dapat Anda bayangkan, Topik adalah taksonomi khusus yang telah kami buat untuk jenis konten khusus kami. Untuk menambahkan taksonomi baru ke jenis posting WordPress, Anda cukup menggunakan fungsi register_taxonomy sebagai berikut:

 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' );

Fungsinya cukup mudah digunakan. Pertama, beri nama taksonomi ( nab_topic dalam contoh kita). Kemudian Anda menentukan jenis posting yang terkait dengannya (kami hanya memiliki satu: nab_help ). Terakhir, Anda menambahkan beberapa argumen lagi untuk menyesuaikan taksonomi. Hasilnya adalah taksonomi baru untuk membuat Topik konkret yang kita perlukan untuk mengkategorikan pertanyaan dalam basis pengetahuan kita:

Cara mengurutkan posting dalam Taksonomi

Sekarang kami memiliki taksonomi khusus dan kami dapat menambahkan pertanyaan ke setiap Topik yang kami buat, bagaimana kami mengurutkan pertanyaan tersebut dalam topik tertentu? Yah, saya khawatir kita harus membuat kode sedikit…

Melihat database

WordPress dan hubungannya dengan posting Anda disimpan dalam empat tabel database yang berbeda:

• wp_terms mencakup semua istilah yang Anda buat dalam taksonomi tertentu. Misalnya, dalam topik taksonomi kami, kami memiliki istilah seperti Pertanyaan Umum , Kompatibilitas , dan Pembayaran dan Penagihan .
• wp_termmeta membantu kami untuk menyimpan data tambahan yang terkait dengan setiap istilah. Ini sangat mirip dengan wp_postmeta .
• wp_term_taxonomy menghubungkan setiap istilah dalam wp_terms dengan taksonomi yang menentukan. Jadi, misalnya, tabel ini melacak fakta bahwa istilah Pertanyaan Umum sebenarnya adalah turunan dari taksonomi nab_topic .
• wp_term_relationships menghubungkan setiap istilah ( term_taxonomy_id ) dengan postingan yang "dikandungnya" ( object_id ). Misalnya, tabel ini memberi tahu kita bahwa pertanyaan tentang apa itu Pengujian A/B Nelio adalah Pertanyaan Umum (dan itulah mengapa pertanyaan itu muncul saat menelusuri topik).

WordPress 2.5 menambahkan bidang numerik baru di tabel wp_term_relationships , term_order , yang memungkinkan kita menentukan posisi yang ditempati elemen tertentu dalam taksonomi. Ini terdengar seperti kandidat yang kami cari untuk mengurutkan pertanyaan kami dalam topik kami... tapi ada masalah: sejauh yang saya tahu, WordPress tidak menawarkan mekanisme standar untuk (1) menentukan nilai bidang term_order dan ( 2) menggunakannya untuk benar-benar mengurutkan posting dalam taksonomi tertentu. Mari kita perbaiki ini!

Cara menggunakan bidang term_order untuk mengurutkan posting yang termasuk dalam taksonomi

Misalkan kita dapat mengatur nilai term_order yang diinginkan yang kita inginkan, seperti yang dapat Anda lihat di tangkapan layar berikut:

Secara default, WordPress mengabaikan bidang ini dan posting tidak diurutkan di front-end. Itu sebabnya tiga pertanyaan yang ditunjukkan pada tangkapan layar di atas tidak diurutkan dengan benar.

Untungnya, kami dapat dengan mudah memberi tahu WordPress untuk menggunakan bidang untuk mengurutkan posting berdasarkan itu. Cukup gunakan filter posts_orderby untuk mengubah kueri yang mengambil kiriman milik istilah tertentu sehingga menyertakan permintaan penyortiran:

 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 ); }

Semua yang dilakukan cuplikan sebelumnya adalah memeriksa apakah kita menanyakan taksonomi tertentu (dalam kasus kita, nab_topic ) dan, ketika kita melakukannya, kita menambahkan klausa ORDER BY dalam kueri sehingga hasil akhir diurutkan berdasarkan nilai atribut term_order ditemukan di $wpdb->term_relationships :

Implementasi antarmuka pengguna untuk memesan konten taksonomi

Akhirnya, kami hanya memiliki satu hal yang tersisa untuk dilakukan. Di bagian sebelumnya, kami berasumsi bahwa kami dapat mengatur nilai yang benar di bidang term_order . Tapi bagaimana caranya? Apakah ada layar atau opsi di suatu tempat untuk menetapkan nilai ini dengan cara yang ramah pengguna? Sejauh yang saya tahu, tidak ada. Tapi kita bisa membuatnya.

Menurut pendapat saya, solusi terbaik untuk masalah ini adalah memiliki UI yang memungkinkan saya untuk memilih taksonomi yang ingin saya urutkan, lalu seret dan lepas semua pertanyaan untuk menetapkan urutannya. Sesuatu seperti ini, pergi:

Untuk mencapai efek yang diinginkan, kita harus menerapkan langkah-langkah berikut:

• Daftarkan halaman baru di dasbor WordPress
• Terapkan fungsi yang akan membuat pemilih taksonomi dan pos dalam taksonomi yang dipilih
• Tambahkan cuplikan JavaScript kecil sehingga UI responsif
• Buat panggilan balik baru untuk menyimpan pesanan yang dihasilkan setelah kami selesai menyortir kiriman

Anda dapat membuat antarmuka ini serumit yang Anda inginkan, menggunakan tumpukan pengembangan WordPress baru. Tapi hari ini saya akan menguraikan solusi cepat dan kotor yang menyelesaikan pekerjaan.

Seperti yang saya katakan, hal pertama adalah mendaftarkan halaman tempat kita akan meletakkan antarmuka. Kita dapat dengan mudah melakukan ini dengan fungsi add_submenu_page selama tindakan 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' ) } );

Metode render_question_sorter saya juga sangat sederhana:

 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>'; }

Seperti yang Anda lihat, kami hanya mengambil semua istilah dalam taksonomi nab_topic dan kemudian kami mengandalkan tiga fungsi tambahan untuk (1) membuat pemilih, (2) membuat pertanyaan di setiap kategori dan (3) menambahkan skrip kecil untuk membuat semuanya dinamis.

Merender pemilih semudah mengulangi setiap istilah dan membuat 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>'; }

Untuk merender pertanyaan yang kami miliki di setiap istilah taksonomi, kami meluncurkan kueri ke database dan mengulangi semuanya:

 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>'; }

Perhatikan bahwa fungsi ini merender div yang menggunakan slug dari $term saat ini sebagai ID-nya, mengelompokkan pertanyaan dalam elemen div lain, dan akhirnya menyertakan tombol Simpan . Semua detail ini akan berguna saat kita akhirnya membuat skrip yang menghubungkan aplikasi kita.

Setelah semuanya siap, kita hanya perlu menambahkan beberapa keajaiban JavaScript. Secara khusus, UI cepat dan kotor ini memerlukan dua skrip ( jquery dan jquery-ui ) untuk mengimplementasikan fungsionalitas drag-and-drop dan kemudian cuplikan JS berikut:

 ( 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 ); } } } )()

Sepintas, cuplikan sebelumnya mungkin tampak rumit. Tapi saya berjanji: tidak. Pertama, kami membuat pertanyaan kami "dapat disortir" dengan menggunakan fungsi sortable jQuery UI. Kemudian, kami menambahkan pendengar ke komponen select kami yang menampilkan/menyembunyikan rangkaian pertanyaan yang sesuai menggunakan fungsi pembantu. Terakhir, kami menambahkan pendengar click ke tombol Simpan sehingga, ketika pengguna mengkliknya, urutan pertanyaan yang diurutkan disimpan dalam database.

Seperti yang Anda lihat, menyimpan pesanan baru ini dilakukan melalui permintaan AJAX, yang berarti kita perlu mengimplementasikan mitra panggilan balik PHP-nya:

 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(); }

Dan itu saja! Cukup mudah, ya?

Singkatnya

WordPress tidak menawarkan mekanisme default untuk mengurutkan posting dalam taksonomi tertentu. Tapi tidak apa-apa! Kita dapat menerapkannya sendiri: yang harus kita lakukan untuk mengurutkan posting dalam taksonomi WordPress adalah mengatur bidang term_order di tabel database term_relationships dan kemudian memperluas WordPress dengan filter posts_orderby sehingga menggunakan bidang tersebut.

Terakhir, kami telah menguraikan UI sederhana untuk dengan mudah mengisi bidang term_order dengan menyeret dan melepaskan pos yang termasuk dalam taksonomi tertentu.

Saya harap Anda menyukai tutorial ini dan jika Anda menyukainya, silakan bagikan dengan teman dan kolega Anda. Dan, seperti biasa, jika Anda memiliki pertanyaan, tinggalkan di bagian komentar di bawah dan saya akan dengan senang hati menjawabnya.

Gambar unggulan oleh Steve Johnson di Unsplash.