Days
Hours
Minutes
Seconds

Promo Grand Opening

15% OFF

Khusus Pelanggan Baru

Tutorial WordPress #6: Mengatur Widget WordPress untuk Meningkatkan Fungsionalitas

 

 

Selain menu navigasi, Widget adalah salah satu fitur paling fleksibel di WordPress yang memungkinkan Anda menambahkan konten dan fungsionalitas ekstra ke area-area tertentu di website Anda. Area-area ini biasanya adalah sidebar (bilah sisi) atau footer (kaki halaman), tergantung pada tema yang Anda gunakan.

Memahami dan mengelola widget akan membantu Anda mengoptimalkan tata letak website, menampilkan informasi penting, dan meningkatkan pengalaman pengunjung.

 

Apa itu Widget WordPress?

 

Widget adalah blok kecil fungsionalitas atau konten yang bisa Anda tambahkan ke area spesifik (widget area) di website Anda tanpa perlu menyentuh kode. Bayangkan widget seperti modul-modul kecil yang bisa Anda “pasang” di ruang kosong di website Anda.

Contoh widget yang umum:

  • Pencarian: Kotak pencarian untuk mencari artikel di situs Anda.
  • Pos Terbaru: Menampilkan daftar artikel terbaru Anda.
  • Kategori: Daftar kategori artikel Anda.
  • Arsip: Daftar arsip bulanan artikel.
  • Teks Kustom: Untuk menambahkan teks, HTML, gambar, atau video kustom.
  • Galeri: Menampilkan kumpulan gambar.

 

Lokasi Widget (Widget Area)

 

Lokasi widget sangat ditentukan oleh tema WordPress yang Anda gunakan. Beberapa tema mungkin memiliki:

  • Sidebar Utama: Bilah sisi di sebelah kiri atau kanan konten utama.
  • Sidebar Kedua: Kadang ada tema yang punya dua sidebar.
  • Area Footer: Biasanya dibagi menjadi beberapa kolom di bagian bawah halaman.
  • Header: Beberapa tema memungkinkan widget di area header.
  • Area Khusus Lainnya: Tergantung desain tema (misalnya, di bawah postingan, di halaman kontak).

 

Langkah 1: Akses Halaman Widget di Dashboard WordPress

 

Mari kita mulai dengan mengakses halaman pengaturan widget.

  1. Login ke Dashboard WordPress: Masuk ke area admin Anda (contoh: http://localhost/namaproject/wp-admin).
  2. Buka Halaman Widget: Di menu navigasi sebelah kiri, arahkan kursor ke Tampilan (Appearance) lalu klik Widget (Widgets).

Anda akan melihat antarmuka widget. Tampilan ini mungkin sedikit berbeda tergantung versi WordPress Anda (Editor Blok Gutenberg untuk Widget atau Classic Widget). Kita akan fokus pada versi modern dengan Editor Blok.

 

Langkah 2: Memahami Antarmuka Widget (Editor Blok)

 

Antarmuka widget modern di WordPress (Gutenberg) mirip dengan editor postingan.

  • Panel Kiri: Berisi daftar semua blok yang bisa Anda gunakan sebagai widget (Paragraf, Gambar, Pos Terbaru, Kategori, HTML Kustom, dll.).
  • Panel Kanan: Berisi daftar Area Widget yang tersedia di tema Anda (misalnya, “Sidebar Utama”, “Footer Kolom 1”, “Footer Kolom 2”).

 

Langkah 3: Menambahkan Widget ke Area Widget

 

Ada beberapa cara untuk menambahkan widget:

 

Opsi 1: Menarik dan Melepas (Drag and Drop)

 

Ini adalah cara paling intuitif.

  1. Di panel kiri, cari blok (widget) yang ingin Anda tambahkan, misalnya “Pos Terbaru” (Latest Posts).
  2. Klik dan tahan blok tersebut, lalu seret ke salah satu Area Widget di panel kanan (misalnya, “Sidebar Utama”).
  3. Lepaskan mouse Anda. Blok akan otomatis ditambahkan ke area tersebut.

 

Opsi 2: Mengklik Tombol Tambah Blok

 

  1. Di panel kanan, di bawah nama Area Widget yang ingin Anda tambahkan (misalnya, “Sidebar Utama”), klik ikon + (Tambah Blok).
  2. Jendela pop-up akan muncul menampilkan daftar blok. Cari dan klik blok yang Anda inginkan (misalnya, “Kategori”).
  3. Blok akan ditambahkan ke area tersebut.

 

Langkah 4: Mengatur Pengaturan Widget

 

Setiap widget memiliki pengaturannya sendiri.

  1. Setelah widget ditambahkan ke area widget, klik pada widget tersebut.
  2. Anda akan melihat opsi-opsi pengaturan yang relevan untuk widget tersebut. Misalnya:
    • Untuk widget “Pos Terbaru”: Anda bisa mengatur judul (misalnya “Artikel Terbaru”), jumlah pos yang ingin ditampilkan, apakah akan menampilkan tanggal pos, dll.
    • Untuk widget “Kategori”: Anda bisa mengatur judul, apakah akan menampilkan sebagai dropdown, menampilkan jumlah pos per kategori, dll.
    • Untuk widget “Teks” atau “HTML Kustom”: Anda bisa mengetikkan teks, HTML, atau kode embed (misalnya, kode untuk peta Google Maps lokasi Anda di Malang, Jawa Timur).

 

Langkah 5: Mengubah Urutan dan Menghapus Widget

 

  • Mengubah Urutan: Untuk mengubah urutan widget di dalam satu area widget, klik widget yang ingin dipindahkan. Anda akan melihat panah atas dan bawah untuk menggeser posisinya, atau Anda bisa drag and drop widget tersebut.
  • Menghapus Widget: Klik widget yang ingin dihapus, lalu klik ikon tiga titik vertikal (…) dan pilih “Hapus [Nama Widget]” (Remove [Widget Name]).

 

Langkah 6: Menyimpan Perubahan

 

Setelah Anda selesai menambahkan, mengatur, dan mengubah urutan widget, sangat penting untuk menyimpan perubahan.

  1. Di pojok kanan atas halaman widget, klik tombol “Perbarui” (Update).

Setelah disimpan, Anda bisa mengunjungi website Anda (misalnya: http://localhost/namaproject) dan melihat bagaimana widget-widget baru Anda tampil di sidebar atau footer.

 

Tips Penting untuk Menggunakan Widget:

 

  • Jangan Berlebihan: Terlalu banyak widget bisa membuat website terlihat ramai dan lambat. Pilih widget yang benar-benar memberikan nilai tambah.
  • Relevansi: Pastikan widget yang Anda gunakan relevan dengan konten dan tujuan website Anda.
  • Mobile-Friendly: Ingat bahwa di perangkat seluler, sidebar seringkali muncul di bawah konten utama. Pastikan tampilan tetap bagus.
  • Eksplorasi Tema: Setiap tema memiliki area widget yang berbeda. Luangkan waktu untuk menjelajahi di mana saja Anda bisa menempatkan widget.
  • Plugin Widget: Ada banyak plugin WordPress yang menawarkan widget tambahan dengan fungsionalitas khusus, seperti widget cuaca, feed media sosial, atau formulir langganan email.

Dengan menguasai penggunaan widget, Anda bisa menambahkan sentuhan personal dan fungsionalitas yang kuat ke website WordPress Anda tanpa perlu keahlian coding. Selamat bereksperimen!

Wawasan Terbaru

Gemini_Generated_Image_wfw5uwwfw5uwwfw5
Mengenal Dunia Grafis: Dari Piksel Hingga Vektor, Kekuatan Visual di Era Digital
Gemini_Generated_Image_b6dimfb6dimfb6di
Mengenal Foundation: Kerangka Kerja Front-End Profesional untuk Web Responsif
Gemini_Generated_Image_sx3ztpsx3ztpsx3z
CSS
Mempercantik Website dengan CSS: Seniman di Balik Tampilan Web 🎨
Gemini_Generated_Image_e013qke013qke013
Mengenal HTML: Fondasi dari Setiap Halaman Website 🌐
Gemini_Generated_Image_ldki4nldki4nldki
Menyelami Dunia Coding: Seni Berbicara dengan Komputer
Gemini_Generated_Image_dpvliydpvliydpvl
Menguasai GIT: Fondasi Penting dalam Dunia Pengembangan Perangkat Lunak
Gemini_Generated_Image_sqcib9sqcib9sqci
Tutorial Python #12: Mengenal Jenis-jenis Operator dalam Python
Gemini_Generated_Image_o1bw3do1bw3do1bw
Memahami Tipe Data Dictionary dalam Python
Gemini_Generated_Image_ko4ixfko4ixfko4i
Mengenal Tipe Data Set dalam Python
Gemini_Generated_Image_1xop7m1xop7m1xop
Tuple dalam Python: Pengenalan dan Tutorial

Wawasan Serupa

Gemini_Generated_Image_u1aykyu1aykyu1ay
Gemini_Generated_Image_invv2pinvv2pinvv
Gemini_Generated_Image_hscy64hscy64hscy
Gemini_Generated_Image_mdpiyomdpiyomdpi

Ceritakan Detail Proyekmu

Mulai dari 30K aja, solusi IT kamu langsung jalan tanpa drama.

Kata Mereka Tentang Solusi Coding

Dipercaya oleh lebih dari 200++ client untuk menyelesaikan proyeknya dengan total 250++ proyek dari berbagai jenis proyek