Posted on

Membuat Menu Sosial Media Pada Tema Storefront WooCommerce

Membuat Menu Sosial Media Storefront WooCommerce

wpJakarta.Com – Membuat Menu Sosial Media Pada Tema Storefront WooCommerce. Pada kebanyakan tema website yang sudah jadi biasanya akan tersedia beberapa lokasi menu. Umumnya adalah primary, secondary dan mungkin lokasi tertiary. Plus lokasi dimana juga anda dapat menambahkan menu untuk meletakan link dan icon sosial media yang bersangkutan.

Kunjungi artikel kami lainnya tentang kustomisasi WooCommerce dan tema storefront

Membuat menu sosial media pada tema Storefront WooCommerce

Lain lagi pada tema storefront WooCommerce. Secara default hanya terdapat dua lokasi menu, plus satu lokasi untuk tampilan pada mobile (handphone). Menu primary terletak di antara body dan site title. Sedangkan menu secondary ada disebelah kanan atas sebelum kotak pencarian produk. Dan tidak ada menu atau lokasi bagi kita yang ingin menempatkan menu link sosial media.

Tapi tentu saja tema website storefront dapat di kustom atau di tweak supaya kita dapat menempatkan menu link media sosial. Pilihannya bisa di tempatkan pada secondary menu atau pada bagian bawah (footer) setelah link teks copyright.

Membuat menu sosial media di secondary menu tema Storefront WooCommerce

Pada artikel ini kami berikan tips trik membuat menu sosial media pada tema website storefront (WooCommerce). Menu sosial media tersebut akan menempati lokasi secondary menu yang terletak di bagian kanan atas sebelum kotak pencarian produk. Hasil live bisa dilihat pada website ini di sebelah kanan atas. Anda akan melihat link dan icon facebook, twitter, instagram dan linkedin kami.

Artikel kami lainnya :

Secara default tema storefront sudah memuat koleksi icon fontawesome. Artinya kita hanya perlu membuat menu pada lokasi secondary yaitu dengan memasukan link media sosial (facebook, twitter, instagram, linkedin dan lain-lain) pada lokasi menu tersebut dan menambahkan skrip CSS pada kotak kode CSS tambahan

  • Pada menu secondary location masukan link url media sosial bersangkutan. Misalnya : https://www.facebook.com/warungproduktifjakarta/.
  • Masukan kode CSS berikut pada menu customizer >> additional CSS.
    • (Anda boleh masukan seluruh skrip CSS berikut atau seperlunya saja sesuai link media sosial yang digunakan).
  • Berikut kode CSSnya secara keseluruhan.
/* fa-social menu */
.secondary-navigation a[href*="dribbble.com"], .secondary-navigation a[href*="facebook.com"], .secondary-navigation a[href*="flickr.com"], .secondary-navigation a[href*="foursquare.com"], .secondary-navigation a[href*="plus.google.com"], .secondary-navigation a[href*="instagram.com"], .secondary-navigation a[href*="linkedin.com"], .secondary-navigation a[href*="pinterest.com"], .secondary-navigation a[href*="reddit.com"], .secondary-navigation a[href*="tumblr.com"], .secondary-navigation a[href*="twitter.com"], .secondary-navigation a[href*="vimeo.com"], .secondary-navigation a[href*="wordpress.com"], .secondary-navigation a[href*="wordpress.org"], .secondary-navigation a[href*="youtube.com"], .secondary-navigation a[href*="mailto:"], .secondary-navigation a[href*="twitch.tv"], .secondary-navigation a[href$="/feed/"] {
  text-indent: -9999px; }
.secondary-navigation a[href*="dribbble.com"]:after, .secondary-navigation a[href*="facebook.com"]:after, .secondary-navigation a[href*="flickr.com"]:after, .secondary-navigation a[href*="foursquare.com"]:after, .secondary-navigation a[href*="plus.google.com"]:after, .secondary-navigation a[href*="instagram.com"]:after, .secondary-navigation a[href*="linkedin.com"]:after, .secondary-navigation a[href*="pinterest.com"]:after, .secondary-navigation a[href*="reddit.com"]:after, .secondary-navigation a[href*="tumblr.com"]:after, .secondary-navigation a[href*="twitter.com"]:after, .secondary-navigation a[href*="vimeo.com"]:after, .secondary-navigation a[href*="wordpress.com"]:after, .secondary-navigation a[href*="wordpress.org"]:after, .secondary-navigation a[href*="youtube.com"]:after, .secondary-navigation a[href*="mailto:"]:after, .secondary-navigation a[href*="twitch.tv"]:after, .secondary-navigation a[href$="/feed/"]:after {
    text-indent: 0;
    display: block;
    float: left; }
.secondary-navigation a[href*="dribbble.com"]:after, .secondary-navigation a[href*="facebook.com"]:after, .secondary-navigation a[href*="flickr.com"]:after, .secondary-navigation a[href*="foursquare.com"]:after, .secondary-navigation a[href*="plus.google.com"]:after, .secondary-navigation a[href*="instagram.com"]:after, .secondary-navigation a[href*="linkedin.com"]:after, .secondary-navigation a[href*="pinterest.com"]:after, .secondary-navigation a[href*="reddit.com"]:after, .secondary-navigation a[href*="tumblr.com"]:after, .secondary-navigation a[href*="twitter.com"]:after, .secondary-navigation a[href*="vimeo.com"]:after, .secondary-navigation a[href*="wordpress.com"]:after, .secondary-navigation a[href*="wordpress.org"]:after, .secondary-navigation a[href*="youtube.com"]:after, .secondary-navigation a[href*="twitch.tv"]:after {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400; }
.secondary-navigation a[href*="mailto:"]:after, .secondary-navigation a[href$="/feed/"]:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; }
.secondary-navigation a[href$="/feed/"]:after {
  content: "\f09e";
  color: #ff9900; }
.secondary-navigation a[href*="twitch.tv"]:after {
  content: "\f1e8";
  color: #6441A5; }
.secondary-navigation a[href*="mailto:"]:after {
  content: "\f0e0"; }
.secondary-navigation a[href*="youtube.com"]:after {
  content: "\f167";
  color: #bb0000; }
.secondary-navigation a[href*="wordpress.com"]:after, .secondary-navigation a[href*="wordpress.org"]:after {
  content: "\f19a";
  color: #0073aa; }
.secondary-navigation a[href*="vimeo.com"]:after {
  content: "\f194";
  color: #aad450; }
.secondary-navigation a[href*="tumblr.com"]:after {
  content: "\f173";
  color: #32506d; }
.secondary-navigation a[href*="reddit.com"]:after {
  content: "\f231"; }
.secondary-navigation a[href*="twitter.com"]:after {
  content: "\f099";
  color: #00aced; }
.secondary-navigation a[href*="dribbble.com"]:after {
  content: "\f17d";
  color: #ea4c89; }
.secondary-navigation a[href*="facebook.com"]:after {
  content: "\f09a";
  color: #3b5998; }
.secondary-navigation a[href*="flickr.com"]:after {
  content: "\f16e";
  color: #ff0084; }
.secondary-navigation a[href*="foursquare.com"]:after {
  content: "\f180";
  color: #0072b1; }
.secondary-navigation a[href*="plus.google.com"]:after {
  content: "\f0d5";
  color: #dd4b39; }
.secondary-navigation a[href*="instagram.com"]:after {
  content: "\f16d";
  color: #517fa4; }
.secondary-navigation a[href*="linkedin.com"]:after {
  content: "\f0e1";
  color: #007bb6; }
.secondary-navigation a[href*="pinterest.com"]:after {
  content: "\f231";
  color: #cb2027; }
  • Jika terdapat kendala dimana icon tidak tampil sempurna, anda perlu mendapatkan kit font awesome paling update melalui link berikut https://fontawesome.com/kits.
  • Masukan kode kit fontawesome kedalam fungsi php berikut.
  • Dan tambahkan skrip berikut kedalam file function.php atau gunakan kode snippet plugin.
function add_fontawesome_kit() {
    wp_register_script( 'fa-kit', 'https://kit.fontawesome.com/12345b6789.js', array( 'jquery' ) , '5.9.0', true );
    wp_enqueue_script( 'fa-kit' );
}

add_action( 'wp_enqueue_scripts', 'add_fontawesome_kit', 100 );

Membuat menu sosial media di bagian bawah/footer menu tema Storefront WooCommerce

Implementasi praktek diatas akan menempatkan menu media sosial pada secondary menu di bagian atas. Alternatif kedua adalah membuat menu sosial media di bagian bawah atau footer tema website storefront WooCommerce. Karena bagian atas mungkin saja karena anda mau menempatkan menu login, about, account atau menu lainnya. Tips trik membuat menu sosial media di bagian bawah atau footer pada artikel berikut.


100% website WordPress transparan dan “ecofriendly”, tidak ada data pengunjung yang kami kumpulkan dan tidak ada tracking data apapun terhadap data-data pengunjung”.​ Selengkapnya kunjungi halaman tentang kami.

wpJakarta

Blog “native” yang fokus pada usaha online berbasis WordPress & WooCommerce. Lihat penawaran terbaik untuk merchandise WordPress (Kaos, Hoodie, Topi, Tas dll).

Selengkapnya, klik : https://wpjakarta.com/shop/

Fresh (+62)

e-Commerce produk fresh online. Order secara online sayur, daging, buah dan bumbu rempah atau kirim list pesanan untuk pemenuhan usaha makanan dan restoran.

Selengkapnya, klik : https://freshplus62.com/about/