Cara Membuat Plugin FAQ Sederhana untuk WordPress

Artikel ditulis oleh:
  • WordPress
  • Diperbarui: Feb 09, 2017

Kami telah melihat banyak sebelumnya kiat dan alat blogging. Nah, hari ini kita akan belajar cara membuat alat yang bagus untuk blog Anda - sebuah plugin halaman FAQ. Namun 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. Ayo mulai!

Ide, Demo & Unduh

demo

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

Tapi terlepas dari itu, pencapaian utama kami adalah pemahaman tentang WordPress jenis posting kustom, shortcode, interaksi dengan plugin JS / jQuery eksternal. Dengan ide ini Anda dapat membuat banyak hal berdasarkan plugin gila lainnya yang mungkin Anda temukan di sana, ini hanyalah titik awal untuk Anda, Sayang Padawan.

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

Oh, dan tentu saja Anda dapat menemukan file plugin untuk diunduh di sini juga sehingga Anda bisa menginstal di situs WP Anda.

Pemanasan - File Plugin dan Jenis Tulisan Kustom

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

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 kita membutuhkan sebuah plugin, tetapi mungkin Anda sudah akrab dengan konsep ini. Plugin seperti blok Lego untuk WordPress, mereka menambahkan atau mengubah fungsi saat ini menggunakan beberapa kode yang dapat dengan mudah dicolokkan (duh!) Atau juga dicabut jika Anda mau.

Untuk membuat plugin dengan cara WP mengenalinya, Anda perlu hal-hal 2:

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

Perlu diingat bahwa nama file harus unik jadi ketika seseorang menginstal plugin Anda (bahkan diri 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 bernama faq-whsr.php.

Sekarang untuk metada, cukup tambahkan sesuatu seperti ini di awal file plugin Anda (tepat setelah <? Php):

meta_01

Yang berarti:

  • Nama Plugin: Nama bagus yang akan ditampilkan di antarmuka plugin wp-admin Anda
  • Plugin URI: Jika Anda ingin menambahkan tautan ke halaman plugin Anda (dokumen, contoh, halaman penjualan)
  • Deskripsi: Yang ini adalah paragraf kecil yang ditampilkan di antarmuka plugin wp-admin Anda. Buat tetap sederhana sehingga pengguna akan mengingatnya untuk apa
  • Author / Author 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

01-plugin-dibuat

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, tidak ada apa-apa? Nah, itu hal yang baik, jika ada yang salah sekarang Anda akan melihat kesalahan. Mari kita lanjutkan ke pembuatan jenis pesan khusus 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: nama fungsi harus unik. Ulangi dengan saya sekarang: nama-nama fungsi harus unik, nama-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 arti bagian yang relevan:

  • $ labels - adalah larik dengan label dan teks untuk bagian berbeda dari area wp-admin Anda. Jadi WP akan tahu cara yang tepat untuk memanggil 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 yang taksonomi diizinkan (kategori, tag, atau taksonomi khusus)
  • register_post_type ('faq_whsr', $ args) - ini memberitahu WP "Hei, buat jenis posting kustom baru dengan ID sebagai faq_whsr menggunakan argumen dari $ args".

admin-faq

Simpan dan tahan napasmu. Anda akan melihat sekarang bagian baru di menu wp-admin utama Anda

Tunggu, itu dia? Ya. Cuplikan itu menciptakan seluruh fungsi CPT. Jika Anda tidak menemukan ini keren, tunggu hingga dingin di bagian selanjutnya.

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

Front-End - interaksi WP x jQuery

Sekarang saatnya untuk melihat beberapa tindakan dan kami akan menggunakannya Elemen jQuery UI Accordion untuk ini.

jQuery UI memiliki cukup banyak keuntungan yang sama dengan jQuery itu sendiri:

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

Pertanyaannya sekarang adalah: Bagaimana kita menyebutnya?

Ada pendekatan 2 untuk ini:

  1. Tag <script> / <style> murni yang 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 memberitahu WP “Hai sobat, kami akan memerlukan UI jQuery pada titik tertentu di kode kami, harap sertakan di halaman”. Dengan cara ini, WP dapat memeriksa apakah ada orang lain yang telah menyertakannya atau menyertakan versi yang berbeda dan menghindari banyak masalah dengan pustaka duplikat. Ok, bagaimana cara menerjemahkan obrolan yang bagus itu menjadi kode?

Menggunakan fungsi enqueue:

enqueue_02

Kode Pendek

Dan sekarang kita kembali ke admin-wp. Kami punya item FAQ, dan kami punya perpustakaan untuk menata barang-barang yang kami inginkan, apa lagi yang kurang? Kita harus memanggil barangnya!

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

  1. [melampirkan sendiri] - Seperti tag <hr /> atau <br /> jenis shortcode ini hanya memanggil fungsi di beberapa titik - ini adalah orang kita
  2. [dibungkus] Konten [/ dibungkus] - Yang ini seperti tag <p> </ p> atau <div> </ div> 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 apa-apa kan? Itu karena kita belum membuat fungsi untuk itu.

Tambahkan ini di file plugin Anda:

shortcode_02

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

Keren, ya? Sekarang Anda dapat melihat bahwa itu sedang berjalan dan langit adalah batas bagi Anda sekarang. Apa yang dilakukan oleh kode itu adalah memberitahu WP bahwa ada kode pendek yang disebut [faq-whsr] dan jika WP menemukannya, WP harus menjalankan fungsi pada titik halaman tersebut.

Dalam kasus kami, kami harus mencapai struktur ini untuk panel UI jQuery yang akan dibuat:

api_02

Dan untuk itu kami akan membuat WP Query, memuat item FAQ kami dan isinya. Ganti fungsi shortcode 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”]
  • pesanan - ASC atau DESC (DESC adalah default) [faq-whsr order = ”ASC”]
  • orderby - mengubah kriteria untuk memesan barang [faq-whsr orderby = ”title”]
  • posts_per_page - ubah jumlah item yang dimuat [faq-whsr posts_per_page = 5]

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

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

Sekarang giliranmu

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

  • Desain responsif
  • Pembuatan widget
  • Plugin mengaktifkan / menonaktifkan pengait
  • Internasionalisasi
  • OOP
  • Enqueue hanya jika diperlukan (untuk halaman tertentu)

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

Tentang Rochester Oliveira

Saya seorang desainer web dan pengusaha dari Itajubá (MG), Brasil. Saya suka menulis tentang topik yang tidak jelas dan melakukan beberapa hal keren.