11 Trik WordPress Conditional Tags

Conditional Tags merupakan salah satu elemen paling penting pada WordPress, mengingat hampir tidak ada (atau mungkin tidak ada) themes dan plugin yang tidak menggunakan Conditional Tags.

Konsep Conditional Tags itu sederhana sekali—sama dengan pernyataan berkondisi dalam dunia pemrograman, yaitu pengambilan keputusan berdasarkan dua atau lebih kemungkinan. WordPress telah menyediakan kemungkinan tersebut berupa tags untuk Conditional Tags, yang bisa dilihat pada WordPress Codex.

Sebagai ilustrasi, perhatikan baris contoh Conditional Tags berikut ↓

<?php if (is_author()) { ?>
     <h1>Posts written by <?php the_author(); ?></h1>
<?php } else (is_archive()) { ?>
      <h1>You are viewing the archives</h1>
<?php } ?>

Kode tersebut menyatakan: jika halaman arsip penulis (author) dibuka, maka tampilkan kode <h1>Post written by [author name]</h1>. Jika halaman arsip (archive.php) dibuka, maka tampilkan <h1>You are viewing archives</h1>.

Satu lagi yang lebih kompleks menggunakan elseif ↓

<?php if (is_author()) { ?>
     <h1>Posts written by <?php the_author(); ?></h1>
<?php } elseif (is_category()) { ?>
     <h1>You are viewing the <?php single_cat_title(); ?> category</h1>
<?php } else (is_archive()) { ?>
      <h1>You are viewing the archives</h1>
<?php } ?>

Menyatakan: jika halaman arsip penulis (author) dibuka, maka tampilkan kode <h1>Post written by [author name]</h1>. Jika arsip kategori dibuka maka tampilkan kode <h1>You are viewing the [category name] category</h1>. Jika halaman arsip (archive.php) dibuka maka tampilkan <h1>You are viewing archives</h1>.

Penggunaan Conditional Tags tidak sebatas heading dinamis saja, tetapi juga bisa dipakai untuk membuat sidebar yang berbeda untuk halaman home dengan single post misalnya—semua tergantung kebutuhan dan kreativitas masing-masing.

Berikut ini saya kutip beberapa contoh bagus pemanfaatan Conditional Tags dari artikel saya yang lalu serta dari artikel blog lain yang saya temukan.

1. Dynamic Heading

<div id="header">
      <div id="headerimg">
              <?php if ( is_home () ) : ?>
              <p id="name"><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></p>
              <h1 id="tagline"><?php bloginfo('description'); ?></h1>
              <?php else : ?>
              <p id="name"><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></p>
              <div class="description"><?php bloginfo('description'); ?></div>
              <?php endif; ?>
	</div>
</div>

Sumber: Trik Membuat Level Heading Blog WordPress Lebih SEO-friendly.

2. Dynamic Menu Highlighting

<ul class="menu">
	<li class="<?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists('is_tag') and is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>" title="<?php _e('Home'); ?>"><?php _e('Home'); ?></a></li>
	<?php wp_list_pages('sort_column=post_title&depth=1&title_li='); ?>
	<?php wp_register('<li>','</li>'); ?>
</ul>

Sumber: Belajar WordPress — Membuat Dynamic Highlight Menu.

3. Two-Tiered Conditional Navigation

PHP:

<ul id="nav">
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
<?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<ul id="subnav">
<?php echo $children; ?>
</ul>
<?php } else { ?>
<?php } ?>

CSS:

* {margin:0;padding:0}
#nav {background:#577da2;border-bottom:1px solid #FFF;height:32px}
#nav li {margin-right:25px}
#nav li, #subnav li {float:left;list-style:none}
#nav a, #nav a:visited {color:#FFF;text-decoration:none;font-weight:bold}
#nav a:hover, #nav a:active,
li.current_page_parent a,
li.current_page_parent a:visited,
#nav li.current_page_item a,
#nav li.current_page_item a:visited {background:#295887}
#subnav {background:#e6eef7;border-top:2px solid #577da2;border-bottom:2px solid #cad8e6;height:28px}
#subnav li {border-right:1px solid #295887;padding:0 7px}
#subnav a, #subnav a:visited {color:#295887;text-decoration:none;font-weight:bold	}
#subnav a:hover, #subnav a:active,#subnav li.current_page_item a,#subnav li.current_page_item a:visited {text-decoration:underline}

Sumber: Creating Two-Tiered Conditional Navigation in WordPress.

4. Author Signature

Kode berikut berguna untuk menampilkan gambar tanda tangan sendiri di setiap postingan ↓

<div class="entry">
<?php the_content(); ?>
<?php if (is_single())
{
echo '<div class="signature">
<img src="http://example.com/images/signature.gif" alt="" />
</div>';
} ?>

Sumber: Adding a Signature To Personalize Your Blog Post.

5. WordPress Meta

WordPress Meta (yang biasa kita lihat di sidebar) bisa kita tampilkan hanya pada logged in user menggunakan kode berikut ↓

<?php if (is_user_logged_in()) { ?>
<div id="site-meta">
<div id="meta-panel">
<ul>
<?php wp_register() ?>
<li><?php wp_loginout() ?></li>
</ul>
</div>
<a href="" id="meta-anchor">Site Meta</a>
</div>
<?php } ?>

Sumber: A Better Spot for The WordPress Meta.

6. Breadcrumb Navigation

Alternatif menampilkan sistem navigasi berbentuk breadcrumb selain memakai plugin adalah dengan memanfaatkan Conditional Tags.

Untuk kode lengkap silakan lihat sumbernya: WordPress Conditional Tags In Action (Breadcrumbs).

7. Dynamic Sidebar

Ingin membuat sidebar pada single post berbeda dengan halaman lain? Buat dua file untuk sidebar pada single post dan sidebar untuk halaman lain, misal sidebar_single.php dan sidebar.php. Kemudian manfaatkan pernyataan berkondisi if ↓

<?php if ( is_single () ) : ?>
<?php include (TEMPLATEPATH . '/sidebar_single.php'); ?>
<?php else : ?>
<?php include (TEMPLATEPATH . '/sidebar.php'); ?>
<?php endif; ?>

8. Unique Single Template

Bila ingin menggunakan template berbeda untuk postingan pada kategori tertentu, gunakan kode berikut ↓

<?php
  $post = $wp_query- >post;
  if ( in_category('1') ) {
  include(TEMPLATEPATH . '/single1.php');
  } elseif ( in_category('2') ) {
  include(TEMPLATEPATH . '/single2.php');
  } else {
  include(TEMPLATEPATH . '/single_other.php');
  }
? >

Sumber: WordPress Theme Hacks.

9. Author Comments Highlighting

Membuat tampilan komentar penulis berbeda dengan komentar yang lain. Sudah pernah saya tulis di artikel Belajar CSS Yuk: Membuat Highlight Komentar.

10. SEO-friendly Title Tag

<title><?php
        if ( is_single() ) { single_post_title(); }
        elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); }
        elseif ( is_page() ) { single_post_title(''); }
        elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); }
        elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }
        else { bloginfo('name'); wp_title('|'); get_page_number(); }
    ?></title>

Sumber: The WordPress Theme Header Template.

11. Conditional Stylesheet

Tidak semua kode pada file stylesheet (style.css) pada theme terpakai pada semua halaman. Untuk itu kita perlu membuat stylesheet yang lebih spesifik untuk setiap halaman, misalnya untuk home, single post, page, dan archive. Hal ini perlu dilakukan supaya CSS yang dipakai lebih efektif karena ukuran file akan diperkecil serta mempersingkat waktu download file.

<link rel="stylesheet" href="http://www.domain.com/wp-content/themes/default/style.css" type="text/css" media="screen" />
<?php if (is_home() ) { ?>
<link rel="stylesheet" href="http://www.domain.com/wp-content/themes/default/index.css" type="text/css" media="screen" />
<?php } elseif ( is_single() ){ ?>
<link rel="stylesheet" href="http://www.domain.com/wp-content/themes/default/single.css" type="text/css" media="screen" />
<?php } elseif ( is_page() ){ ?>
<link rel="stylesheet" href="http://www.domain.com/wp-content/themes/default/page.css" type="text/css" media="screen" />
<?php } elseif ( is_archive() ){ ?>
<link rel="stylesheet" href="http://www.domain.com/wp-content/themes/default/archive.css" type="text/css" media="screen" />
<?php } elseif ( is_search() ){ ?>
<link rel="stylesheet" href="http://www.domain.com/wp-content/themes/default/search.css" type="text/css" media="screen" />
<?php } elseif ( is_404() ){ ?>
<link rel="stylesheet" href="http://www.domain.com/wp-content/themes/default/404.css" type="text/css" media="screen" />
<?php } elseif ( is_attachment() ){ ?>
<link rel="stylesheet" href="http://www.domain.com/wp-content/themes/default/single.css" type="text/css" media="screen" />
<?php } ?>

Kode di atas akan menyertakan file style.css (yang dipakai untuk semua halaman) dan satu lagi file CSS khusus untuk halaman tertentu.

Related Posts ↓

• Belajar WordPress — Membuat Dynamic Highlight Menu
• 20+ Tips Lengkap Optimasi WordPress
• Blue State, A WordPress 2.5.x Gallery Compatible Theme
• Copyblogger.com Theme for Drupal
• Belajar CSS Yuk: Membuat Highlight Komentar
• mulai belajar CSS
• Memilih Disain Blog: Antara “Professional” dengan “Personal”
• Free Pro WordPress Theme: Copyblogger
• 7 Cara Mempercepat Akses Blog
• Mudahnya Mendapatkan Tema Premium Dengan Gratis