BLOG.MAKMALF

Words are breathing

Monday, 7 April 2014

Tutorial Menggunakan prettyPhoto di Wordpress Theme

Menurut pengalaman saya, memasang prettyPhoto tanpa plugin di Wordpress Theme buatan sendiri itu memang gampang-gampang susah. Butuh sedikit hacking dan pengetahuan PHP untuk bisa menerapkannya tanpa error di Wordpress.

Berikut langkah-langkahnya.

Baca dahulu dokumentasinya


Supaya anda bisa memahami tutorial ini secara baik dan mengembangkan lagi fitur yang ditawarkan oleh prettyPhoto, silakan baca dokumentasinya terlebih dahulu secara lengkap.

Hapus jQuery Library bawaan Wordpress


Edit file functions.php dan tambahkan baris kode ini.

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_deregister_script('jquery');
}

Kemudian tambahkan jQuery library versi yang anda inginkan di file header.php sebelum kode </head>. Contohnya.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

Alih-alih menambahkan jQuery library di file functions.php, saya malah menambahkannya secara manual di header. Karena saya pernah menemukan ada beberapa jQuery plugin yang tidak bisa berjalan dengan jQuery library yang di include di file functions.php.

Setup Struktur Folder prettyPhoto


Copy semua isi folder prettyPhoto termasuk folder images-nya. File CSS di folder css, file javascript-nya di folder js. Dan include semuanya di file header.php.

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/prettyPhoto.css" type="text/css" media="screen"/>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.prettyPhoto.js"></script>

Aktifkan prettyPhoto


Untuk mengaktifkan prettyPhoto tambahkan baris kode seperti di bawah ini pada file footer.php.

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

Dan terapkan di gambar yang dikehendaki. Contohnya pada thumbnail seperti ini.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' ); ?>
<a href="<?php echo $background[0]; ?>" rel="prettyPhoto">
<div class="per-item">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail('thumbnail'); } ?>
<div class="type">
<?php the_title(); ?>
</div>
</div>
</a>
<?php endwhile; endif; ?>


Untuk mendapatkan URL attachment file nya, digunakan fungsi wp_get_attachment(); seperti di atas. Nama class ataupun div bisa anda modifikasi lagi sesuai kebutuhan.

Selesai

This post has No comments so far:

Post a Comment