Cara Menambah Sosial Ikon Theme Divi WordPress
Divi WordPress Theme dari Elegant Themes mungkin theme paling canggih yang paling mudah digunakan di WordPress Themes yang tersedia saat ini. Ini memungkinkan Anda membuat jenis tata letak dalam beberapa menit dengan menggunakan page builder
Ada beberapa hal, seperti ikon sosial media, yang tidak dapat diubah dari pilihan tema. Ini bagus karena kebanyakan orang akan menggunakan opsi sosial standar seperti Facebook, Twitter, Google+ dan RSS, sehingga butuh sedikit coding untuk menambahkannya.
Tetapi jika Anda menggunakan ingin ikon sosial tambahan seperti Pinterest, Instagram, Linedin dll dalam tema Divi WordPress, inilah code yang bisa digunakan
Berikut daftar kode untuk ikon sosial yang tersedia dalam file Divi style.css.
.et-social-facebook a.icon:before { content: ‘e093’; }
.et-social-twitter a.icon:before { content: ‘e094’; }
.et-social-google-plus a.icon:before { content: ‘e096’; }
.et-social-pinterest a.icon:before { content: ‘e095’; }
.et-social-linkedin a.icon:before { content: ‘e09d’; }
.et-social-tumblr a.icon:before { content: ‘e097’; }
.et-social-instagram a.icon:before { content: ‘e09a’; }
.et-social-skype a.icon:before { content: ‘e0a2’; }
.et-social-flikr a.icon:before { content: ‘e0a6’; }
.et-social-myspace a.icon:before { content: ‘e0a1’; }
.et-social-dribbble a.icon:before { content: ‘e09b’; }
.et-social-youtube a.icon:before { content: ‘e0a3’; }
.et-social-vimeo a.icon:before { content: ‘e09c’; }
.et-social-rss a.icon:before { content: ‘e09e’; }
Daftar ini menunjukkan semua ikon jejaring sosial yang tersedia di theme Divi
sekarang buka melauli editor : includes/social_icons.php dan temukan kode berikut
<ul class=”et-social-icons”>
<?php if ( ‘on’ === et_get_option( ‘divi_show_facebook_icon’, ‘on’ ) ) : ?>
<li class=”et-social-icon et-social-facebook”>
<a href=”<?php echo esc_url( et_get_option( ‘divi_facebook_url’, ‘#’ ) ); ?>” class=”icon”>
<span><?php esc_html_e( ‘Facebook’, ‘Divi’ ); ?></span>
</a>
</li>
<?php endif; ?>
<?php if ( ‘on’ === et_get_option( ‘divi_show_twitter_icon’, ‘on’ ) ) : ?>
<li class=”et-social-icon et-social-twitter”>
<a href=”<?php echo esc_url( et_get_option( ‘divi_twitter_url’, ‘#’ ) ); ?>” class=”icon”>
<span><?php esc_html_e( ‘Twitter’, ‘Divi’ ); ?></span>
</a>
</li>
<?php endif; ?>
<?php if ( ‘on’ === et_get_option( ‘divi_show_google_icon’, ‘on’ ) ) : ?>
<li class=”et-social-icon et-social-google-plus”>
<a href=”<?php echo esc_url( et_get_option( ‘divi_google_url’, ‘#’ ) ); ?>” class=”icon”>
<span><?php esc_html_e( ‘Google’, ‘Divi’ ); ?></span>
</a>
</li>
<?php endif; ?>
<?php if ( ‘on’ === et_get_option( ‘divi_show_rss_icon’, ‘on’ ) ) : ?>
<?php
$et_rss_url = ” !== et_get_option( ‘divi_rss_url’ )
? et_get_option( ‘divi_rss_url’ )
: get_bloginfo( ‘comments_rss2_url’ );
?>
<li class=”et-social-icon et-social-rss”>
<a href=”<?php echo esc_url( $et_rss_url ); ?>” class=”icon”>
<span><?php esc_html_e( ‘RSS’, ‘Divi’ ); ?></span>
</a>
</li>
<?php endif; ?>
</ul>
Untuk menambahkan ikon , misalnya LinkedIn, tambahkan bagian kode seperti berikut, sebelum tag </ ul> dalam kode ikon sosial di atas.
<li class=”et-social-icon et-social-linkedin”>
<a href=”http://in.linkedin.com/in/mayursomani?” class=”icon”>
<span><?php esc_html_e( ‘LinkedIn’, ‘Divi’ ); ?></span>
</a>
</li>
untuk menambah ikon youtube, sisipkan kode berikut :
<li class=”et-social-icon et-social-youtube”>
<a href=”http://youtube.com/u/yourusername?” class=”icon”>
<span><?php esc_html_e( ‘YouTube’, ‘Divi’ ); ?></span>
</a>
</li>
untuk menambah ikon instagram, sisipkan kode berikut :
<li class=”et-social-icon et-social-instagram”>
<a href=”http://instagram.com/yourusername?” class=”icon”>
<span><?php esc_html_e( ‘Pinterest’, ‘Divi’ ); ?></span>
</a>
</li>
untuk ikon lainnya sama formatnya.
Cek leweat smarphone atau tampilan mobile via google page speed, ternyata tampilannya hanya shortcode dari theme yang dipakai, karena theme yang dipakai theme yang sudah responsive, seharusnya tampilannya sudah bagus jika dibuka lewat smartphone.
