Salam 1Malaysia.

Ini adalah respond kepada Madlut dari entrinya Tutorial Twenty Ten : Menjadikan Header Sebagai Link Homepage.

Coding Bahagian A

Ini adalah code yang mengandungi coding header di dalam Twenty Ten Theme.

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>

Perhatikan <!–?php endif ?–> . Ini adalah code fallback bagi sesuatu function dibuat. Tanpa code ini, coding akan break dan theme akan gagal berfungsi.

Ceraian Coding Bahagian A Lebih Mendalam

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );

Coding di atas ini menyatakan condition di mana gambar thumbnail (Diset melalui Featured Image ketika membuat post/entry) akan mengantikan gambar header pada homepage. Gambar thumbnail akan dipaparkan pada halaman single.php atau page.php. Coding di atas berakhir boleh diakhiri endif tetapi coding di atas diakhiri else: yang bermaksud sekiranya coding di atas ini gagal, wordpress akan memproses coding yang berada selepas else: dan coding sebelum endif. Coding di bawah ini adalah coding di antara else: dan endif:

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

Coding ini pula adalah coding yang memproses image header yang sering kita lihat pada setiap halaman page dalam Twenty Ten Theme. Image header dipilih melalui paparan Header Image pada panel Appearance.

Coding Bahagian B

Untuk membuat header sebagai header yang clickable yang boleh terus link ke homepage, saya akan gunakan coding yang sedia ada dalam header.php Twenty Ten Theme.

<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>

<?php bloginfo( ‘name’ ); ?> dalam Coding Bahagian B akan digantikan dengan Coding Bahagian A tetapi tidak semudah itu. Akan tetapi, kita akan gantikan dengan Ceraian Coding Bahagian A.

Untuk Coding Pertama Ceraian Bahagian A

Kita perlu berhati-hati untuk menyumbat Coding Bahagian B ke dalam Coding Pertama Ceraian Bahagian A supaya coding berfungsi. Memandangkan coding ini adalah conditional tag, kita akan letak pemula tag <a> selepas if (is_singular && …..): . Hasil akhir jadi seperti ini.

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image! ?>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );?>
</a>

Untuk Coding Kedua Ceraian Coding A

Cara ini lebih mudah berbanding sebelum ini, cuma kita perlu berhati-hati dengan conditional tag iaitu else: dan endif. Coding berakhir seperti ini.

<?php else : ?>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
</a>
<?php endif; ?>

Kita sudah siap edit semuanya. Kita refresh balik coding asal dan lihat hasil akhir.

Coding Sebelum Edit

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>

Hasil Akhir

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image! ?>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );?>
 </a>
<?php else : ?>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
</a>
<?php endif; ?>

Sekian sudah tutorial Membuat Header Twenty Ten Theme Sebagai Link ke Homepage. Harap maaf kalau tutorial ini terlalu panjang. Saya sudah pastikan coding ini berfungsi dan ada fungsi fallback.
Akan datang saya akan buat tutorial header dengan hover image effects.