Loncat ke Konten Utama

Cara membuat widget kustom pada WordPress

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Apakah Anda ingin membuat widget khusus di WordPress?

Widget memungkinkan Anda untuk menarik dan melepas item ke sidebar atau area widget yang siap di situs web Anda. Pada artikel ini, kami akan menunjukkan kepada Anda cara mudah membuat widget WordPress khusus.

Tetapi sebelumnya, jika Anda belum pernah menginstal WordPress temukan Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda

Lalu kembali ke mengapa kita ada di sini.

Apa itu widget WordPress?

Widget WordPress berisi potongan kode yang dapat Anda tambahkan ke sidebar situs web Anda atau ke area yang kompatibel dengan widget. Anggap saja sebagai modul yang dapat Anda gunakan untuk menambahkan elemen yang berbeda menggunakan antarmuka "Drag and Drop" yang sederhana.

Secara default, WordPress hadir dengan seperangkat widget standar yang dapat Anda gunakan dengan tema WordPress apa pun.

Temukan juga tema WordPress premium terbaik kami.

WordPress juga memungkinkan pengembang untuk membuat widget khusus mereka sendiri. Banyak tema dan plugin WordPress datang dengan widget khusus mereka sendiri yang dapat Anda tambahkan ke sidebar Anda.

Misalnya, Anda bisa menambahkan formulir kontak, formulir login kebiasaan atau galeri foto di bilah sisi tanpa menulis kode apa pun.

Yang mengatakan, mari kita lihat cara mudah membuat widget khusus Anda sendiri di WordPress.

Cara membuat widget kustom pada WordPress

Tutorial ini untuk orang-orang yang memiliki pengetahuan tentang pengembangan web.

Sebelum memulai, akan lebih baik untuk membuat plugin spesifik di situs web tempat Anda menempelkan kode widget untuk tutorial ini.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Anda juga dapat menempelkan kode ke file "functions.php" tema WordPress Anda. Namun, itu hanya akan tersedia ketika tema WordPress tertentu aktif.

Dalam tutorial ini, kita akan membuat widget sederhana yang hanya akan menyapa pengunjung. Lihatlah kode ini, lalu rekatkan ke plugin spesifik Anda untuk melihatnya beraksi.

// Daftar dan memuat fungsi widget wpb_load_widget () {register_widget ( 'wpb_widget'); } ADD_ACTIONsebagai ( 'widgets_init', 'wpb_load_widget'); // Membuat wpb_widget kelas widget meluas WP_Widget {function __construct () {parent :: __ construct (// Basis ID dari widget wpb_widget Anda '// nama Widget akan MUNCUL di IU __ (' PCB Widget '' wpb_widget_domain ') // deskripsi Widget array ( 'description' => __ ( 'Simple Widget WordPress', 'wpb_widget_domain'))); } // Membuat widget fungsi publik front-end widget ($ args, $ misalnya) {$ title = apply_filters ( 'widget_title' $ misalnya [ 'title']); // sebelum dan sesudah-widget argumen ditentukan oleh tema echo $ args [ 'before_widget']; if (! kosong ($ title)) echo $ args [ 'before_title']. $ Judul. $ Args [ 'after_title']; // ini Di mana Anda menjalankan kode dan menampilkan output gema __ ( 'Simple Widget', 'wpb_widget_domain'); echo $ args [ 'after_widget']; } // Widget Backend fungsi publik bentuk ($ misalnya) {if (isset ($ misalnya [ 'title'])) {$ title = $ misalnya [ 'title']; } Lain {$ title = __ ( 'title New', 'wpb_widget_domain'); ?} // bentuk admin Widget> <p> <label for = "<? Php echo $ this-> get_field_id ( 'title');>?"> <Php _e? ( 'Judul:'); ?> </ Label> <input class = "widefat" id = "? <Php echo $ this-> get_field_id ( 'title');?>"? Nama = "<Php echo $ this-> get_field_name ( 'title'? );?> "type =" text "value =" <php echo esc_attr ($ title);???> "/> </ p> <php} // memperbarui contoh widget Mengganti lama dengan yang baru pembaruan fungsi publik ($? new_instance, old_instance $) {$ misalnya = array (); $ Instance [ 'title'] = (! Kosong ($ new_instance [ 'title']))? strip_tags ($ new_instance [ 'title']): ''; kembali $ misalnya; }} // Kelas wpb_widget berakhir di sini

Setelah menambahkan kode, Anda harus pergi ke " Penampilan> Widget ". Anda akan melihat widget baru " PCB Widget Dalam daftar widget yang tersedia. Anda harus menarik dan melepas widget ini ke bilah sisi.

Sekarang dengan mengunjungi blog Anda, Anda akan melihat widget di bilah sisi tempat Anda menambahkan widget tersebut.

Sekarang mari kita lihat kode ini.

Pertama, kami merekam " wpb_widget Dan memuat widget khusus kami. Lalu kami menentukan apa yang widget ini lakukan dan bagaimana menampilkannya di dasbor.

Terakhir, kami menetapkan cara menangani perubahan yang dilakukan pada widget.

Sekarang, ada beberapa hal yang mungkin ingin Anda ketahui. Misalnya, apa tujuannya " wpb_text_domain "?

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

WordPress menggunakan "gettext" untuk mengelola terjemahan dan pelokalan. Jadi " wpb_text_domain "dan __e memberitahu gettext cara mengambil string terjemahan jika ada.

Jika Anda membuat widget khusus untuk tema WordPress Anda, Anda dapat mengganti "wpb_text_domain" dengan teks dari domain tema Anda.

Temukan juga beberapa plugin WordPress premium

Anda dapat menggunakan plugin WordPress lainnya untuk memberikan tampilan modern dan mengoptimalkan cengkeraman blog atau situs web Anda.

Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.

1. Galaxy Funder

Galaxy Funder adalah sistem crowdfunding yang dirancang untuk situs web WooCommerce dan kaya fitur. Menggunakan plugin WordPress premium Galaxy Funder Anda dapat mengelola situs web crowdfunding Anda sendiri atau menambahkan kampanye penggalangan dana di header toko online WooCommerce Anda.

Anda juga bisa menggunakan apa saja gateway pembayaran yang didukung oleh WooCommerce. Harap dicatat bahwa "Galaxy Funder" bekerja langsung di halaman e-shop, yang memfasilitasi proses input pengguna.

Download | Demo | Hébergement Web

2. Klik untuk Obrolan WhatsApp

Plugin WordPress premium Click to WhatsApp Chat memungkinkan pelanggan WordPress untuk dengan mudah terhubung dengan pemilik situs web atau dukungan pelanggan menggunakan akun WhatsApp mereka.

Cukup klik pada akun WhatsApp dan itu akan diarahkan langsung ke akun WhatsApp seluler dengan pesan default. Dan jika klien ada di desktop atau laptop, ia akan dialihkan ke WhatsApp Web.

Plugin ini membutuhkan jumlah dan waktu dan hari WhatsApp, yang akan digunakan oleh pemilik situs web atau tim dukungan untuk mengobrol. Tombol obrolan dapat ditambahkan ke halaman detail produk WooCommerce, yang terkait langsung dengan produk ini.

Download | Demo | Hébergement Web

3. Unduh Watermark Gambar

Ekstensi WordPress premium ini memungkinkan Anda untuk dengan mudah menambahkan tanda air ke gambar Anda Mudah Digital Downloads.watermark mudah-digital-file-download-gambar

Ces watermark dapat berupa gambar simbol hak cipta, a logo perusahaan, atau bagian dari citra merek sebagai gambar PNG transparan.

Download | Demo | Hébergement Web

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Sumber daya lain yang direkomendasikan

Kami juga mengundang Anda untuk berkonsultasi dengan sumber daya di bawah ini untuk melangkah lebih jauh dalam cengkeraman dan kontrol situs web dan blog Anda.

Kesimpulan

Voila! Itu saja untuk tutorial ini, saya harap ini akan memungkinkan Anda untuk membuat widget khusus di blog WordPress Anda. Jika sudah komentar atau saran, jangan ragu untuk memberi tahu kami di bagian yang disediakan.

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.

...

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
10 saham
saham8
menciak1
Register1