Kami telah melihat banyak tips dan alat blogging sebelumnya. Nah, hari ini kita akan belajar cara membuat alat yang bagus untuk blog Anda – sebuah plugin halaman FAQ. Tetapi yang terpenting bukan hanya plugin itu sendiri, tetapi apa yang dapat Anda lakukan dengan prinsip ini. Anda akan belajar cara menyimpan semua jenis data di situs WP Anda dan bagaimana mengintegrasikannya dengan perpustakaan eksternal (seperti jQuery UI) membuat komponen khusus untuk situs Anda. Mari kita mulai!


Ide, Demo & Unduh

demo

Tujuan kami di sini adalah membuat plugin yang dapat digunakan untuk banyak hal, tetapi sangat cocok untuk halaman FAQ.

Namun terlepas dari itu, pencapaian utama kami adalah memahami jenis posting khusus WordPress, shortcode, interaksi dengan plugin JS / jQuery eksternal. Dengan ide ini Anda dapat membuat banyak hal berdasarkan plugin gila lain yang mungkin Anda temukan di sana, ini hanya titik awal untuk Anda, Sayang Padawan.

Jadi di sini Anda dapat menemukan demo API jQuery untuk komponen yang akan kami gunakan – tetapi hal yang sangat keren adalah kode yang digunakan untuk menghasilkan komponen itu (PHP).

Pemanasan – File plugin dan Jenis Posting Kustom

Pertama-tama kita perlu membuat jenis posting khusus untuk menyimpan data kita.

Jenis Posting Khusus adalah bagian besar dari sihir WP, memungkinkan Anda untuk membuat tipe data baru (seperti posting, halaman, lampiran ..) sehingga dapat dipanggil dan dimanipulasi menggunakan fungsi WP. Ini mungkin terlihat sederhana untuk pemula tetapi hanya para programmer PHP yang sudah lama (apakah itu masih berarti?) Tahu betapa sulitnya hanya dengan menghubungkan dan menyimpan data dalam DB Anda. Apalagi secara dinamis membuat tipe data baru, ini halus tetapi memungkinkan fleksibilitas besar dalam kode kami.

Bagi kami untuk memiliki ini, kami memerlukan plugin, tetapi mungkin Anda sudah akrab dengan konsep ini. Plugin seperti Lego blok untuk WordPress, mereka menambah atau mengubah fungsi saat ini menggunakan beberapa kode yang dapat dengan mudah dicolokkan (duh!) Atau juga dicabut jika Anda ingin.

Untuk membuat plugin dengan cara yang dikenali WP, Anda memerlukan 2 hal:

  1. Buat file di dalam wp-content / plugins Anda /
  2. Tambahkan metadata di awal file itu sehingga WP dapat mengerti tentang apa itu

Perlu diingat bahwa nama file harus unik sehingga ketika seseorang memasang plugin Anda (bahkan Anda sendiri) tidak akan ada konflik dengan plugin saat ini. Dalam kasus kami untuk organisasi yang lebih baik, kami akan menambahkan folder baru dengan nama faq-whsr, dan di dalamnya ada file yang disebut faq-whsr.php.

Sekarang untuk metada, cukup tambahkan sesuatu seperti ini di awal file plugin Anda (setelahnya <?php):

meta_01

Yang berarti:

  • Nama Plugin: Nama yang bagus yang akan ditampilkan di wp-admin Anda > antarmuka plugin
  • Plugin URI: Jika Anda ingin menambahkan tautan ke halaman plugin Anda (dokumen, contoh, halaman penjualan)
  • Deskripsi: Yang ini adalah paragraf kecil yang ditunjukkan di wp-admin Anda > antarmuka plugin. Tetap sederhana sehingga pengguna akan mengingat untuk apa itu
  • Penulis / Penulis URI: Orang / perusahaan yang membuat plugin dan tautan untuk kredit
  • Lisensi: Jadi pengguna akan tahu apa yang bisa / tidak bisa mereka lakukan dengan plugin Anda

Oke, sekarang plugin kita sudah dibuat, ditambahkan beberapa metadata yang relevan. Segera setelah Anda menyimpan file plugin Anda, Anda akan dapat melihatnya di antarmuka wp-admin Anda

Mari kita aktifkan dan lihat apa yang terjadi.

Tunggu apa-apa? Nah, itu hal yang baik, jika ada yang salah saat ini Anda akan melihat kesalahan. Mari kita beralih ke pembuatan jenis pos kustom kami sekarang.

Dalam kasus kami, CPT adalah item FAQ, tetapi Anda dapat membuat buku, video, testimonial, dan sebagainya. Hal penting yang perlu diingat di sini adalah: fungsi nama harus unik. Ulangi dengan saya sekarang: nama fungsi harus unik, nama fungsi harus unik. Oke? Bagus ini akan menghemat banyak masalah sampai kita dapat menggunakan OOP (mungkin di tutorial berikutnya).

Sihir dilakukan dengan kode ini:

cpt

Dan inilah yang dimaksud bagian yang relevan:

  • $ label – adalah array dengan label dan teks untuk bagian berbeda dari area wp-admin Anda. Jadi WP akan tahu cara yang tepat untuk memanggil barang-barang kami
  • mendukung – ini memberitahu Anda apa yang dapat Anda lihat di wp-admin > Faq > layar baru. Dalam kasus kami, kami akan memiliki judul, editor (kotak konten utama), penulis, revisi, dan bidang khusus (jika Anda menginginkannya).
  • taksonomi – di sini Anda memberi tahu WP taksonomi mana yang diizinkan (kategori, tag, atau taksonomi khusus)
  • register_post_type (‘faq_whsr ‘, $ args) – ini memberitahu WP“ Hai, buat tipe posting kustom baru dengan ID sebagai faq_whsr menggunakan argumen dari $ args ”.

Simpan dan tahan nafas Anda. Anda seharusnya melihat bagian baru di menu wp-admin utama Anda

Tunggu, itu saja? Ya. Cuplikan itu menciptakan seluruh fungsionalitas CPT. Jika Anda tidak menemukan ini keren, tunggu sampai dingin di bagian berikutnya.

Sebelum kita meninggalkan wp-admin, tambahkan beberapa data dummy (beberapa faq dengan setidaknya 2 kategori).

Front-End – interaksi WP x jQuery

Sekarang akhirnya saatnya untuk melihat beberapa tindakan dan kami akan menggunakan elemen Akordeon jQuery UI untuk ini.

jQuery UI memiliki kelebihan yang hampir sama dengan jQuery itu sendiri:

  • Banyak pengembang yang mengerjakannya
  • Kode lintas-browser dan siap-seluler
  • Didokumentasikan dengan baik
  • Berperan baik dengan WP (WP sendiri menggunakannya)

Pertanyaannya sekarang adalah: Bagaimana kita menyebutnya?

Ada 2 pendekatan untuk ini:

  1. Tag murni / buruk di wp_head Anda
  2. Wp_enqueue yang bagus

Kami tidak akan kehilangan terlalu banyak waktu dengan pendekatan yang salah hari ini, tetapi yang baik pada dasarnya memberi tahu WP “hei sobat, kita perlu jQuery UI di beberapa titik dalam kode kita, harap sertakan di halaman”. Dengan cara ini WP dapat memeriksa apakah ada orang lain yang sudah memasukkannya atau menyertakan versi yang berbeda dan menghindari banyak masalah dengan perpustakaan yang digandakan. Oke, bagaimana menerjemahkan obrolan yang bagus itu ke dalam kode?

Menggunakan fungsi enqueue:

enqueue_02

Kode Pintas

Dan sekarang kita kembali ke admin-wp. Kami punya item FAQ, dan kami punya perpustakaan untuk mendesain item seperti yang kita inginkan, apa lagi yang hilang? Yah, kita perlu menelepon barang-barang!

Kami memiliki banyak opsi untuk ini, tetapi yang paling mudah untuk kasus ini adalah membuat kode pendek. Shortcode adalah sesuatu yang Anda tambahkan di bidang konten Anda (untuk halaman, posting, CPT …) dan WP akan benar-benar mencari fungsi untuk menjalankannya. Ada 2 jenis kode pendek:

  1. [melampirkan sendiri] – Suka tag atau
    kode pendek semacam ini hanya memanggil fungsi di beberapa titik – ini adalah orang kita
  2. [dibungkus] Konten [/ dibungkus] – Yang ini seperti tag

    atau dan benar-benar dapat mengubah isinya, atau menggunakan konten sebagai argumen.

Mari kita lihat cara kerjanya. Buat halaman baru di admin-wp Anda dan tambahkan kode ini di sana:

[faq-whsr]

Simpan dan kunjungi halaman itu dan lihat apa yang terjadi …

Hanya bercanda, itu tidak akan melakukan hal yang benar? Ya, itu karena kami belum membuat fungsi untuk itu.

Tambahkan ini di file plugin Anda:

shortcode_02

Sekarang segarkan halaman Anda dan saya berjanji akan terjadi sesuatu yang sangat keren.

Keren ya Sekarang Anda dapat melihat bahwa itu sedang berjalan dan langit adalah batas untuk Anda sekarang. Apa yang dilakukan kode itu hanyalah memberi tahu WP bahwa ada kode pendek yang disebut [faq-whsr] dan jika WP menemukannya, WP harus menjalankan fungsi di titik halaman tersebut.

Dalam kasus kami, kami harus mencapai struktur ini agar panel jQuery UI dibuat:

api_02

Dan untuk itu kami akan membuat Kueri WP, muat item FAQ kami dan isinya. Ganti fungsi kode pendek dengan yang ini:

shortcode-basic_02

Oke, sekarang item FAQ Anda akan dipanggil. Apa yang kami lakukan adalah memanggil wp_query untuk memanggil tipe posting khusus kami, dan meneruskannya ke shortcode return sehingga WP akan menampilkan semuanya mengikuti struktur yang diinginkan.

Itu bagus tapi ada sesuatu yang hilang, kan? Bagaimana dengan beberapa opsi di sana? Baiklah, kita dapat menambahkan opsi untuk kode pendek, mari kita lihat cara membuat beberapa argumen WP_Query dalam kode pendek kami:

shortcode-final_02

Dengan cara ini Anda dapat memanggil item menggunakan argumen berikut (Anda dapat menggabungkan sebanyak yang Anda inginkan):

  • cat – ID kategori (beberapa ditambahkan sebagai larik) [faq-whsr cat = 1]
  • category_name – nama kategori [faq-whsr category_name = ”makanan”]
  • order – ASC atau DESC (DESC default) [faq-whsr order = ”ASC”]
  • orderby – ubah kriteria untuk memesan barang [faq-whsr orderby = ”judul”]
  • posts_per_page – mengubah jumlah item yang dimuat [faq-whsr posts_per_page = 5]

Tapi seperti yang saya katakan, langit adalah batas untuk Anda teman saya. Berikut adalah beberapa opsi untuk WP_Query yang dapat Anda terapkan dan gunakan:

  • Penulis
  • Kategori (menambahkan opsi kecualikan dengan not_in)
  • Cari (keren jika Anda ingin memberi pengguna kemampuan untuk mencari melalui mereka)
  • Bidang Kustom (karena item FAQ memilikinya, Anda dapat menggunakannya untuk memuat item dengan bidang dan nilai khusus tertentu)

Sekarang giliranmu

Ini hanya titik awal bagi Anda, seperti yang Anda lihat. Kita semua dapat mempelajari banyak hal keren lainnya untuk meningkatkan plugin sederhana ini, berikut adalah beberapa saran untuk Anda gali lebih dalam:

  • Desain responsif
  • Pembuatan widget
  • Plugin mengaktifkan / menonaktifkan kait
  • Penginternasionalan
  • OOP
  • Enqueueing hanya jika diperlukan (untuk halaman tertentu)

Jangan lupa untuk meninggalkan pemikiran Anda di komentar! Dan inilah tantangan kami untuk Anda: Apakah mungkin untuk Anda menerapkan opsi “item default” untuk kode pendek (jadi ketika halaman dimuat item lain akan terbuka, itu bukan yang pertama)? Bagaimana Anda melakukannya??

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me