Cara Membuat Tooltip dan Integrasinya di WordPress

Tutorial - Sofyan R. - 1 Juli 2018

Halo Sobat KoiDezign, Kali ini saya akan membuat Sebuah Tutorial Baru yang sangat Bagus yaitu Tutorial Membuat Tooltip dan Integrasinya di WordPress. Tutorial ini Sangat Sering digunakan bagi kalian yang Membuka web Fansub dan Fanshare.

Sebelumnya saya berterimakasih kepada teman saya yaitu AgeCuk dan Arif Fauzi yang sudah membagi sedikit ilmunya kepada saya dan langsung saja disimaknya Tutorial Berikut!, Saya akan menjelaskan Tutorialnya Secara Detail dan jelas 😀

Membuat Tooltip dan Integrasinya di WordPress

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, kemudian extract file tooltip.zip ini di folder theme kalian.

Kemudian 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 didalam theme kalian tag <a ….. >, lalu sisipkan code dibawah ini didalam 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 kedalam wordpress, dan kalian tinggal mempelajari dan experimen dengan code diatas, berikut sedikit penjelasan dari kode php yang diatas 😀

<?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 😀

Jika ada problem silahkan tinggal komentar anda ^^

Jangan lupa untuk Share dan Komentar ya ^_^ Terima Kasih...
About Author
Sofyan R.

Hanyalah seorang pelajar yang sedang mendalami ilmu php, html, dan css. Dan ingin berbagi ilmu yang sudah dipelajarinya...