Cara Menambahkan Ikon Media Sosial ke Menu WordPress

Diterbitkan: 2020-10-24

Terlepas dari apakah Anda menjalankan bisnis atau situs pribadi, Anda perlu memastikan bahwa pengguna dapat membagikan konten Anda di media sosial. Itu sebabnya dalam posting ini, kami akan menunjukkan cara menambahkan ikon media sosial ke menu WordPress Anda .

Mengapa Menambahkan Ikon Media Sosial ke Menu WordPress?

Menurut penelitian terbaru, hampir 50% dari populasi global menggunakan setidaknya satu jejaring sosial. Menghubungkan situs Anda dengan Facebook atau menambahkan umpan Instagram ke situs web Anda adalah pilihan yang baik, tetapi ada hal lain yang dapat Anda lakukan untuk menumbuhkan kehadiran media sosial Anda. Menu adalah salah satu elemen paling menonjol di situs Anda. Selain itu, ini adalah salah satu hal pertama yang dilihat pengguna saat mereka mengunjungi situs Anda. Misalnya, lihat menu utama situs web kami.

tajuk quadlayer Jadi untuk menyesuaikan situs Anda dan memaksimalkan saluran media sosial Anda, Anda dapat menambahkan ikon media sosial ke menu WordPress Anda. Selain itu, Anda dapat menampilkan ikon di area lain situs Anda yang mendukung widget seperti footer, sidebar, dan sebagainya.

Meskipun beberapa tema seperti Divi menyertakan beberapa opsi untuk menambahkan ikon media sosial ke menu, sebagian besar tema tidak dilengkapi dengan fitur ini. Dan WordPress juga tidak menyertakan fitur asli untuk menyertakan ikon di menu.

Jadi dalam posting ini, kami akan menunjukkan kepada Anda tiga metode untuk menambahkan ikon media sosial dengan mudah ke menu WordPress Anda .

Cara Menambahkan Ikon Media Sosial ke Menu WordPress Anda

Ada tiga cara utama untuk menambahkan ikon media sosial ke menu WordPress Anda:

  1. Dengan plugin
    1. QuadMenu
    2. Ikon Sosial WP
  2. Dari penyesuai tema
  3. Secara manual menggunakan ikon FontAwesome

Dalam panduan ini, kami akan menjelaskan setiap metode langkah demi langkah sehingga Anda dapat memilih yang paling Anda sukai.

1) Plugin

Menggunakan plugin adalah cara termudah untuk memasukkan ikon media sosial di menu Anda. Ada beberapa opsi di luar sana, jadi, untuk membuat hidup Anda lebih mudah, kami telah mencantumkan dua plugin terbaik yang dapat Anda gunakan.

1.1) QuadMenu

Tambahkan Ikon Media Sosial ke Menu WordPress - QuadMenu

QuadMenu adalah alat terbaik untuk dengan mudah menyesuaikan dan membawa menu WordPress Anda ke tingkat berikutnya. Ini adalah plugin freemium. Ada versi gratis dengan fitur dasar dan tiga paket premium yang hadir dengan fitur yang lebih canggih dan dukungan prioritas.

harga quadmenu

Untuk menambahkan ikon media sosial ke menu Anda, Anda memerlukan versi premium. Jadi, mari kita lihat cara menginstalnya dan mengaktifkan plugin di situs Anda.

Instalasi dan Aktivasi

Pertama, Anda perlu membeli plugin dan mengunduh file ke desktop Anda. Kemudian, sebelum menginstalnya, Anda perlu menginstal versi gratis di situs Anda. Untuk melakukannya, buka dasbor WP Anda > Plugin > Add New . Kemudian, gunakan bilah pencarian dan cari QuadMenu. Setelah itu, tekan Instal dan kemudian Aktifkan .

instal plugin quadmenu

Setelah aktivasi, gunakan file versi premium yang Anda unduh sebelumnya dan instal di situs Anda.

instal quadmenu premium Setelah Anda mengaktifkan plugin, Anda perlu memverifikasi kunci lisensi Anda. Dari dasbor akun QuadMenu Anda, Anda akan melihat opsi lisensi.

lisensi quadmenu

Salin kunci dari sana dan tempel di bidang lisensi dengan alamat email terdaftar Anda untuk memverifikasi kunci Anda.

opsi lisensi quadmenu

Plugin ini tersedia di toko kami, Envato, dan pasar Elegan, jadi gunakan menu tarik-turun untuk memilih opsi yang sesuai untuk pembelian Anda. Setelah memverifikasinya, Anda siap melakukannya.

Tambahkan ikon media sosial ke menu WordPress Anda dengan QuadMenu

QuadMenu berfungsi dengan tema gratis atau premium apa pun. Untuk demo ini, kita akan menggunakan GeneratePress tetapi prosesnya mirip dengan tema lainnya. Pertama, mari masuk ke pengaturan plugin dengan masuk ke QuadMenu > Options .

Tambahkan Ikon Media Sosial ke Menu WordPress - Opsi Quadmenu Di sana, Anda akan melihat beberapa opsi penyesuaian seperti:

  • Menu Utama
  • Responsif
  • Tema bawaan
  • Sesuaikan
  • Sosial
  • Ekspor Impor
Konfigurasikan opsi sosial

Dalam kasus kami, kami perlu menambahkan ikon media sosial ke menu utama kami. Jadi, kami akan memilih opsi Sosial .

pilihan sosial

Anda akan melihat beberapa opsi default yang dapat Anda edit atau hapus tergantung pada saluran yang Anda miliki. Mereka telah menetapkan ikon dengan profil media sosial.

Namun, Anda juga dapat menyesuaikannya dengan mengklik tombol + Tambahkan Ikon . Selain itu, Anda dapat menambahkan saluran media sosial baru dengan menekan tombol + . tambahkan ikon

Katakanlah Anda ingin mengubah ikon Facebook. Tekan + Tambahkan ikon dan Anda akan melihat pop-up dengan banyak ikon yang dapat Anda pilih.

semua ikon yang tersedia

Ada banyak ikon jadi kami sarankan Anda menggunakan fitur pencarian untuk memfilter hasil.

cari ikon fb Seperti yang Anda lihat, kami telah mencari ikon Facebook. Ini akan menunjukkan kepada Anda semua ikon yang tersedia terkait dengan permintaan pencarian Anda, jadi pilih yang Anda suka dan simpan. Anda juga dapat mengubah judul dan URL. Setelah Anda membuat semua perubahan yang Anda inginkan di QuadMenu, simpan pengaturannya.

simpan pengaturan plugin quadmenu

Setelah itu, masuk ke menu WordPress. Anda akan melihat semua menu yang tersedia di sana. Untuk menggunakan opsi QuadMenu pada menu Anda, Anda harus menandainya sebagai QuadMenu Dev di bawah Pengaturan Menu . Setelah itu simpan menu tersebut.

opsi pengembang quadmenu

Pada pemuatan halaman berikutnya, Anda akan melihat opsi QuadMenu. opsi menu quad

Di bawah item QuadMenu, Anda akan melihat daftar ikon Sosial . Pilih mereka dan tekan Tambahkan ke Menu .

tambahkan ikon sosial ke menu

Setelah itu, Anda akan melihat bagian Sosial di bawah opsi Menu Utama. Arahkan mouse Anda ke atas dan Anda akan melihat opsi penyesuaian QuadMenu.

ikon sosial quadmenu

Jika Anda memerlukan penyesuaian tambahan, pilih opsi itu. Jika tidak, tekan tombol Simpan Menu dan Anda siap melakukannya.

Tambahkan Ikon Media Sosial ke Menu WordPress - Simpan menu wordpress

Ikon pada menu (Frontend)

Sekarang, saatnya untuk memeriksa hasilnya. Jadi, buka beranda situs web Anda dan Anda akan melihat ikon sosial. Dan saat Anda mengarahkan kursor ke atasnya, ikon akan ditampilkan.

Tambahkan Ikon Media Sosial ke Menu WordPress - QuadMenu final

Itu dia! Anda telah berhasil menambahkan ikon media sosial ke menu WordPress Anda dengan QuadMenu .

1.2) Ikon Menu WP

Jika Anda tidak mampu membeli plugin premium, jangan khawatir. Kami punya solusi gratis untuk Anda. Di bagian ini, kami akan menunjukkan cara menambahkan ikon media sosial ke WordPress Anda dengan plugin gratis bernama WP Menu Icons. Tambahkan Ikon Media Sosial ke Menu WordPress - Plugin ikon menu WP

Instalasi dan Aktivasi

Pertama, instal dan aktifkan Ikon Menu WP di situs Anda.

instal plugin ikon menu wp Alat ini sangat mudah digunakan dan tidak memerlukan penyesuaian tambahan.

Menyesuaikan Ikon Menu

Jika Anda tidak memiliki menu di situs Anda, Anda dapat membuatnya dari bagian konfigurasi. buat menu

Tetapkan lokasi ke menu Anda dan kemudian Anda siap untuk menambahkan item ke dalamnya. Untuk menambahkan profil media sosial Anda ke menu, pilih item Tautan Khusus . Anda harus memasukkan URL ke halaman yang ingin Anda tautkan dan labelnya. Kemudian, tekan Tambahkan ke Menu .

tambahkan tautan facebook ke menu Setelah Anda menambahkan ikon ke menu, halaman konfigurasi akan terlihat seperti ini.

fb ditambahkan ke menu Demikian pula, Anda dapat menambahkan ikon media sosial lainnya. Dalam hal ini, kami telah menambahkan ikon Twitter, Pinterest, dan Instagram ke menu kami.

profil sosial ditambahkan Pada item menu, ada tombol + . Itulah pengaturan yang perlu Anda gunakan untuk menambahkan ikon ke item menu, jadi klik itu.

Tambahkan Ikon Media Sosial ke Menu WordPress - tambahkan ikon Kemudian, Anda akan melihat banyak pilihan item untuk dipilih.

semua ikon Ada puluhan ikon jadi gunakan fitur pencarian untuk memfilter hasil yang Anda inginkan. Dalam hal ini, kami telah memilih item menu Facebook, jadi kami akan mencari ikon Facebook. ikon facebook Setelah memilih yang Anda suka, Anda akan melihat pengaturan ikon di kolom kanan. Di sini Anda dapat menampilkan atau menyembunyikan label, menyesuaikan posisi, ukuran, dan perataan. Dalam hal ini, kita akan menyembunyikan labelnya. Setelah Anda selesai dengan penyesuaian, klik Simpan .

sembunyikan label Anda dapat menyesuaikan ikon Pinterest, Twitter, dan Instagram dengan cara yang sama. Setelah menambahkan ikon yang diperlukan, simpan menu.

Tambahkan Ikon Media Sosial ke Menu WordPress - Ikon menu WP Simpan menu Sekarang saatnya untuk memeriksa hasilnya. Buka frontend situs web Anda dan Anda akan melihat ikon baru.

Tambahkan Ikon Media Sosial ke Menu WordPress - Ikon menu WP di frontend

Begitulah cara Anda dapat menambahkan ikon media sosial ke menu header Anda di WordPress dengan WP Menu Icons . Terakhir, Anda juga dapat menata ikon Anda dari halaman pengaturan Ikon Menu WP.

2) Tambahkan Ikon Media Sosial dengan Penyesuai Tema

Jika Anda tidak ingin memasang plugin apa pun, Anda dapat menyertakan ikon media sosial di menu Anda menggunakan penyesuai tema Anda. Beberapa tema premium seperti Divi, Newspaper, atau Avada hadir dengan panel tema terintegrasi yang memungkinkan Anda menyesuaikan tema dan menambahkan ikon media sosial.

Jika Anda tidak yakin apakah tema Anda dilengkapi dengan opsi untuk menambahkan ikon media sosial, di dasbor WordPress Anda, buka Appearance > Customize > Menus > View Locations dan periksa apakah ada menu sosial atau opsi ikon sosial.

Untuk demonstrasi kami, kami akan menggunakan tema Divi dengan Tema Elegan. Pertama, buka dasbor WP Anda > Penampilan > Sesuaikan .
sesuaikan tema wordpress divi

Lalu, pergi ke kustomisasi header dan elemen header. Di sana, Anda akan melihat opsi untuk mengaktifkan ikon sosial tajuk.

tampilkan ikon sosial tajuk

Aktifkan opsi itu dan Anda akan melihatnya di header situs web Anda. ikon sosial divi

Selain itu, Anda dapat menyesuaikannya dengan membuka Divi > Opsi Tema .

Tambahkan Ikon Media Sosial ke Menu WordPress - Penyesuai tema Divi

Di sana, Anda dapat mengaktifkan ikon yang Anda inginkan dan memasukkan URL profil media sosial Anda. Ikon media sosial akan muncul di header dan footer situs Anda secara default.

Tambahkan Ikon Media Sosial ke Menu WordPress - Ikon Divi di footer

Namun, Anda dapat memilih untuk menyembunyikannya melalui pengaturan penyesuai.

sembunyikan ikon footer Tema lain seperti Newspaper dan Newsmag memiliki opsi penyesuaian sendiri, sehingga Anda dapat mengaktifkan/menonaktifkan ikon dan menampilkannya langsung melalui panel tema khusus. Jika Anda tidak dapat menemukan bagian ikon media sosial di penyesuai tema atau panel, silakan tinggalkan komentar di bawah dan kami akan mencoba membantu Anda.

3) Menggunakan FontAwesome

Terakhir, Anda dapat menambahkan ikon media sosial ke menu Anda di WordPress secara manual. Bahkan jika Anda bukan seorang pengembang atau tidak memiliki keterampilan pengkodean, Anda dapat menampilkan ikon media sosial dengan sedikit pengkodean HTML. Untuk melakukannya, kita akan menggunakan ikon FontAwesome.

Jadi, hal pertama yang perlu Anda lakukan adalah pergi ke situs web FontAwesome.

Tambahkan Ikon Media Sosial ke Menu WordPress - Fontawesome

Gunakan fitur pencarian untuk menemukan ikon yang Anda butuhkan. Untuk demo ini, kita akan mencari ikon Twitter .

ikon twitter

Pada halaman berikutnya, situs web akan menampilkan hasil pencarian. Pilih salah satu yang paling Anda sukai.

pilih logo

Pada halaman berikutnya, Anda akan melihat detail ikon yang Anda pilih, jadi cukup salin kode HTML ikon tersebut. Tambahkan Ikon Media Sosial ke Menu WordPress - HTML

Menambahkan Ikon Font Keren Ke WordPress

Kemudian, buka bagian menu di situs WordPress Anda. Di sisi kiri, Anda akan melihat bagian tautan khusus. Anda harus memasukkan URL ke profil Twitter Anda dan menempelkan kode HTML yang baru saja Anda salin di bidang Teks Tautan . Setelah Anda melakukannya, tekan Tambahkan ke Menu . tambahkan ke menu

Setelah itu, simpan perubahannya. Kemudian, buka frontend situs Anda dan Anda akan melihat ikonnya.

ikon twitter di frontend

Dengan cara ini, Anda dapat menambahkan ikon media sosial apa pun ke menu Anda .

Kode HTML tidak berfungsi

Jika Anda telah mengikuti setiap langkah dari tutorial ini tetapi HTML tidak berfungsi, coba ini. Jika kode fab tidak berfungsi, coba ubah kode HTML dengan menghapus b dari fab .

Jadi, misalnya, dalam kasus kami, kode HTML akhir akan terlihat seperti ini <i class=”fa fa-twitter”></i> alih-alih <i class=”fab fa-twitter”></i> . Contoh: Tambahkan Ikon Media Sosial ke Menu WordPress - kode modifikasi HTML

Tambahkan ikon media sosial ke header WordPress

Header adalah salah satu tempat paling populer di mana Anda mungkin ingin menambahkan ikon media sosial, jadi mari kita lihat bagaimana melakukannya menggunakan Penyesuai Tema.

Perhatikan bahwa Anda memerlukan tema yang memberi Anda opsi untuk menambahkan ikon media sosial ke menu. Juga, perlu diingat bahwa langkah-langkahnya mungkin sedikit berbeda tergantung pada tema Anda, tetapi Anda harus dapat mengikuti langkah-langkahnya tanpa masalah di sebagian besar tema.

Mari kita lihat dua opsi: membuat menu baru dan mengedit yang sudah ada.

Menambahkan ikon media sosial ke header di menu baru

  1. Di dasbor WordPress Anda, buka Penampilan> Menu
  2. Tekan tautan buat menu baru di sebelah tombol Pilih dan beri nama
  3. Sekarang Anda dapat menambahkan ikon ke dalamnya. Pilih menu baru dan masukkan media sosial dan URL yang ingin Anda sertakan (Instagram, Facebook, YouTube, dan sebagainya) dan tekan Tambahkan ke Menu
  4. Simpan perubahannya
  5. Setelah itu, letakkan menu yang baru saja Anda buat di bagian header
  6. Simpan perubahan dan hanya itu! Begitulah cara Anda menambahkan ikon media sosial ke header WordPress!

Menambahkan ikon media sosial ke header di menu yang ada

  1. Di dasbor WordPress Anda, buka Penampilan > Sesuaikan > Menu
  2. Pergi ke bagian Header dan tekan tombol Add item
  3. Kemudian pilih ikon platform media sosial yang ingin Anda tambahkan, masukkan URL, dan tekan Tambahkan ke Menu . Anda perlu melakukan hal yang sama untuk setiap media sosial yang ingin Anda tambahkan
  4. Pilih lokasi menu di mana Anda ingin menampilkan ikon. Pilihan yang Anda miliki akan tergantung pada tema Anda.
  5. Simpan perubahan. Itu dia!

Atau, jika Anda ingin menambahkan ikon ke footer, misalnya, ikuti proses yang sama tetapi pilih Footer sebagai lokasi ikon.

Bonus: Buka ikon media sosial di tab baru

Menambahkan ikon media sosial ke menu WordPress Anda akan membantu Anda mengembangkan kehadiran media sosial Anda. Namun, masalahnya adalah ketika pengguna mengklik ikon di menu Anda, halaman media sosial akan dimuat di jendela yang sama dan pengguna akan meninggalkan situs Anda. Solusinya adalah membuat ikon media sosial memuat halaman di tab baru. Mari kita lihat bagaimana melakukannya.

Di dasbor WordPress Anda, buka Appearance > Menus , buka Screen Options di kanan atas, dan aktifkan opsi Link Target . Kemudian, buka setiap elemen menu dan centang kotak Buka tautan di tab baru . Atau, Anda dapat mengatur setiap target ke _blank.

Terakhir, simpan perubahan dan selesai!

Bagaimana cara menambahkan umpan sosial ke situs Anda

Selain menambahkan ikon media sosial ke menu Anda, Anda juga dapat menambahkan umpan sosial ke situs Anda untuk meningkatkan keterlibatan dengan pengguna Anda. Di bagian ini, kami akan menunjukkan cara menghubungkan Instagram dan TikTok ke situs web Anda.

Tambahkan umpan Instagram ke WordPress

Cara termudah untuk menghubungkan Instagram dengan situs Anda adalah dengan menggunakan plugin Galeri Umpan Sosial. Ini adalah alat freemium yang memungkinkan Anda untuk menampilkan umpan Instagram Anda dalam beberapa klik.

Pertama, instal dan aktifkan plugin dari tautan ini. Kemudian, buka Galeri Umpan Sosial dan masuk ke akun Instagram Anda.

Setelah itu, buka Galeri Umpan Sosial > Akun , dan Anda akan memiliki opsi untuk masuk ke akun pribadi atau bisnis Anda (perlu diingat bahwa akun bisnis memiliki lebih banyak opsi). Kemudian, tambahkan akun, masuk, dan berikan aplikasi izin yang diperlukan untuk menghubungkan akun Anda ke WordPress.

Setelah selesai, buka tab Umpan , tekan +Umpan , dan tambahkan umpan yang ingin Anda tampilkan. Terakhir, sesuaikan umpan Anda dan setelah selesai, Anda akan melihat bahwa plugin memberi Anda kode pendek yang dapat Anda tempel di halaman atau pos mana pun untuk menampilkan umpan Anda.

Untuk informasi lebih lanjut, lihat panduan kami tentang cara mengintegrasikan Instagram dengan WordPress.

Tambahkan umpan TikTok ke WordPress

Demikian pula, Anda juga dapat menghubungkan situs Anda dengan TikTok. Untuk menampilkan umpan TikTok, kami akan menggunakan plugin khusus yang disebut WP TikTok Feed. Ini adalah plugin TikTok paling populer untuk WordPress dan memiliki versi gratis dan beberapa paket premium.

Setelah menginstal dan mengaktifkan plugin, di dasbor WordPress Anda, Anda perlu menautkan akun TikTok Anda dan kemudian pergi ke Tiktok Feed > Feeds . Di sana, tekan +Feed dan tambahkan feed yang ingin Anda tampilkan. Selain itu, Anda akan melihat beberapa opsi untuk menyesuaikan cara Anda menampilkan umpan di situs Anda.

Untuk informasi lebih lanjut tentang ini, lihat tutorial kami tentang cara menyematkan video TikTok di WordPress.

Kesimpulan

Secara keseluruhan, menambahkan ikon media sosial ke menu WordPress Anda adalah cara terbaik untuk meningkatkan kehadiran media sosial Anda. Dalam panduan ini, kita telah melihat 3 cara berbeda untuk melakukannya:

  1. Dengan plugin
  2. Dari penyesuai tema
  3. Secara manual

Jika tema Anda memungkinkan Anda untuk menambahkan ikon secara default, Anda tidak perlu menggunakan plugin atau kode HTML tambahan. Jika Anda lebih suka plugin, kami sarankan Anda menggunakan QuadMenu. Ini akan memungkinkan Anda untuk mendapatkan kontrol penuh dari seluruh kustomisasi menu WordPress Anda dan juga dilengkapi dengan banyak fitur canggih.

Namun, jika Anda lebih suka solusi gratis, lihat WP Menu Icons. Ini adalah alat sederhana yang akan membantu Anda memasukkan ikon sosial dalam waktu singkat.

Di sisi lain, jika Anda tidak ingin menginstal plugin apa pun, Anda dapat menambahkan ikon media sosial menggunakan sedikit ikon HTML dan FontAwesome. Opsi ini juga memungkinkan Anda untuk menyesuaikan ikon dengan sedikit CSS atau Anda dapat menghindari bagian penataan dan menggunakan ikon default.

Apakah Anda merasa artikel ini bermanfaat? Jika Anda melakukannya, tinggalkan kami komentar di bawah dan bagikan posting ini di media sosial. Untuk tutorial terkait lainnya, lihat panduan berikut:

  • Plugin terbaik untuk menambahkan umpan media sosial ke WordPress
  • Bagaimana cara menambahkan umpan grup Facebook ke WordPress