Caption di Slideshow Header Meteor Slides

Kita lanjutkan posting tertunda di Membedah Slideshow Meteor Slides tentang caption di slideshow header. Kita hadirkan judul dan caption di header dengan menyisipkan koding di beberapa berkas ‘2011_child’ yang sudah kita buat dan salin sebelumnya.

Menurut WordPress berkas ‘functions.php’ tidak boleh disalin ke child theme, functions.php will not work with child theme. Jadi berkas didelete alias dihapus saja.

Seperti biasa posting ini didampingi situs demo, PernakPernikNakNik.

1. Berkas header.php

Slideshow di header baru bisa ditayangkan kalau gambar header yang ada dihapus. Buka header.php dengan NotePad++. Kita blok kode mulai baris-78 (di baris-79 ada tulisan “.. Check to see if the header image has been removed” sampai dengan baris-113, tulisan “..end check for removed header image“. Delete. Kita tes, ketikkan teks sembarang di ruang kosong tadi dengan “Header asal dihapus diganti teks ini”.
menghapus header substitusi teksHoree.. header hilang, teks tampil!

Kembali ke editor NotePad++, hapus teks ganti dengan kode menayangkan slideshow,

<?php if ( function_exists( ‘meteor_slideshow’ ) ) { meteor_slideshow( ); } ?>

Save.

Kira-kira kita tahu maksud kode ini, kalau slideshow Meteor ada, tayangkan. Kita pernah melakukannya di posting terdahulu. Belum ada yang ditayangkan karena slide dan slideshow belum ada. Buat dulu.

2. Slide dan slideshow header

Atur setting slideshow lebih dulu baru buat slideshow dan beri nama misalnya, ‘header dengan caption’. Buat beberapa slide dengan mengunduh gambar berdimensi 1000 X 288 piksel. Jangan lupa mencentang nama slideshow. Tulisan atau caption yang tampil nanti bareng bersama gambar adalah judul slide dan/atau keterangan ringkas (excerpt). Buatlah judul dan keterangan ringkas yang menarik.

create slide, title, excerptPublish.

Periksa tampilan header. Horee.. slideshow jadi!

Kalau slideshow cuma 1 ‘sih oke, kalau banyak? Slideshow rame-rame tayang bergantian. Bukan itu yang dimaui. Koreksi dengan mengisikan nama slideshow di dalam tanda kurung kosong ‘( )’ kode ‘header.php’ di atas,

<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow( "header-dengan-caption", "" ); } ?>

Periksa lagi tampilan… ini dia baru betul, sekarang boleh horee.

Mana judul slide dan caption? Belum. Langkah berhenti di sini untuk slideshow tanpa caption. Lanjut caption… .

3. Berkas meteor-slideshow.php

Berkas ini digunakan untuk mengenalkan metadata berupa teks judul dan keterangan ringkas dari slide. Setiap slide terdiri atas gambar (header) dan teks (judul, keterangan ringkas). Mengunduh gambar sudah dilakukan tinggal “mengunduh” teks.

Tepatnya mengekstrak metadata. Buka berkas meteor-slideshow.php di NotePad++. Di baris-139 ada kode ini, </div><!– .mslide –>. Salin kode berikut dan sisipkan tepat di atas baris tersebut,

<div>
<h4><?php the_title(); ?></h4>
<?php the_excerpt();?>
</div>

Agak rumit, tidak apa, inilah kode mengekstrak data teks ‘the_title’ dan ‘the_excerpt’ dari slide! Beres. Tinggal menampilkannya dengan bantuan kode di meteor-slides.css.

4. Berkas meteor-slides.css

Buka berkas ‘meteor-slides.css’, tulis kode menampilkan metadata slide di sini. Di mana terserah, di bagian paling bawah sajalah.

.meteor-caption {
    background: rgba(255, 255, 255, 0.5);
    bottom: 0;
    left: 0;
    color: #ffffff;
    line-height: 50px;
    margin: 0;
    padding: 5px;
    position: absolute;
    text-align: center;
    width: 100%;
}

Selesai? Sedikit lagi. Kode adalah tampilan untuk ‘judul’. Salin kode dan letakkan di bawahnya. Sisipkan ‘p’ jadi ‘.meteor-caption p{‘. Ini untuk ‘excerpt’.

Jadi kita punya 2 kode serupa tapi tak sama. Dengan kutak-katik kita akan tahu sebagian kode di excerpt dapat diabaikan (dihapus).

Menurut teori teks judul dan keterangan ringkas slide seharusnya tampil di layar! Coba dilihat… Eureka!
Continue reading perlu dihapus

Lakukan eksperimen di dua blok kode tadi hingga tampilan teks judul dan keterangan ringkas tampak proporsional. Eh, tulisan “Continue Reading” ikut nongol. Mengganggu, bisa dihapus?

Cari berkas functions.php di folder tema induknya Twenty Eleven, telusuri. Ketemu! Ada tulisan seperti ini di baris-359, “…Adds a pretty “Continue Reading” link to custom post excerpts. To override this link in a child theme, remove the filter and add your own function tied to the get_the_excerpt filter hook.

Diterjemahkan bebas “.. kode “Continue reading” di bawah adalah link ‘excerpt’ posting. Link bisa dihapus diganti dengan… dst.”. Ini dia kodenya,

/* 
function twentyeleven_custom_excerpt_more( $output ) {
if ( has_excerpt() && ! is_attachment() ) {
$output .= twentyeleven_continue_reading_link();
}
return $output;
}
add_filter( 'get_the_excerpt', 'twentyeleven_custom_excerpt_more' );
*/

Tidak perlu dihapus, dinonaktifkan saja. Beri tanda kurung buka dan tutup seperti yang dicetak tebal. Selesai.

Lihat kembali tampilan… sempurna!

Akhirnya tuntas juga membedah header slideshow Meteor Slides. Berkas ‘style.css’ tidak diperlukan, kalau mau kode ‘judul’ dan ‘excerpt’ bisa dipindah ke sini. Hasilnya sama.

Demo hasil akhir, PernakPernikNakNik.

Karena belum pengalaman soal koding, posting ini diturunkan berdasarkan tanya-jawab forum Meteor Slides di WordPress.org, overlapping caption, dengan Josh Leuze yang empunya Meteor Slides yang juga developer di WordPress.

Update:
Masih belajar ‘CSS’, mencoba memperbaharui kode tampilan di demo seperti ini,

.meteor-caption {
background: rgba(0, 0, 0, 0.3);
bottom: 0;
left: 10px;
color: #95cdf7;
line-height: 40px;
margin: 0 0 0 -10px;
padding: 0 0 10px 10px;
position: absolute;
text-align: left;
width: 22%;
}
.meteor-caption p{
bottom: 0;
left: 10px;
font-size: 11px;
color: #c6c6c6;
line-height: 25px;
margin: 0;
padding: 0;
position: absolute;
text-align: left;
width: 100%;
}

Sepertinya lebih pas.

:D  (masih belajar agar slideshow posting tidak terpengaruh slideshow header)

 

Tagged with: , , , , , , ,
Ditulis dalam Blog Tampilan, Blog Tips dan Trik, Blogging

Silakan komentar, 'like' juga oke

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: