Memecah File Themes

Baiklah, karena ke depan kita akan melakukan modifikasi themes yang lebih expert lagi, rasanya akan sangat memusingkan kepala kalau kita masih juga bekerja dengan 1 file index.php dan 1 file functions.php kita butuh file-file lain untuk mengelola semua tampilan themes. Sekaligus memperkenalkan masing-masing fungsi file yang biasanya terdapat di themes2 gratisan.

Baiklah, sebagai awal, silahkan anda buka file index.php didalam file ini sebenarnya terkandung banyak file hehehe… Tapi anda tidak sadar kan? Baiklah. Untuk awalnya, kita pecah dulu file index.php ini menjadi 3 file yaitu header.php, index.php dan footer.php

Sebenarnya suka-suka hati anda sih mau memecahnya dimana. Kalau saya biasanya untuk footer, saya ambil dari baris paling awal hingga kode <div id="maincontent">. Jadi <div id="maincontent"> akan tetap di index.php Ini isi file header.php saya

<html>
   <head>
     <meta charset="<?php bloginfo( 'charset' ); ?>" />
     <title>
     <?php 
        wp_title( '|', true, 'right' );
      bloginfo( 'name' );
     ?>
     </title>
     <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
     <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
   <style type="text/css">
    #header {
      background : url(<?php header_image(); ?>); 
    }
    .blogtitle a, .description {
      color: <?php header_textcolor(); ?>
    }
   </style>
    <?php 
  if ( is_singular() && get_option( 'thread_comments' ) )  wp_enqueue_script( 'comment-reply' );
  if (is_home()) {
    wp_enqueue_script('jquery');
    wp_enqueue_script('easing', get_stylesheet_directory_uri() . '/js/jquery.easing.1.1.js');
    wp_enqueue_script('carousal', get_stylesheet_directory_uri() . '/js/jcarousel.js');
  }
    wp_head();
    ?>
   </head>   
   <body>
    <div id="wrap">
    <div id="header">
      <h1 class="blogtitle"><a href="<?php bloginfo('url');?>"><?php bloginfo('name');?></a></h1>
      <p class="description"><?php bloginfo('description');?></p>      
    </div>
    <div id="menu">
      <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
      <div id="search-nav">
      <form action="<?php bloginfo('url');?>" method="get">
      <input type="text" size="30" name="s" value="Search..." onblur="if (this.value == '') {this.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}"/>
      <input src="<?php bloginfo('template_url');?>/images/spacer.gif" id="searchsubmit" alt="Search" value="" type="image">
      </form>
      </div>
    </div>

Untuk footer, kita ambil mulai <div style="clear:both;"></div> sampai terakhir seperti ini:

     <div style="clear:both;"></div>
     <div id="footer">
        <p><a href="<?php bloginfo('url');?>"><?php bloginfo('name');?></a> 
    &copy 2011 menggunakan <a href="http://wordpress.or.id">WordPress</a><br/>
    <?php if (!is_home()) { wp_title(''); } ?></p>
     </div>
    </div>
  <?php wp_footer();?>
   </body>
</html>

Sisanya biarkan tetap di index.php

Karena kodenya sudah dipecah di 3 file, maka kita perlu menyatukan lagi hehehe…. Ribet banget ya? Ngapain dipecah kalau disatukan lagi xixixixi… Tujuannya agar kita tidak perlu membuka seluruh kode hanya karena ingin mengedit satu atau dua baris kode aja.

Untuk memanggil header dan footer kita gunakan fungsi:

<?php get_header(); ?>

dan

<?php get_footer(); ?>

Tempatkan di baris paling atas dan paling bawah index.php Nah sekarang index.php anda sudah siap dan sudah terpecah. Berikutnya, jika kita mau mengedit bagian header dan menu navigasi, kita cukup membuka file header.php dan kalau mau mengedit footer sudah pasti file footer.php yang kita ambil.

Trus file yang lain gimana bos? Tenang, kita istirahat sejenak. Insya Allah besok dilanjut lagi

Dicari dengan kata kunci:

fungsi div pada php,fungsi div pada html,fungsi div,fungsi file index,memanggil header php,fungsi div dalam php,fungsi div di html,kegunaan div pada php,memanggil file php di html,fungsi div id pada html