Lompat ke konten
Anda disini: M Jurnal » WordPress » Cara Menambahkan Widget di WordPress + Pemahaman Dasar

Cara Menambahkan Widget di WordPress + Pemahaman Dasar

Cara Menambahkan Widget di WordPress

Ketika menyesuaikan desain website WordPress (baik itu menambahkan logo, menyesuaikan tata letak dll), Anda pasti akan menemukan yang namanya Widget.

Jika Anda sudah lama dan terbiasa membangun website WordPress, tentu sudah tidak asing lagi dengan Widget ini.

Namun jika ini pertama kalinya Anda menggunakan WordPress, jangan khawatir…

Panduan ini lah jawabannya…

Saya akan bahas tentang apa itu widget, kegunaannya, hingga cara menambahkan, mengubah dan menghapus widget WordPress…

Penting! Sebelum melanjutkan, pastikan Anda sudah memahami cara penggunaan dasar dari menu-menu yang ada di dashboard WordPress. Jika belum, silahkan pelajari SUB-BAB Cara Menggunakan WordPress.

Apa itu Widget WordPress ?

Widget adalah sebuah elemen tertentu yang bertujuan untuk mendapatkan interaksi pengguna seperti mengunjungi artikel terbaru, melihat produk terbaru, hingga form untuk berlangganan Newsletter.

Umumnya widget bisa ditempatkan pada bagian sidebar, footer maupun header. Misalnya, ini contoh widget untuk sidebar kanan untuk website M Jurnal:

Apa itu Widget di WordPress ?

Lihat, disisi kanan halaman ada beberapa elemen seperti:

  1. Iklan (bisa Anda temukan selama Saya tidak mengubah posisi iklan ini).
  2. Konten Terbaru.
  3. Gambar dengan Link menuju Forum M Jurnal.
  4. dan seterusnya…

Silahkan terus scroll kebawah, dan Anda akan melihat berbagai macam widget yang Saya gunakan. Nah, setiap elemen elemen ini lah yang disebut dengan widget.

Note: Penempatan widget akan tergantung dengan theme yang Anda gunakan.

Ada theme yang menyediakan 2 sidebar (kiri dan kanan). Anda bisa menempatkan widget untuk ke 2 sidebar ini. Beberapa theme juga menyediakan penempatan widget dibagian Header dan Footer.

Bahkan ada juga yang menyediakan widget khusus untuk halaman hasil pencarian internal website, hingga widget khusus untuk halaman produk (biasanya tersedia untuk website E-Commerce).

Penting! Jika Anda bertujuan membuat Website Toko Online, lebih baik ikuti Panduan WooCommerce M Jurnal.

sponsored-jd-sport

Pahami Widget – Widget Default WordPress

Pada dasarnya, ada 17 jenis widget default dari WordPress yang memiliki fungsi sebagai berikut:

WidgetFungsi
ArsipMenampilkan postingan per bulan / total artikel dalam setiap bulan.
AudioUntuk menambahkan pemutar audio tertentu.
CariSebuah Form Pencarian internal Website.
GaleriMenampilkan beberapa gambar dalam bentuk galeri.
GambarMenampilkan gambar tertentu.
HTML KhususUntuk menambahkan kode HTML khusus (wajib memahami penggunaan HTML dasar).
KalenderMenampilkan sebuah kalender sebagai informasi tanggal postingan artikel Anda.
KategoriMenampilkan daftar / dropdown kategori postingan Anda.
Komentar TerbaruMenampilkan daftar komentar terbaru.
LamanMenampilkan daftar Halaman.
Menu NavigasiMenampilkan menu navigasi khusus.
MetaUntuk menampilkan Tautan log masuk, RSS, & WordPress.org.
Pos-pos TerbaruMenampilkan daftar postingan / artikel terbaru.
RSSUntuk menampilkan entri RSS atau Atom feed
Tag CloudUntuk menampilkan daftar tag postingan.
TeksMemungkinkan Anda membuat konten khusus menggunakan editor teks (bisa berupa kode HTML).
VideoUntuk menampilkan video (bisa dari pihak ke 3 seperti Youtube).
Tabel: Jenis Widget Default WordPress.

Note: Saya yakin Anda hanya membutuhkan sebagian dari widget default WordPress ini. Apalagi sebagian besar dari widget default ini memiliki desain yang biasa-biasa saja dan tergantung theme.

Namun, apabila widget yang Anda butuhkan tidak tersedia, maka Anda bisa menggunakan plugin tambahan. Ada banyak plugin-plugin yang tersedia.

Atau…

Maksimalkan penggunaan widget WordPress menggunakan HTML, CSS dan Javascript.

Tentu saja ini bisa membantu Anda menambahkan widget yang lebih bervariasi dengan HTML, membuat desain jadi lebih keren dengan CSS, serta menggunakan fungsi tertentu dengan Javascript (misalnya sticky widget).

Sementara jika Anda masih baru belajar WordPress, abaikan dahulu opsi-opsi tersebut (plugin, HTML, CSS, dan Javascript).

Semua akan kita pelajari secara bertahap…

Ada baiknya pelajari dahulu bagaimana cara menambahkan widget di Website WordPress…

Cara Menambahkan Widget di Website WordPress

Note: Berhubung contoh website yang Saya jadikan patokan dalam Serial Panduan WordPress M Jurnal menggunakan theme Astra, jadi untuk hasil desain dan penggunaan widget akan mengikuti theme tersebut.

Untuk menambahkan widget di WordPress, silahkan ikuti tahap-tahap berikut:

  1. Login ke Dashboard Admin WordPress.
    Login Dashboard Admin WordPress
    Cara login dashboard Admin WordPress umumnya menggunakan URL https://namadomain.com/wp-admin/. Panduan selengkapnya bisa Anda pelajari pada SUB-BAB Login Dashboar WordPress.
  2. Buka Menu Widget.
    Silahkan arahkan kursor ke menu Tampilan atau Apperance, kemudian klik Widget.
    Cara menambahkan widget di Website WordPress
  3. Pilih Widget.
    Akan ada 2 sisi berbeda. Sisi kiri (lingkaran biru) adalah jenis-jenis widget yang tersedia. Sedangkan sisi kanan (lingkaran merah) adalah penempatan widget yang tersedia untuk theme website Anda.
    Pilih Widget
    Silahkan pilih widget yang ingin ditampilan. Misalnya untuk widget “Cari”. Klik icon panah kebawah disamping widget tersebut.
  4. Tentukan Penempatan Widget.
    Pada bagian ini, Anda bisa memilih penempatan widget. Misalnya Saya pilih Main Sidebar. Kemudian klik Tambahkan Widget.
    Tentukan Penempatan Widget
  5. Buat Judul Widget (Optional).
    Setiap widget bisa memiliki judul. Jika ingin menambahkan judul, maka tambahkan pada Kolom “Judul”.
    Buat Judul Widget
    Jika sudah melakukan perubahan, klik Simpan untuk Konfirmasi.

Untuk melihat seperti apa tampilan widget Anda, silahkan buka halaman yang menampilkan widget tersebut.

Penting! Pada SUB-BAB Template (lihat Pintasan Panduan) sudah Saya jelaskan bahwa Anda bisa mengatur jenis halaman apa saja yang akan menampilkan sidebar dan yang tidak (Full Content).

Perbedaan Widget dengan judul dan tanpa judul

Pada gambar diatas, Saya menggunakan 2 buah widget pencaraian. Yang pertama menggunakan judul widget dan yang ke 2 tidak menggunakan judul. Terlihat perbedaannya bukan ?

Beruntungnya, Anda bisa Menambahkan Widget dengan Live Preview.

Dengan live preview, Anda bisa melihat seperti apa tampilan widget sebelum mempublikasikannya.

Caranya juga mudah… Pada dashboard Admin WordPress, silahkan klik menu Tampilan > Sesuaikan. Setelah selesai loading, cari menu Widget kemudian pilih penempatan Widget mana yang akan disesuaikan. Tampilannya akan seperti ini:

Ubah desain dengan live preview

Silahkan desain sesuka hati…

Note: Yang terpenting, selama Anda belum klik Terbitkan, maka perubahan apapun tidak akan dipublikasikan.

Cara Mengubah Posisi dan Menghapus Widget WordPress

Nah, mengubah posisi widget juga gampang… Anda bisa melakukannya melalui dashboard admin (manual) atau melalui live preview.

Cukup klik-tahan drag-and-drop. Misalnya, untuk memindahkan widget pertama menjadi urutan ke dua. Silahkan klik-tahan drag-and-drop widget pertama ke setelah widget ke dua seperti ini:

Mengubah urutan widget dalam sidebar WordPress

Untuk menghapus widget juga mudah. Silahkan klik ikon pahan ke bawah pada widget yang akan dihapus. Kemudian klik singkirkan dan widget ini akan menyingkir sampai Anda menambahkannya kembali.

Cara menghapus Widget WordPress

Yang perlu diingat ketika menggunakan live preview… Perubahaan apapun tidak akan dipublikasikan sebelum Anda klik tombol Terbitkan

Kemudian yang menjadi pertanyaan…

Widget apa yang sebaiknya Kita gunakan ?

Untuk menjawab pertanyaan ini, akan Saya bahas khusus pada SUB-BAB Optimasi Widget. Silahkan gunakan pintasan Panduan berikut:

Pintasan Panduan Desain dan Tampilan WordPress

SUB-BAB Sebelumnya: Membuat Link Satu Halaman.

  1. Template: 3 Cara install Tema WordPress dan mengganti tampilan website.
  2. Favicon & Logo: Cara menambahkan Logo dan Favicon (Icon) di WordPress.
  3. Menu: Cara membuat menu dan dropdown sub menu website WordPres.
  4. Header: Cara mengubah desain header theme WordPress + Contoh Real Website Demo.
  5. Content & Sidebar: Mengatur Area Konten dan Sidebar WordPress + 4 Tips Optimasi Sidebar.
  6. Footer: Cara mengubah desain footer theme WordPress (mengubah copyright, menambahkan menu footer, icon social dan mengatur section footer).
  7. Widget WordPress: (Anda Disini).

SUB-BAB Berikutnya: Plugin WordPress.

Komentar Anda:

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *