Cara Menambahkan Social Media Icon Pada Menu WordPress ( Tutorial )

Pada postingan kali ini kita akan membahas bagaimana cara menambahlam social media icon pada menu wordpress. Kita dapat menggunakan wordpress navigation menu untuk menambahkan dan menampilkan sosial media icon, tidak hanya itu kita dapat menampilkannya dimana saja di situs wordpress kita semudah drop & drag pada sidebar, atau dimana saja kita mau di tema wordpress kita.

view

Adding Social Media Icons to WordPress Menus Using a Plugin

Pertama kita perlu menginstal dan mengaktifkan plugin Menu Social Icons. Setelah diaktifkan pergi ke Appearance » Menus  pada dashboard wordpress untuk dapat menambahkan social media icon di situs wordpress kita.
Sebelum kita memasukan link social media, kita perlu membuat menu baru, dengan cara mengklik link create new menu berikan nama pada menu tersebut seperti social media menu.



Selanjutnya, klik tab Custom Links pada sisi kiri, kita akan melihat daftar social media icon tersedia. Untuk menambahkan social media icon, klik pada icon social media lalu masukan URL ID social media situs wordpress kita. Setelah selesai klik Add to Menu button. Lakukan langkah tadi pada social media lainnya.

Setelah kita memasukan social media profile ke menu, kita perlu memilih lokasi menu. Bergandung pada tema yang kita miliki, kita mungkin memiliki multiple menu location.
Jika kita tidak memiliki menu location, kita dapat menampikan social media icon pada sidebar situs wordpress kita.

Adding Social Media Icons Menu in Sidebar

Kita dapat menampilkan social media icon menu pada sidebar situs wordpress kita dengan cara pergi ke Appearance » Widgets pada wordpress admin area. Setelah itu drop & drag custom menu widget ke sidebar situs wordpress kita.



Pada bagian setting widget, pilih menu yang sebelumnya kita telah buat, lalu klik save button.

Using FontAwesome Icons in WordPress Menus

Bagian terbaiknya pada Menu Social Icon plugin ini adalah menggunakan FontAwesome Library untuk menambahkan social media icon. Jika kita ingin menggunakan icon berbeda dari Font Awesome library, kita bisa mengunjugi FonAwesome library lalu pilih icon yang ingin kita tampilkan. Untuk contoh kali ini kita akan menambahkan RSS icon ke social icon. Setelah kita pilih icon yang akan ditampilkan kita perlu memasukan kode berikut ini pada file theme function.php atau pada site-specific plugin.

1	add_filter( 'storm_social_icons_networks', 'storm_social_icons_networks');

2	function storm_social_icons_networks( $networks ) {

3

4	$extra_icons = array (

5	'/feed' => array(                  // Enable this icon for any URL containing this text

6	'name' => 'RSS',               // Default menu item label

7	'class' => 'rss',              // Custom class

8	'icon' => 'icon-rss',          // FontAwesome class

9	'icon-sign' => 'icon-rss-sign' // May not be available. Check FontAwesome.

10

),

11

);

12

13	$extra_icons = array_merge( $networks, $extra_icons );

14	return $extra_icons;

15

16

}

Untuk menambahkan icon lainnya kita perlu mengganti /feed dengan url social network yang akan kita masukan. Juga ganti rss dengan nama social icon yang kita pilih.

Kita perlu menginstal dan mengaktifkan plugin Menu Image. Setelah diaktifkan pergi ke Appearances » Menus akan ada menu image button dibawah item setiap menu. Kita tinggal upload icon social media yang kita inginkan.

  Sekian ini saja yang saya jelaskan untuk postingan kali ini, semoga postingan ini bermanfaat.
Terimakasih.