Wednesday 19 December 2012

Dheeka Holic: Membuat Tema Simple Untuk Wordpress

Dheeka Holic: Membuat Tema Simple Untuk Wordpress: Untuk mulai membangun tema Anda , terlebih dahulu membuat sub -folder dalam direktori wp-content/themes dalam folder WordPress Anda ...
Posted by at 2 comments

Membuat Tema Simple Untuk Wordpress

Untuk mulai membangun tema Anda, terlebih dahulu membuat sub-folder dalam direktori wp-content/themes dalam folder WordPress Anda. Untuk tujuan dari tutorial ini, kita akan memanggil folder "tutorial_theme". Nama folder harus sesuai deng`n nama tema yang ingin Anda buat. Untuk melakukan hal ini Anda dapat menggunakan salah satu klien FTP favorit Anda atau File Manager di cPanel Anda.

Sebelum Anda mulai membuat tema, Anda harus memutuskan bagaimana tata letak situs web Anda akan terlihat seperti. Dalam tutorial ini kita akan membangun theme WordPress yang terdiri dari header, sidebar, area konten dan footer, seperti yang ditunjukkan di bawah ini:
Untuk melakukan hal ini kita harus membuat file-file berikut ke direktori tutorial_theme:

  • header.php - File ini akan berisi kode untuk bagian header dari tema;
  • index.php - Ini adalah file utama untuk tema. Ini akan berisi kode untuk Main Area dan akan menentukan di mana file lainnya akan dimasukkan;
  • sidebar.php - File ini akan berisi informasi tentang sidebar;
  • footer.php - File ini akan menangani footer Anda;
  • style.css - File ini akan menangani styling tema baru Anda;

Sekarang mari kita lihat lebih dekat pada setiap file dan apa yanf harus diisi: 

Header.php :

Dalam file ini, Anda harus menambahkan kode berikut:

<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1>HEADER</h1>
    </div> 
Pada dasarnya, ini adalah kode HTML sederhana dengan satu baris yang berisi kode php dan fungsi WordPress standar. Dalam file ini Anda dapat menentukan meta tag seperti judul website Anda, meta deskripsi dan kata kunci untuk halaman Anda.

Tepat setelah judul baris kita tambahkan <link rel = "stylesheet" href = "<php bloginfo ('stylesheet_url');?>"> untuk memberitahu WordPress untuk memuat file style.css. Ini akan menangani styling dari situs web Anda. Kode <php bloginfo ('stylesheet_url');?> adalah bagian dari garis yang berfungsi memuat file stylesheet pada Wordpress.

Selanjutnya, kita telah menambahkan awal dari "div" dengan wrapper class yang akan menjadi wadah utama website. Kita telah menetapkan kelas untuk itu sehingga kita bisa memodifikasi melalui file style.css.

Setelah itu kita telah menambahkan HEADER label sederhana dibungkus dengan "div" dengan kelas "header" yang akan ditentukan kemudian dalam file stylesheet.

index.php
 <?php get_header(); ?>
   
<div id="main">
  <div id="content">
    <h1>Main Area</h1>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <h4>Posted on <?php the_time('F jS, Y') ?></h4>
    <p><?php the_content(__('(more...)')); ?></p>
    <hr>
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
  </div>

  <?php get_sidebar(); ?>

  </div>

<div id="delimiter"></div>

<?php get_footer(); ?>

Kode dalam file ini dimulai dengan <get_header php ();?> Yang akan menyertakan file header.php dan kode di dalamnya di halaman utama. Ini menggunakan fungsi WordPress internal untuk melakukan hal ini. Kita akan menjelaskan hal ini secara rinci nanti dalam tutorial ini. Kemudian kita telah menempatkan teks di Area Main untuk menunjukkan bagian mana dari tema Anda ditampilkan di daerah ini.

Beberapa baris berikutnya terdiri dari kode PHP dan standar Wordpress fungsi. Kode ini memeriksa apakah Anda memiliki posting di blog Anda diciptakan melalui wilayah administrasi Wordpress dan menampilkannya.

Selanjutnya, kita menyertakan file sidebar.php dengan baris ini - <php get_sidebar ();?>. Dalam file ini Anda dapat menampilkan kategori posting Anda, arsip dll

Setelah baris ini, kita menyisipkan "div" kosong yang akan memisahkan area Main dan Sidebar dari footer.

Akhirnya, kita menambahkan satu baris terakhir - <php get_footer ();?> Yang akan menyertakan file footer.php di halaman Anda.
 
 sidebar.php

<div id="sidebar">
  <h2 class="sidebartitle"&ft;<?php _e('Categories'); ?></h2>
  <ul class="list-cat">
    <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
  </ul>
 
  <h2 class="sidebartitle"><?php _e('Archives'); ?></h2>
    <ul class="list-archives">
      <?php wp_get_archives('type=monthly'); ?>
    </ul>
</div>
 Dalam file ini kita menggunakan fungsi internal Wordpress untuk menampilkan Kategori dan Arsip posting. Fungsi WordPress mengembalikan mereka sebagai daftar item, karena itu kita telah membungkus fungsi yang sebenarnya dalam daftar (tag <ul>).

footer.php
<div id="footer">
  <h1>FOOTER</h1>
</div>

</div>

</body>
</html>
Dengan kode ini kita menambahkan label FOOTER sederhana. Alih-alih kode ini Anda dapat  
menambahkan link, teks tambahan, informasi hak cipta untuk theme dan benda-benda tambahan.

style.css

body {
    text-align: center;
}

#wrapper {
    display: block;
    border: 1px #a2a2a2 solid;
    width:90%;
    margin:0px auto;
}

#header {
    border: 2px #a2a2a2 solid;
}

#content {
    width: 75%;
    border: 2px #a2a2a2 solid;
    float: left;
}

#sidebar {
    width: 23%;
    border: 2px #a2a2a2 solid;
    float: right;
}

#delimiter {
    clear: both;
}

#footer {
    border: 2px #a2a2a2 solid;
}

.title {
    font-size: 11pt;
    font-family: verdana;
    font-weight: bold;
}
 File css sederhana menetapkan terlihat dasar tema Anda. Baris tersebut mengatur latar belakang halaman Anda dan mengelilingi bagian utama dari situs Anda dengan perbatasan untuk kenyamanan. Pada titik ini website Anda akan terlihat seperti ini:


Selamat Mencoba ^_^
Posted by at 0 comments
Labels:
Subscribe to: Posts (Atom)