Jenis Posting Kustom WordPress – Mengambil Lebih Jauh

Diterbitkan: 2020-12-16

Dalam seri kami tentang jenis Posting Kustom WordPress, sejauh ini kami telah melihat cara membuat Jenis Posting Kustom menggunakan Plugin dan cara membuat Jenis Posting Kustom secara manual dengan menulis cuplikan kode kustom Anda sendiri. Kami juga melihat bagaimana Anda dapat menerapkan beberapa konfigurasi dasar ke jenis posting Anda sehingga Anda dapat menanganinya dengan lebih mudah dari Admin WordPress Anda. Jika Anda belum memeriksa artikel ini maka pastikan Anda melihatnya!

Dalam artikel ini kita akan melangkah lebih jauh dengan membangun Jenis Posting Kustom yang telah dibuat sebelumnya untuk memperluas fungsionalitas dan kegunaannya di situs web kita. Jika Anda ingin mengikutinya, Anda harus membuat Jenis Postingan Kustom yang kami buat di artikel kami 'Buat Tipe Posting Kustom WordPress Secara Manual' jadi pastikan Anda telah melakukannya terlebih dahulu sehingga informasi berikut masuk akal.

Mari kita mulai!

Menampilkan Jenis Posting Kustom Di Mana Saja

Seperti yang telah Anda lihat sebelumnya, kami membuat Jenis Posting Kustom untuk menampilkan Resep di situs web kami. Ini adalah contoh sempurna dari situasi di mana Jenis Posting Kustom adalah cara yang sangat berguna untuk memperluas fungsionalitas situs web kami.

Dalam contoh kami, kami dapat menampilkan posting Resep kami dengan menambahkannya ke menu situs web utama kami. Kami juga menyiapkan tampilan arsip yang mencantumkan semua posting terkait Resep kami. Ini adalah opsi bagus untuk menampilkan Jenis Posting Kustom baru kami, tetapi apa yang terjadi ketika kami ingin menampilkan konten ini di tempat lain di situs web kami?

Menggunakan Fungsi WP_Query untuk Menampilkan Jenis Posting Kustom

Untuk menampilkan posting Resep baru kami di lokasi yang kami pilih di situs web kami, kami akan menggunakan fungsi WP_Query . Dalam argumennya, kita dapat menemukan post_types yang akan digunakan dalam contoh ini karena menentukan jenis posting mana yang ingin kita kueri. Bersamaan dengan itu kami akan menggunakan parameter publish dan orderby karena kami ingin menampilkan posting Resep yang memiliki status diterbitkan dan memesannya berdasarkan tanggal turun untuk menampilkan yang terbaru terlebih dahulu.

Mari kita bayangkan bahwa kita ingin menampilkan daftar posting Resep kita di footer website kita di atas informasi hak cipta. Untuk melakukan ini, kami akan menggunakan potongan kode yang, dalam kasus kami, perlu dimasukkan ke dalam file singular.php di bawah awal elemen <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' ); } ?>

Kami menggunakan tema WordPress Twenty Twenty default saat ini dalam contoh ini. Jika Anda menggunakan tema selain Twenty Twenty, Anda harus mengedit file yang berisi konten footer untuk tema Anda.

Dengan kode yang ditambahkan, kita dapat membuka situs web kita dan kita akan melihat posting Resep kita terdaftar di footer kita.

Tata letak dan tampilan posting ini di footer Anda dapat ditata agar terlihat seperti yang Anda inginkan menggunakan CSS. Tempat terbaik untuk menambahkan CSS apa pun adalah di file style.css yang terletak di bawah folder utama tema Anda. Kami memiliki beberapa kemungkinan CSS yang mungkin ingin Anda gunakan di bawah ini.

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

Setelah CSS ini disimpan dan halaman disegarkan, Anda akan melihat tata letak posting Resep Anda di perubahan footer agar terlihat seperti ini:

Mengubah tata letak jenis posting khusus dengan CSS

Pentingnya Mengatur Ulang Loop

Anda mungkin telah memperhatikan bahwa setelah mendefinisikan argumen yang diperlukan dalam kode, loop posting dimulai dan diakhiri dengan fungsi wp_reset_postdata() . Penggunaan fungsi ini sangat penting dan inilah alasannya.

Ketika WordPress membuat tata letak halaman, ia menggunakan variabel $post global yang berfungsi dengan baik jika hanya ada satu loop di halaman. Sekarang setelah kami menambahkan loop kustom kami, kami pada dasarnya menimpa variabel $post global dan, kecuali kami memberi tahu WordPress bahwa loop direset, itu akan dilanjutkan dari sana dengan menggunakan jenis posting kustom yang kami definisikan di loop kami.

Mari kita lihat cara kerjanya dalam praktik dengan menggemakan judul posting di bawah kode di atas seperti ini:

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

Sekarang, jika kami me-refresh halaman kami di frontend situs web kami, kami melihat judul 'Posting 1' di bawah resep terbaru kami.

Ini masuk akal karena kami mengatur ulang kembali ke loop asli dengan wp_reset_postdata(); fungsi.

Sekarang, beri komentar pada wp_reset_postdata(); dari kode Anda. Anda akan melihat bahwa the_title(); kode akan menggemakan judul 'Resep 1' alih-alih 'Posting 1'.

Jenis Posting Kustom – Manajemen Lebih Lanjut

Untuk menyesuaikan perilaku dan tampilan posting kustom kami lebih lanjut, kami akan melihat beberapa opsi yang dapat ditambahkan sebagai ekstensi ke kode yang kami gunakan di artikel kami sebelumnya untuk mendaftarkan jenis posting 'resep' kami.

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

Kami akan menambahkan beberapa argumen lagi untuk:

Ubah siput URL dari resep Jenis Posting Kustom
Ubah posisi menu admin Custom Post Type
Ubah ikon menu

Mengubah Slug URL Jenis Posting Kustom

Jika kita membuat postingan resep dan menamakannya 'Recipe 1' maka URL default postingan 'Recipe 1' akan menjadi seperti https://mycompanyname.com/recipes/recipe-1/ asalkan permalink disetel ke ' Nama posting' di Pengaturan Permalink kami.

Jika Anda ingin mengubah cara Jenis Postingan Khusus Resep muncul di URL, Anda dapat menggunakan argumen rewrite dengan kunci slug -nya.

Seperti yang kami perhatikan dari URL, jika argumen ini dilewati, nilai defaultnya adalah label 'resep' Jenis Postingan Kustom. Jika kita ingin mengubahnya ke my-home-recipes misalnya kita harus menimpanya dengan mengedit potongan kode kita agar terlihat seperti ini:

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

Sekarang jika Anda menyimpan permalinks (flush cache permalinks) dan melihat resep Anda lagi, URL Anda seharusnya https://mycompanyname.com/my-home-recipes/recipe-1/

Perhatikan bahwa jika Anda mengubah slug, Anda juga harus mengubah URL arsip dari /recipes/ ke /my-home-recipes/ di halaman Menu Utama.

Mengubah posisi Menu Jenis Posting Kustom

Jika Anda ingin memindahkan menu Resep ke posisi yang berbeda, Anda dapat menggunakan argumen menu_position seperti ini:

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

Nilai yang dapat Anda gunakan untuk argumen ini adalah:

0 : paling atas
5: di bawah Posting
10 : di bawah Media
15 : di bawah Tautan
20 : di bawah Halaman
25 : di bawah komentar
60 : di bawah celah pertama di menu
65 : di bawah Plugin
70 : di bawah Pengguna
75 : di bawah Alat
80 : di bawah Pengaturan
100 : di bawah celah kedua dalam menu

Tangkapan layar di bawah ini menunjukkan posisi menu ketika nilai 5 telah ditambahkan ke argumen menu_position .

Mengubah Ikon Menu Jenis Posting Kustom

Saat ini, menu Resep menggunakan ikon posting default. Ini akan menjadi sentuhan yang bagus karena memiliki ikon uniknya sendiri. Untuk mencapai ini kita dapat menggunakan argumen 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' );

Untuk menampilkan ikon Anda sendiri, Anda dapat memasukkan URL lengkap lokasi ikon menu Anda (seperti yang ditunjukkan pada kode di atas) atau menggunakan perpustakaan Dashicons WordPress dengan menambahkan nama kelas ikon. Anda dapat melihat ikon dengan kelas yang sesuai di sini.

Jika, misalnya, Anda memilih ikon makanan, Anda akan menambahkannya ke kode seperti ini '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' );

Hasil akhirnya adalah ikon yang Anda pilih muncul di Menu Posting Kustom Anda… membantu membuat Posting Kustom Anda terasa, yah, benar-benar kustom!

Bacaan lebih lanjut

Buat Jenis Posting Kustom WordPress Menggunakan Plugin
Buat Jenis Posting Kustom WordPress Secara Manual
Buat Jenis Posting Kustom WordPress Menggunakan Plugin Anda Sendiri!

Kesimpulan

Semoga tips ini benar-benar membantu Anda dalam pencarian Anda untuk membangun Jenis Posting Kustom Anda sendiri dan dengan melakukan itu memungkinkan Anda untuk lebih meningkatkan fungsi dan penggunaan situs web WordPress Anda. Seperti halnya semua pengkodean, sebaiknya luangkan waktu untuk bermain dan lihat bagaimana kode baru Anda memengaruhi situs web Anda. Membangun di atas fondasi ini akan memungkinkan Anda untuk menangani proyek yang bahkan lebih kompleks di mana diperlukan penyesuaian yang berat.