fbpx
Kelas Wordpress
  • Panduan Pemula
  • WordPress Tutorial
  • Tips & Trick
  • Bisnis
No Result
View All Result
KelasWP - Tempat Belajar Wordpress
No Result
View All Result
Home Wordpress Tutorial

Custom fitur WordPress dengan custom post type

8 bulan lalu
di Wordpress Tutorial
11 menit membaca
0
cover-artikel-membuat-custom-post-type-wordpress

Secara default wordpress memiliki Post dan Pages. Dimana post untuk membuat konten seperti artikel, post memeiliki halaman arsip dan kategori, Sedangkan pages untuk halaman yang statis seperti, home, halaman kontak, tentang kami dll.

Post dan pages ini sebenernya bisa anda buat untuk konten apa saja, Namun jika pada website anda ingin membuat menu tesendiri, misalnya, jika website yang dibuat adalah website sekolahan, anda bisa menambahkan menu khusus, misalnya untuk daftar guru, daftar siswa dll.

Ini yang membuat Worpdress sangat fleksibel, anda bisa membuatnya menjadi website apapun bahkan tanpa mengetahui bahasa pemrograman website.

Menggunakan plugin untuk custom post type.

Selain dengan bahasa pemrograman WordPress, kita bisa dengan mudah membuat custom post type ini dengan plugin. Ada banyak plugin yang bisa melakukan ini secara gratis. Di artikel ini saya akan menggunakan plugin Custom Post Type UI

Oke langsung kita mulai, untuk tutorial ini saya akan menggunakan wordpress yang masih fresh dan baru di install dengan menggunakan template bawaan wordpress yaitu twenty-twenty,


Artikel Terkait :

  • Tutorial lengkap install wordpress
  • Cara menjalankan wordpress di komputer
  • Step by step upload website dari komputer (localhost) ke hosting
  • Membuat website sekolah yang profesional dari 0 dengan WordPress.

Masuk ke halaman admin wordpress dan pilih menu plugins > add new, Cari plugin Custom Post Type UI, Klik Install Now, tunggu sebentar dan Activate.

Install plugin untuk membuat custom post type di WordPress

Saat ini plugin Custom Post Type UI adalah versi 1.7.4, bisa jadi berbeda dengan versi yang anda gunakan saat anda membaca artikel ini, tapi kemungkinan besar fungsi dan interfacenya kurang lebih akan masih sama.

Plugin Custom Post Type UI sukses di Install.

Setelah plugin sukses di install, klik menu yang pertama yaitu (seperi gambar diatas) add/edit post type. Saya akan jelaskan satu persatu fungsi yang ada halaman penambahan custom post type.

Untuk contoh kali ini saya membuat website sekolah, dan saya ingin menambkan custom post type untuk daftar siswa, dimana masing-masing siswa bisa di kategorikan berdasarkan kelas (kategori).

Basic Settings

Seting dasar untuk menambahkan custom post type

Kolom yang pertama adalah basic settings, didalamnya ada 3 field yang perlu di isi yaitu,

  • Post Type Slug, ini adalah nama yang akan di gunakan pada URL (slug), contoh disini saya menggunakan daftar_siswa, maka nanti pada saat di akses di halaman depan URL nya akan menjadi www.namadomain.com/daftar_siswa/. Disini anda tidak boleh menggunakan spasi
  • Plural label, atau label jamak (banyak), ini tidak berlaku di indonesia. Kalo di US sana contoh plural dari daftar siswa adalah Students, (ada huruf S nya di ujung)
  • Singular label, adalah label untuk tunggal, kebalikan dari plural. Tidak berlakuk disini. jadi antara plural dan single kalo Bahasa indonesia kurang lebih samain aja.

Setelah selesai, jangan kebawah dulu, tapi klik tombol Add Post Type, untuk menyimpan post type baru ini ke dalam database. setelah anda simpan akan keluar secara otomatis 3 tab tambahan yaitu :

Cara edit melakukan perubahan custom  post type
  • Edit post type, Untuk melakukan perubahan dari semua custom post type yang ada
  • View post type, ini hanya untuk melihat semua atribut dari custom post type yang anda sudah buat.
  • Import/Export, untuk melakukan backup custom post type atau import custom post type dari backup yang ada

Additional labels

Klik pada tab Edit Post Type, dan pilih (select) daftar_siswa. (Anda bisa mengedit custom post type yang lain dari sini, apabila anda membuat lebih dari satu custom post type.)

Scroll kebawah untuk mengisi label lainnya terkait kebutuhan custom post type ini pada kolom additionals labels.

Penamaan label untuk custom post type.

Aditional labes ini hanya untuk terjemahan dari label-label yang ada, apabila di kosongan dia akan menggunakan istilah-istilah bawaan dari WordPress seperti untuk menambah item baru adalah Add New.

Untuk label anda bisa rubah kapan pun anda mau di kemudian hari, untuk sementara bisa di isi seperti pada gambar diatas, atau kosongkan.

Settings

Kolom seting untuk penambahan fitur pada custom post type UI

Yang terakhir adalah settings untuk menentukan fitur dari custom post type daftar siswa ini. Mari kita bahas satu persatu. Jika bingung, silahkan ikuti setingan saya. Kedepannya anda akan mengerti sendiri fungsi-fungsi nya pada saat anda menggunakan CPT ini.

  • Public, ini adalah hak akses terhdapat custom post type ini, ada jika anda set False maka konten dari custom post type ini tidak dapat di okses oleh pengunjung website. (untuk contoh ini saya set TRUE)
  • Publicly Queryable, untuk bisa meyertakan request terhadap CPT ini (untuk ini saya set TRUE)
  • Show UI. Biartkan default true untuk menampilak fitur user interface di admin (untuk ini saya set TRUE)
  • Show in Nav Menus, Shortcut tambahan pada menu admin bar yang ada di atas website, Jadi anda bisa langsung menambah item dari menu tsb. (untuk ini saya set TRUE)
  • Delete with user, Jika di set TRUE maka pada saat user yang membuat item CPT ini di hapus, maka semua konten CPT atas nama user tersebut akan di hapus juga (untuk ini saya set FALSE)
  • Show in REST API, untuk setingan lanjutan (advanced), yaitu TRUE artinya memperboleh kan akses dari aplikasi luar terhadap CPT ini. false tidak, Biasanya REST API apabila anda ingin mengembangkan wordpress menjadi aplikasi handphone, dimana konten di aplikasi tersebut secara otomatis akan di ambil dari web anda. (untuk ini saya set TRUE)
  • REST API base slug & REST API controller class, untuk setingan REST API. (kosongkan)
  • Has Archive, WordPress memiliki sistem archive (arsip) untuk semua jenis post, dimana kemudian arsip ini bisa di sajikan berdasarkan klasifikasi tanggal terbit, hari, bulan atau tahun (kosongkan slug)
  • Exclude From Search, apakah anda ingin CPT ini bisa di search (cari) dengan fitur pencarian pada website. Jika TRUE maka sistem pencarian akan tidak menyertakan CPT ini pada saat melakukan user melakukan search. (untuk ini saya set FALSE).
  • Capability Type, set default sebagai post saja. WordPress memiliki user privilige untuk masing-masing role (hak akses), seperti administartor itu memiliki semua akses, sedangan dibawah admin ada author, editor, subscriber, dimana jika user tersebut memiliki hak akses membuat post, maka ia bisa menambah, edit, hapus terhadap CPT ini. ((untuk ini saya set POST)
  • Hierarchical, adalah susunan hirarki konten post ini, contoh anda memiliki artikel Menu masak, kemudian dibawah artikel ini anda bisa membuat artikel lain misalnya sayur asem, tempe goreng dll. itu semua bisa di tampilkan secara hirarki dalam sistem.

    Ini biasanya untuk bentuk page (halaman statis) sedangkan post bisa di di buat hirarki nya menggunakan taxonomy saja, seperti kategori (untuk ini saya set FALSE)
  • Rewrite, sistem rewrite URL oleh WordPress (untuk ini saya set FALSE).
  • Custom Rewrite Slug, Gunakan default saja. ini bisa anda ganti apabila ingin menggunakan custom label pada slug (URL) CPT ini.
  • With Front, set TRUE saja, ini untuk susuna URL yang lebih baik SEO nya.
  • Query Var & Custom Query Var Slug, biarkan secara default.
  • Menu Position,. adalah posisi menu pada halaman admin, apakah mau diatas atau ditengah atau dibawah, berikut adalah posisi yang ada (masukan angka saja) :
    • 5 – dibawah menu post
    • 10 – dibawah menu Media
    • 15 – dibawah Links
    • 20 – dibawah Pages
    • 25 – dibawah comments
    • 60 – dibawah first separator (garis pembatas pertama)
    • 65 – dibawah Plugins
    • 70 – dibawah Users
    • 75 – dibawah Tools
    • 80 – dibawah Settings
    • 100 – dibawah second separator (garis pembatas pertama)
  • Show in Menu, tampilkan pada menu admin (set TRUE)
  • Menu Icon, adalah bentuk icon menu admin, masukan kode icon nya saja seperti contoh dashicons-admin-site, untuk melihat list dari icon yang bisa dipakai klik disini.
  • Supports, ini adalah fitur wordpress secara default, dimana akan tampil pada saat anda sedang menambahkan item post, isinya adalah :
    • Title, judul dari post, (dalam kasus ini title bisa kita pakai sebagai nama siswa)
    • Editor, field teks editor untuk konten utama dari CPT. (bisa kita gunakan untuk deskripsi tambahan siswa) pada post bawaan wordpress, editor ini adalah kolom (field) untuk memasukan konten artikel
    • Featured Image, untuk foto utama, bisa kita pakai untuk foto siswa.
    • Excerpt adalah field untuk ringkasan (tidak perlu untuk daftar siswa)
    • Sisanya tidak perlu, seperti komentar, nama penulis (author).
  • Custom “Supports”, untuk seting advanced lainnya, seperti melakukan koneksi dengan fungsi tertentu dari theme lain.
  • Taxonomies, Tidak usah di centang opsi catgories dan tags-nya, kita akan buat custom untuk daftar siswa ini

Klik save post type untuk menyimpan.

Menu custom post type yang sudah di buat.

Saat ini menu daftar siswa sudah keluar pada bagian admin wordpress, Anda sudah bisa menambahkan konten, namun biar makin lengkap, kita bisa menambahkan kelas sebagai salah satu taxonomies (pengelompokan)

Edit Taxonomies

Taxonomy ini adalah atribut yang bisa di tambahkan terhapa post untuk mengelompokan, contoh taxonomies paling umum adalah kategori, atau tags.

Saat membuat daftar siswa, yang saya bayangkan pengelompokan utamanya adalah kelas. Jadi sekarang kita buat kategori khusus yaitu kelas yang akan di tempel pada CPT daftar siwa ini.

Cara membuat taxonomy untuk custom post type dengan CPT UI

Buat taxonomy kelas dari menu Add/Edit Taxonomies dengan konten, dan sekarang kaetgori kelas bisa sudah bisa ditambahkan pada setiap konten siswa.

Setelah anda save, seperti halnya dalam membuat custom post type, ada kolom untuk aditionals label dan setting.

Untuk label anda bisa rubah sesuai kebutuhan, dan untuk seting, saya hanya akan merubah Hierarchical dari FALSE menjadi TRUE, agar, kategori kelas bisa mempunyai sub, sisanya saya biarkan secara default.

Contoh Input

Kita tambahkan dulu data kelas yang ada di sekolah dari menu kelas seperti gambar dibawah.

Menambahkan konten untuk custom taxonomy

Menambahkan kelas (taxonomy) ini bisa juga langsung pada saat menambahkan siswa. Hasilnya kurang lebih seperti dibawah ini.

Menambahkan konten texonomy custom post type wordpress

Untuk membuat struktur hirarki, seperti contoh saya ingin membuat kelas 3A sebagai sub dari kelas 3, maka pilih parent kelas 3 (seperti gambar diatas) untuk sebelum menambahkan kelas 3A, jika salah bisa juga di edit untuk masing2 item kelas ini.

Untuk membuat top level kategori pilih NONE pada dropdown parent.

Menambahkan siswa baru

Sekarang kita input data siswa baru nya. Masuk ke menu Daftar Siswa > Tambah Siswa.

Menginput custom post type wordpress.

Masukan judul sebagai nama, keterangan, kelas dan foto siswa, Klik publish pada pojok kanan atas, lalu klik lihat siswa untuk melihat hasil tampilannya pada halaman depan website.

Hasil tampilan custom post type yang baru saja di buat.

Nah, tergantung dengan template yang anda pakai, hasil layout tampilan akan berbeda beda.

Sampai sini sudah selesai pembuatan custom post type. anda bisa membuat custom post type sebanyak mungkin sesuai dengan keperluan, seperti misalnya, Daftar barang, Daftar Armada, Daftar Portfolio dll.

Terkait dengan sekolahan anda bisa menambahkan misalnya data guru, data nilai, ekstrakulikuler, data administrasi dsb.

Yang kemudian layoutnya bisa anda sempurnakan dengan menggunakan visual builder sehingga lebih ciamik! ini artikel tentang visual builder


Pada artikel selanjutnya kita akan membuat custom field yang kemudian kita akan tambahkan pada custom post type. Jadi kurang lebih pada saat menginput data siswa, akan ada field (kolom) seperti, alamat, no telp, tgl lahir, dll.

Lihat artikelnya : Cara menambahkan custom field


Tags: custom post typecustom wordpresswebsite sekolah
Share33Tweet21Pin8SendSend

Related Posts

Membuat halaman archive custom pada WordPress

Membuat halaman archive custom pada WordPress

Mei 28, 2020
2k
cara-menampilkan-custom-field-pada-halaman-depan-website-wordpress

Cara menampilkan Advanced Custom Field pada halaman depan website

Mei 26, 2020
2k
Next Post
cover-artikel-tutorial-cara-menambahkan-custom-field-di-Wordpress

Cara menambahkan custom field pada custom post type di Wordpress

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Seri Tutorial:
List tutorial membuat website dari nol

Panduan Pemula

Tutorial Lengkap Cara Membuat Website Dengan WordPress Untuk Pemula (2020)

Penjelasan Fungsi Dasar & Fitur WordPress

Real Case Study: Menjadi Web Developer dalam sebulan – Part 1

Real Case Study: Menjadi Web Developer dalam sebulan – Part 2 (selesai)

Cara upload WordPress dari local host komputer ke server hosting.

Load More
  • Semua
  • Ngobrol Bisnis
  • Tips & Trick
cover-artikel-penjelasan-lengkap-fitur-woocommerce

Penjelasan fitur Woocomerce – Plugin toko online untuk wordpress

Mei 10, 2020
2k
Membuat halaman archive custom pada WordPress

Membuat halaman archive custom pada WordPress

Mei 28, 2020
2k
Cara Menjalankan WordPress Pada Komputer.

Cara Menjalankan WordPress Pada Komputer.

April 29, 2020
2k
cover-artikel-membuat-custom-post-type-wordpress

Custom fitur WordPress dengan custom post type

Mei 14, 2020
2k
Kelas Wordpress

© 2020 KelasWP.com
By DesainBagus.com

Navigate Site

  • Tentang Saya
  • Terms & Conditions
  • Privacy Policy
  • Kontak
  • Glossary

Follow Us

No Result
View All Result
  • Panduan Pemula
  • WordPress Tutorial
  • Tips & Trick
  • Bisnis

© 2020 KelasWP.com
By DesainBagus.com

Login to your account below

Forgotten Password?

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
Website ini menggunakan cookies, dengan menggunakan website anda menyatakan setuju Privacy and Cookie Policy.