Cara Membuat Tooltip dan Integrasinya di Wordpress

Halo Sobat duniacode.com, Kali ini saya akan membuat Sebuah Tutorial Baru yang sangat Bagus. Tutorial ini Sangat Sering digunakan bagi kalian yang Membuka web Fansub dan Fanshare.

Yap, Yaitu Tutorial Cara Membuat Tooltip di WordPress dan Integrasinya, sebelumnya saya berterimakasih kepada teman saya yaitu AgeCuk dan Arif Fauzi yang sudah membagi sedikit ilmunya kepada saya dan jangan lupa pesanlah theme wordpress kepada mereka berdua ya, dan langsung saja disimaknya Tutorial Berikut ! , Saya akan menjelaskan Tutorial ya Secara Detail dan jelas :D

Bagaimana Cara Membuat Tooltip di WordPress ? Cara nya cukup simpel kok .

Pertama-tama buatlah sebuah file baru dengan nama tooltip.php

Jika sudah, Kalian Cukup Mengcopy semua kode ini , dan pastekan kedalam tooltip.php ( Tooltip ini adalah integrasi dari Theme RemIcy )

<?php 
require('../../../wp-blog-header.php');
$target = $_POST["id"]; 
$id = $target;
$post = get_post($id);
setup_postdata($post); ?>
<div class="inzserjdl"><?php the_title(); ?></div>
<div class="inzser">
<?php if ( has_post_thumbnail() ) { ?><?php the_post_thumbnail(); ?><?php } else { ?><img src="<?php echo get_template_directory_uri(); ?>/images/nothumb.png" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" /><?php } ?>
<div class="rapi">
<span><b>Judul</b> : <?php the_title(); ?></span>
<span><?php echo get_the_term_list($post->ID, 'producer', '<b>Produser </b>: ', ', '); ?></span>
<span><?php echo get_the_term_list($post->ID, 'type', '<b>Tipe </b>: '); ?></span>
<span><?php echo get_the_term_list($post->ID, 'episode', '<b>Episode </b>: '); ?></span>
<span><?php echo get_the_term_list($post->ID, 'status', '<b>Status </b>: '); ?></span>
<span><?php echo get_the_term_list($post->ID, 'genre', '<b>Genre </b>: ', ', '); ?></span>
<span><?php echo get_the_term_list($post->ID, 'duration', '<b>Duration </b>: '); ?></span>
<span><?php echo get_the_term_list($post->ID, 'score', '<b>Skor </b>: '); ?></span>
<div class="sinz"><?php the_excerpt(); ?></div>
</div>
</div>
<?php wp_reset_postdata(); ?>

setelah selesai simpan filenya, lalu copy code dibawah ini kedalam file style.css theme wordpress kalian

.inzserjdl{display:block;font-size:14px;font-weight:700;background:rgba(0, 0, 0, 0.28);color:#fff;line-height:30px;margin:-5px -9px 5px;padding:0 7px;}
.inzserjdl .rate{margin:3px;float:right;line-height:23px;color:#fff}
.inzser{overflow:hidden;margin:5px 0}
.inzser img{float:left;width:150px;height:200px;padding:1px;margin-right:10px}
.inzser .rapi{font-size:11px;line-height:18px;color:#fafafa;font-family:segoe ui}
.inzser .rapi span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inzser .rapi b{color:#fafafa}
.inzser .rapi a{color:#fafafa}
.inzser .rapi .sinz{border-top:1px solid #444;display:block;margin-top:5px;padding-top:5px;margin-left:168px}
.inzser .rapi .sinz p{margin:0}

setelah itu simpan filenya, kemuadian extract file tooltip.zip ini di folder theme kalian

kemuadian copy code dibawah ini ke file header.php theme kalian , dan pastekan sebelum tag </head>

<script type="text/javascript">
$(document).ready(function()
{
  $('.series').each(function(){

    var $this = $(this);
    var id = $this.attr('rel');

    $this.qtip({
      content:{
        text: 'Loading..',
        ajax:{
          url: '<?php echo get_template_directory_uri(); ?>/tooltip.php',
          type: 'POST', 
          loading: false,
          data: 'id=' + id
        }
      },
      show: 'mouseover',
      hide: {
        delay: 200,
        fixed: true
      },
      position: {
	target: 'mouse',
        viewport: $(window)
      }
    });
  });
});
</script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.12.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/js/jquery.qtip.css" />
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.qtip.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.qtip.js"></script>

jika sudah simpan kembali filenya, dibagian ini kita sudah selesai

Nah selanjutnya kita akan melakukan integrasi ke bagian link atau image yang ingin di hover tooltip

carilah di dalam theme kalian tag <a ..... > , lalu sisipkan code dibawah ini di dalam tag tersebut

rel="<?php the_ID(); ?>" class="series" data-toggle="tooltip"

berikut contoh integrasinya

<a rel="<?php the_ID(); ?>" class="series" data-toggle="tooltip" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>

nah kita sudah selesai membuat dan melakukan integrasi tooltip ke dalam wordpress, dan kalian tinggal mempelajari dan experimen dengan code diatas, berikut sedikit penjelasan dari kode php yang diatas :D

<?php echo get_the_term_list($post->ID, 'producer', '<b>Produser </b>: ', ', '); ?>

code diatas mempunyai fungsi untuk mengambil data dari post type id.

<?php the_ID(); ?>

sedangkan code diatas adalah untuk menampilkan id dari custom post kita.

Nah demikianlah tutorial Cara Membuat Tooltip di WordPress dan Integrasinya , semoga bermanfaat

dan Selamat Mencoba :D

Jika ada problem silahkan tinggal komentar anda ^^