Tutorial WordPress: Cara Membuat Plugin Testimonial

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


Fitur ini sangat penting di situs Anda, karena memungkinkan Anda untuk menunjukkan kepada orang-orang yang merekomendasikan Anda. Testimoni adalah bukti sosial yang luar biasa akan kedahsyatan Anda. Dan Anda tidak perlu plugin yang kompleks atau banyak kode untuk mencapai ini, seperti yang akan Anda lihat dengan beberapa file Anda dapat membuat presentasi seksi untuk testimonial Anda.

Mari kita mulai!

Zip & Install

Jika Anda terburu-buru untuk memeriksa ini, Anda dapat mengunduh dan menginstalnya.

Anda perlu menambahkan beberapa data kemudian, dengan menambahkan beberapa testimonial menggunakan testimonial baru yang dapat Anda lihat di dasbor:

daftar-testimonial

Kemudian Anda dapat menggunakan kode pendek dasar untuk memuat itu:

[testimonial rand = 0 maks = 5]

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

testimoni utama

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

Dasar

Seperti yang kami katakan sebelumnya, Anda harus menambahkan metadata header, membuat file plugin, dan memanggil skrip Anda. Singkatnya, Anda akan membuat folder baru di bawah konten / plugin wp Anda dengan nama plugin Anda, lalu membuat file dengan nama yang sama dengan folder untuk menjadi file plugin utama Anda.

Setelah selesai salin dan tempel itu sebagai berikut:

<?php
/ *
Nama Plugin: Testimonial
Deskripsi: Tampilkan testimoni pelanggan.
Versi: 1.0
Penulis: Blog Pendapatan Web
Lisensi: GPL2
* /

// skrip dan gaya enqueueing
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 ("skrip wp_enqueue_","plugin_scripts");

Inilah yang kami lakukan:

  • Memberitahu WP apa nama plugin kami, penulis, apa fungsinya
  • Membuat fungsi, tempat kami menyisipkan skrip biasa (seperti jQuery) dan skrip khusus (seperti flexslider), dan Stylesheets
  • Memberitahu WP untuk memuat fungsi skrip dalam panggilan skrip default, sehingga mereka akan benar-benar dimuat di halaman

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

Sekarang kita memiliki semua hal-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 ia juga memiliki banyak jenis posting internal (seperti lampiran), jadi definisi “tipe posting” adalah: Setiap jenis data yang Anda perlukan untuk menyimpan.

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

// ilmu hitam untuk membuat jenis posting
function create_post_type () {
register_post_type (
‘testimonial’, // jenis posting baru
Himpunan(
‘label’ => Himpunan(
‘nama’ => __ (‘Testimonial’),
‘singular_name’ => __ (‘Kesaksian’)
),
‘publik’ => true, / * Jenis posting ditujukan untuk penggunaan umum. Ini termasuk di ujung depan dan di wp-admin. * /
‘support’ => array (‘title’, ‘editor’, ‘thumbnail’, ‘custom_fields’),
‘hierarkis’ => Salah
)
);
}

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

Kami juga memberi tahu dia 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 kita punya halaman induk dan anak).

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

add_action (‘init’, ‘create_post_type’);

Bidang Kustom

Sekarang jenis kiriman khusus kami memiliki judul (nama orang), konten (kesaksian orang), gambar (gambar unggulan) tetapi tidak ada tautan, karena jika orang itu cukup baik untuk berbicara tentang Anda, setidaknya Anda harus menautkan ke situs mereka, benar?

Kami bisa melakukan ini dengan bidang khusus seperti biasa, tetapi jauh lebih baik untuk memiliki bidang “tertutup”, di mana pengguna tidak perlu mengetikkan nama bidang, dan juga tempat Anda dapat menambahkan beberapa aturan validasi.

Pertama-tama kita perlu membuat metabox baru, yaitu panel bagus yang Anda miliki di area edit posting Anda, setiap panel kecil adalah metabox. Fungsi ini akan membuat dan menyebutnya:

// menambahkan bidang URL kotak meta
function add_custom_metabox () {
add_meta_box (‘custom-metabox’, __ (‘Link’), ‘url_custom_metabox’, ‘testimonial’, ‘side’, ‘low’);
}
add_action (‘admin_init’, ‘add_custom_metabox’);

Fungsi add_meta_box () membutuhkan parameter ini:

  1. ID – Pengidentifikasi unik untuk itu. Anda dapat menggunakan sesuatu yang unik di sini seperti “unicorn-eating-rainbow” atau “testimonial-link”. Apa pun yang bisa digunakan secara internal
  2. Judul – Apa yang akan ditampilkan untuk pengguna? Di sini penting untuk menggunakan fungsi __ (), 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 konten sebenarnya dari metabox
  4. Jenis Posting – Dalam kasus kami, kami ingin hanya terlihat untuk testimonial
  5. Konteks – Di mana di halaman yang ingin Anda tunjukkan
  6. Prioritas – Jika harus sebelum item lain dari posisi yang sama atau setelah mereka

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

// HTML untuk area admin
function url_custom_metabox () {
$ pos global;
$ urllink = get_post_meta ($ post->ID, ‘urllink’, true);

// memvalidasi!
if (! preg_match ( "/ http (s?): ///", $ urllink) && $ urllink! = "") {
$ error = "URL ini tidak valid";
$ urllink = "http: //";
}

// output pesan URL yang tidak valid dan tambahkan http: // ke kolom input
if (isset ($ errors)) {echo $ errors; }
?>

URL:

<?php
}

Oke, sekarang terjemahkan ini ke Bahasa Inggris:

  • Variabel global $ post disebut, jadi kita bisa tahu mana POSTID dari item saat ini
  • Kami memuat nilai saat ini untuk URL
  • Kami memvalidasi Jika nilai yang dimasukkan pengguna valid. Jika setidaknya ada satu kejadian “http” atau “https” nilainya OK, jika tidak maka 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 dapatkan di PHP

Setelah titik ini kita harus benar-benar menyimpan apa yang dikirim oleh pengguna. Kami akan menggunakan kait “save_post”, jadi setiap kali WordPress menyimpan pos, ia akan memanggil fungsi ini:

// menyimpan data bidang khusus
function save_custom_url ($ post_id) {
$ pos global;

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 pos yang disebut “tautan situs” yang merupakan nama bidang kami. Jika ada tautan situs, mari kita simpan.

Setelah semuanya tersedia, berikut adalah tampilan halaman testimonial baru Anda:

kesaksian baru

Memuat Data Kustom kami

Sekarang kita harus benar-benar memuat item kita, dan kita akan menggunakan fungsi get_posts (), sebagian besar 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 (membutuhkannya).

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

// kembalikan URL untuk sebuah posting
function get_url ($ post) {
$ urllink = get_post_meta ($ post->ID, ‘urllink’, true);

kembalikan $ urllink;
}

Sekarang, kita dapat memulai fungsi kode pendek. Cara sederhana untuk default dan memvalidasi data kode pendek adalah membuat atribut untuk loop sebagai array, sehingga kami dapat menambahkan item baru sesuai kebutuhan, seperti ini:

// mendaftarkan kode pendek untuk menampilkan testimonial
function load_testimonials ($ a) {

$ args = array (
"post_type" => "testimonial"
);

if (isset ($ a [‘rand’]) && $ a [‘rand’] == true) {
$ args [‘orderby’] = ‘rand’;
}
if (isset ($ a [‘max’])) {
$ args [‘posts_per_page’] = (int) $ a [‘max’];
}
// dapatkan semua testimonial
$ posts = get_posts ($ args);

// OUTPUT HTML
}
add_shortcode ("testimonial","load_testimonials");

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

Sekarang kita perlu menambahkan beberapa kode HTML di sana, mengikuti struktur default flexslider. Begini tampilannya:

gema ”;
gaung

    ‘;

    foreach ($ posting sebagai $ posting) {
    // mendapatkan gambar jempol
    $ url_thumb = wp_get_attachment_thumb_url (get_post_thumbnail_id ($ post->INDO));
    $ link = get_url ($ post);
    gaung

  • ‘;
    if (! empty ($ url_thumb)) {echo ‘‘; }
    gaung

    $ post->post_title. ‘

    ‘;
    if (! kosong ($ post->post_content)) {echo ‘

    $ post->post_content. ‘
    ‘; }
    if (! empty ($ link)) {echo ‘Kunjungi Situs

    ‘; }
    gaung

  • ‘;
    }

    gaung

‘;
gema ”;

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

Bagaimana dengan sidebar?

Sebagian besar orang hanya ingin menampilkan testimonial di sidebar, dan plugin ini tidak akan berfungsi dengan baik karena widget teks tidak memroses shortcode. Ada solusi sederhana untuk ini, cukup tambahkan ini dalam kode Anda:

add_filter (‘widget_text’, ‘do_shortcode’);

Apa berikutnya?

Jadi, apakah Anda menikmati tutorial ini? Apa yang akan Anda tambahkan sebagai opsi untuk kode pendek testimonial Anda? Apakah Anda punya ide untuk posting selanjutnya? Beri tahu kami menggunakan bagian komentar!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map