Tutorial WordPress: Cara Membuat Plugin Testimonial

Artikel ditulis oleh:
  • WordPress
  • Diperbarui: Agustus 12, 2013

Jadi, di sini kami untuk tutorial mingguan kedua kami di WordPress. Kami telah belajar cara membuat situs WP bergulir tak terbatas & plugin page-flip di masa lalu. Hari ini kita akan belajar sedikit lebih banyak tentang jenis posting kustom, dan cara memuat data mereka.

Fitur ini sangat penting di situs Anda, karena memungkinkan Anda untuk menunjukkan orang-orang yang merekomendasikan Anda. Testimonial adalah bukti sosial yang luar biasa dari keangkeran Anda. Dan Anda tidak memerlukan plugin yang rumit atau banyak kode untuk mencapai ini, karena Anda akan melihat dengan beberapa file Anda dapat membuat presentasi seksi untuk testimonial Anda.

Mari kita mulai!

Zip & Pasang

Jika Anda sedang terburu-buru untuk memeriksa ini, Anda bisa Download dan menginstalnya.

Anda harus menambahkan beberapa data, dengan menambahkan beberapa testimonial menggunakan testimonial baru yang dapat Anda lihat di dashboard Anda:

daftar-testimonial

Kemudian Anda dapat menggunakan shortcode dasar untuk memuatnya:

[testimonial rand = 0 max = 5]

Ketika Anda menambahkan kode itu, Anda akan melihat sesuatu seperti ini di halaman Anda:

kesaksian utama

Sekarang kita akan melihat cara membuat dan menjelajahi ini (dengan menambahkan lebih banyak fungsi dan mengubah tampilan).

Dasar-dasar

Seperti yang kami katakan sebelumnya, Anda harus menambahkan tajuk metadata, buat file plugin dan panggil skrip Anda. Singkat cerita, Anda akan membuat folder baru di bawah wp-content / plugins dengan nama plugin Anda, lalu buat file dengan nama yang sama dengan folder untuk menjadi file plugin utama Anda.

Setelah Anda selesai menyalin dan menempel sebagai berikut:

<? php / * Nama Pengaya: Testimonial Deskripsi: Menampilkan testimonial pelanggan. Versi: 1.0 Penulis: Web Revenue Blog License: GPL2 * / // enqueueing script dan styles function plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('flexslider', plugins_url ('js / jquery.flexslider-min.js', __FILE__), array ('jquery'), '2.2', false); wp_enqueue_script ('testimonial', plugins_url ('js / testimonials.js', __FILE__), array ('jquery'), '1.0', false); wp_enqueue_style ('flexsliderCSS', plugins_url ('css / flexslider.css', __FILE__), false, '2.2', 'all'); wp_enqueue_style ('testimonialsCSS', plugins_url ('css / testimonials.css', __FILE__), false, '1.0', 'all'); } add_action ("wp_enqueue_scripts", "plugin_scripts");

Inilah yang kami lakukan:

  • Memberitahu WP apa nama plugin kami, pengarang, apa yang dilakukannya
  • Membuat fungsi, di mana kita memasukkan skrip biasa (seperti jQuery) dan skrip khusus (seperti flexslider), dan Stylesheet
  • Mengatakan kepada WP untuk memuat fungsi skrip dalam panggilan skrip default, sehingga mereka benar-benar dimuat di halaman

Semuanya sangat keren, tetapi jangan lupa untuk benar-benar membuat file di bawah / js dan / css. Anda dapat mengunduhnya dalam konten demo kami sehingga Anda tidak perlu banyak menggali untuk menemukan file flexslider.

Sekarang kita memiliki semua hal dasar di tempat kita dapat memulai bagian yang lucu.

Jenis Posting Kustom

Secara default, WordPress memiliki 2 jenis posting umum, halaman dan posting. Tetapi juga memiliki banyak jenis posting internal (seperti lampiran), sehingga definisi "tipe posting" adalah: Setiap jenis data yang perlu Anda simpan.

Karena plugin kami akan membuat fungsionalitas baru, WP tidak memiliki tempat bawaan untuk menyimpannya, jadi kami perlu membuatnya. Jangan takut belalang kecil, itu cukup sederhana, Anda dapat menggunakan kode ini:

// ilmu hitam untuk membuat fungsi tipe posting create_post_type () {register_post_type ('testimonials', // array tipe posting baru ('label' => array ('nama' => __ ('Testimonial'), 'singular_name' => __ ('Testimonial')), 'public' => true, / * Jenis posting ditujukan untuk penggunaan umum. Ini termasuk di ujung depan dan di wp-admin. * / 'Support' => array ('title ',' editor ',' thumbnail ',' custom_fields '),' hierarchical '=> false)); }

Di sini kami hanya menggunakan fungsi register_post_type () untuk memberi tahu kepada WP “Hai Buddy, kami perlu menyimpan data semacam ini, harap siap untuk menerimanya”.

Kami juga mengatakan kepadanya bahwa jenis data ini disebut "testimonial", itu harus tersedia untuk akses publik (jadi itu benar-benar membuat item menu baru di dashboard Anda untuk itu), bidang yang kita butuhkan di atasnya, dan jika itu hirarkis atau tidak (seperti halaman yang kami punya halaman orang tua dan anak).

Maka kita perlu menyebutnya setiap kali kita memuat WordPress. Hook ini akan melakukannya:

add_action ('init', 'create_post_type');

Bidang Khusus

Sekarang jenis pos khusus kami memiliki judul (nama orang), konten (testimonial seseorang), gambar (gambar unggulan) tetapi tidak memiliki tautan, karena jika orang tersebut cukup baik untuk berbicara tentang Anda, Anda setidaknya harus menautkan ke situs mereka, kan?

Kita bisa melakukan ini dengan bidang kustom biasa, tetapi jauh lebih baik untuk memiliki bidang "tertutup", di mana pengguna tidak perlu mengetik nama bidang, dan juga di mana Anda dapat menambahkan beberapa aturan validasi.

Pertama-tama kita perlu membuat metabox baru, yang merupakan panel bagus yang Anda miliki di area edit pos Anda, setiap panel kecil adalah sebuah metabox. Fungsi ini akan membuat dan memanggilnya:

// menambahkan fungsi bidang kotak meta URL add_custom_metabox () {add_meta_box ('custom-metabox', __ ('Link'), 'url_custom_metabox', 'testimonials', 'side', 'low'); } add_action ('admin_init', 'add_custom_metabox');

Fungsi add_meta_box () membutuhkan parameter ini:

  1. ID - Pengenal unik untuk itu. Anda dapat menggunakan sesuatu yang unik di sini seperti "unicorn-eating-rainbow" atau "testimonial-link". Apa saja yang bisa digunakan secara internal
  2. Judul - Apa yang akan ditampilkan untuk pengguna? Di sini penting untuk menggunakan fungsi __ (), itu adalah fungsi yang memungkinkan pengguna dari bahasa asing untuk menerjemahkan plugin Anda dengan file .po (tanpa mengedit file plugin)
  3. Callback - Fungsi di mana Anda memiliki isi sebenarnya dari metabox
  4. Jenis Posting - Dalam kasus kami, kami ingin terlihat hanya untuk testimonial
  5. Konteks - Di mana di halaman yang ingin Anda tunjukkan
  6. Prioritas - Jika harus sebelum barang-barang lain dari posisi yang sama atau setelah mereka

Sekarang kita perlu membuat fungsi url_custom_metabox (), karena kita sudah menyebutnya.

// HTML untuk fungsi admin area url_custom_metabox () {global $ post; $ urllink = get_post_meta ($ post-> ID, 'urllink', true); // memvalidasi! if (! preg_match ("/ http (s?): ///", $ urllink) && $ urllink! = "") {$ errors = "URL ini tidak valid"; $ urllink = "http: //"; } // output pesan URL yang tidak valid dan tambahkan http: // ke kolom input if (isset ($ errors)) {echo $ errors; }?> <p> <label untuk = "siteurl"> URL: <br /> <input id = "siteurl" size = "37" name = "siteurl" value = "<? php if (isset ($ urllink) ) {echo $ urllink;}?> "/> </label> </p> <? php}

Oke, sekarang terjemahkan ini ke bahasa Inggris biasa:

  • Postingan $ variabel global dipanggil, sehingga kita dapat mengetahui POSTID mana dari item saat ini
  • Kami memuat nilai saat ini untuk URL
  • Kami memvalidasi Jika nilai yang dimasukkan pengguna valid. Jika ada setidaknya satu “http” atau “https” kejadian nilainya OK, jika tidak valid dan kita perlu menggunakan nilai default
  • Lalu kami menunjukkan kesalahan, jika ada
  • Sekarang kita mulai HTML yang sebenarnya, menambahkan nilai default di bidang input seperti yang kita punya di PHP

Setelah titik ini kita harus benar-benar menyimpan apa yang sedang dikirim oleh pengguna. Kami akan menggunakan hook "save_post", jadi setiap kali WordPress menyimpan sebuah post, itu akan memanggil fungsi ini:

// simpan fungsi data bidang khusus save_custom_url ($ post_id) {global $ post; if (isset ($ _ POST ['siteurl'])) {update_post_meta ($ post-> ID, 'urllink', $ _POST ['siteurl']); }} add_action ('save_post', 'save_custom_url');

Di sini kami hanya memeriksa apakah ada data postingan bernama "sitelink" yang merupakan nama bidang kami. Jika ada tautan situs, mari kita simpan.

Setelah semuanya siap, di sini adalah bagaimana halaman testimonial baru Anda akan terlihat seperti:

kesaksian baru

Memuat Data Khusus kami

Sekarang kita harus benar-benar memuat barang-barang kita, dan kita akan menggunakan fungsi get_posts (), terutama karena kita hanya memiliki data sederhana sehingga kita tidak memerlukan loop WP yang tepat (yang akan menambah banyak panggilan DB dan kita benar-benar tidak tidak membutuhkannya).

Jadi, pertama mari buat fungsi untuk mendapatkan tautan situs kami, jika ada.

// kembalikan URL untuk fungsi posting get_url ($ post) {$ urllink = get_post_meta ($ post-> ID, 'urllink', true); kembalikan $ urllink; }

Sekarang, kita dapat memulai fungsi shortcode. Cara sederhana untuk menstandardkan dan memvalidasi data shortcode adalah membuat atribut untuk loop sebagai larik, sehingga kami dapat menambahkan item baru saat kami membutuhkannya, seperti ini:

// mendaftarkan kode pendek untuk menampilkan fungsi testimonial load_testimonials ($ a) {$ args = array ("post_type" => "testimonials"); if (isset ($ a ['rand']) && $ a ['rand'] == true) {$ args ['orderby'] = 'rand'; } if (isset ($ a ['max'])) {$ args ['posts_per_page'] = (int) $ a ['max']; } // mendapatkan semua testimonial $ postingan = get_posts ($ args); // HTML OUTPUT} add_shortcode ("testimonials", "load_testimonials");

Seperti yang Anda lihat, kami memiliki atribut shortcode yang dimuat dan dilewatkan ke array $ args ketika mereka memvalidasi, dalam format yang dibutuhkan WordPress, sehingga kami dapat memuat posting menggunakan mereka.

Sekarang kita perlu menambahkan beberapa kode HTML di sana, mengikuti struktur default flexslider. Di sini akan terlihat seperti:

gema '<div>'; gema '<ul>'; foreach ($ posting sebagai $ posting) {// mendapatkan gambar jempol $ url_thumb = wp_get_attachment_thumb_url (get_post_thumbnail_id ($ post-> ID)); $ link = get_url ($ post); gema '<li>'; if (! empty ($ url_thumb)) {echo '<img src = "'. $ url_thumb. '" />'; } echo '<h2>'. $ post-> post_title. '</h2>'; if (! kosong ($ post-> post_content)) {echo '<p>'. $ post-> post_content. '<br />'; } if (! kosong ($ link)) {echo '<a href="'.$link.'"> Kunjungi Situs </a> </p>'; } echo '</li>'; } echo '</ul>'; gema '</div>';

Tunggu, tapi mengapa kita membuat kode HTML di dalam fungsi PHP? Itu karena kita dapat secara kondisional memuat konten hanya jika pengguna telah menambahkan konten, sehingga Anda tidak akan memiliki tag HTML kosong, hanya menunggu untuk mengacaukan tata letak Anda.

Bagaimana dengan sidebar?

Kebanyakan orang hanya ingin menunjukkan testimonial di sidebar, dan plugin ini tidak akan berfungsi dengan baik karena widget teks tidak memproses shortcode. Ada solusi sederhana untuk ini, cukup tambahkan ini di kode Anda:

add_filter ('widget_text', 'do_shortcode');

Apa selanjutnya?

Jadi, apakah Anda menikmati tutorial ini? Apa yang akan Anda tambahkan sebagai opsi untuk shortcode kesaksian Anda? Apakah Anda punya ide untuk posting mendatang? Beri tahu kami menggunakan bagian komentar!

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.