Sorry dalam bahasa inggris dulu tapi..codingnya pake bahasa Indonesia kok. Source :

(1)

WP-Designer Theme Whoa?

Buat File layout di photoshop---



>>>>>>>lanjutkan dengan

tekhnik ini…:P

Sorry dalam bahasa inggris dulu…tapi..codingnya pake bahasa

Indonesia kok……….

Source :

http://themetation.com

Structuring

This is a very important part in designing a web layout. We need to structure our layout before

open Photoshop. The first thing is the purpose of the layout. In our case, this will be a blog

layout for WordPress. So, below is what we have in a blog:

1. Header

2. Posting area

3. Sidebar

4. Single page

5. Comment

6. Feedback

7. Searching field

8. Page menu

9. RSS

10. Archives, Links and About Page

Something we need to keep in mind. We can’t put all things into one basket. So, we CANNOT:

1. Display too many things in one single page.

2. Use too many colors and font type.

In this sample, I also try to make is as simple as possible because the purpose of this series of

tutorial is to give an example on how to create a wordpress theme. I am going to have a featured

post section on the main page. Below is the Final image that we will create.

(2)

Photoshop

Step 1

Create a new document with

1024px X 768px

as we are going to create a layout which suit for

1024px resolution

. Fill it the background layer with

#eae8c6

. Now,

CTRL + R

to bring out the

ruler. Draw some guide line for the divine proportion we need. Before this, make sure it is snap.

Go to

View

>

snap

(selected).

Step 2

Grab the

rectangle tool

and draw a header for it. The height, you have to estimate how much

you want.

Balance

is the main thing you need to concern. Then, apply the blending option as

shown below. A

black to white gradient

with

soft light

blend mode. Create another rectangle,

apply

gradient overlay

with setting as shown below. Put it

1px

below the green bar. It will

make it more details. Then, draw a

1 pixel line

and put it right

above

the gap between the two

(3)

bars you created before. Give it a darker color.

Step 3

I use

Myriad Pro

. So, you guys can edit it by yourself later. Apply

drop shadow

with the

setting shown below. Then, also apply

Gradient Overlay

with

12% opacity

,

black to white

.

For the white outline stroke. Simply hold the

CTRL tab

and

click

on the text layer to get the

selection. Go to

Select > Modify > Contract > 1px

. After that,

create a new layer

. Go to

Edit

> Stroke > 1px, white, inside

.

(4)

Draw a rectangle

, remember, the maximum width you can use is

600px

. Ok, make its white

color. Apply

1px inside white

stroke. And,

Gradient Overlay

with the setting as shown below.

Step 5

The read more button is actually using the same technique where we used for the logo. This time,

we apply

Inner Glow

with

8px

size and

75% Opacity

in

Soft Light

Blend Mode.

Gradient

Overlay

with

70% opacity

also in

Soft Light

Blend Mode. Finally, A

1px outside stroke

with

color

#47670b

. Then, for the

1px inside white stroke

. It is same with what we did in step 3.

(5)

Place in some dummy text and photo. You will have something like this. You can use a text

generator for this.

Step 7

Put in some Dummy Text again. Try to use

none anti-alias font

for testing. Don’t forget what a

wordpress theme needed. Post title, tags, post date, comments number. This time, I add in author

photo part to be shown in every post.

Step 8

Place a RSS icon. I forgot where I downloaded it already…sorry about that… Then, For the

search area, create a rounded rectangle with a maximum width of

330px

. Fill it with

black color

and set it blend mode to

soft light

. Create another

rounded rectangle

inside. This will be our

input field. Fill it with

white color

. Apply

1px inside stroke

with color –

#d0ceae

. Then, apply

(6)

inner Glow, with setting shown below. After that, place the searching icon.

Step 9

Draw a

rounded rectangle

and use the pen tool to draw a dialog box as shown below. You can

refer to my previous tutorial in LoonDesign on how to create a custom shape in photoshop. Then,

apply

drop shadow

on it. Use the rectangle tool to create the categories and links content box.

The maximum width will be

160px

. We need a

10px

space in between them.

(7)

We are almost there. Now, we will use the same technique we used to create the header part.

Conclusion

You may found that I do not mention about the page navigation part. I think it is too simple for

you. Try it out yourself. If really can’t, I am also providing the source file for you here. Overall,

there is several things we need to consider when creating a wordpress theme. In this example, we

are creating for blogging purpose. So, the major section will be, categories, tagging, author

photo, comments and also the RSS feed. I prefer to make things more organizes. So, you can

found that all the layers in my psd file are well renamed and each section is well separated. This

is for future modification purpose and also for my dear reader to modify it easily.

Single Page

As we are creating theme for wordpress, there must be a single page to display a post and

comment section. Here is the final output.

Sebelum kita potong, kita perlu memastikan komponen apa yang kita dapat menggantinya dengan css

dan bagian mana kita perlu keluar slice. Juga, pertimbangkan gambar latar belakang yang kita hanya

dapat menggunakan gambar lebar 1px dan mengaturnya untuk mengulang di latar belakang. Ini akan

menghemat bandwidth lebih banyak dan kapasitas sementara juga menambah waktu loading. Pergi ke

View snap>. Kita perlu memastikan alat pengiris snap dapat otomatis ke tepi dari objek yang kita

butuhkan. Untuk memilih alat slice, cukup tekan pada 'k' dari keyboard.

(8)

Karena langkah-langkah mengiris tidak jelas, jadi saya membuat video ini untuk Anda. Saya berharap

video singkat ini bisa menjelaskan lebih baik. Berikut adalah beberapa tombol shorcut jika anda

menggunakan PC:

* K »Slice Tool

* Space Bar + Mouse Drag »Pindah layar

* CTRL + ALT + SHIFT + S »Simpan untuk web

Ketika Anda akan memilih irisan untuk menyimpan untuk web.

* Space Bar + Mouse Drag »Pindah layar

* SHIFT + Waktu Klik Pilih »beberapa iris

Di sini, Anda mungkin memperhatikan bahwa saya akan menyimpan gambar layout ke PNG-24 yang jelas

tetapi dengan sedikit peningkatan ukuran file.

Berulang image

Kami menggunakan latar belakang header sebagai gambar berulang. Dalam hal ini, kita harus sangat

berhati-hati untuk mengiris keluar perbatasan dua warna yang berbeda. Lihat layar shot di bawah ini.

Gambar Slice

Untuk memotong gambar penuh, kita perlu untuk memperbesar selalu. Terkadang kita perlu zoom

maksimum (1600) untuk mendapatkan hasil terbaik. Sebagai contoh:

(9)

CSS / HTML Coding

Kita perlu mengetahui bagian utama untuk layout sebelum kita mulai. Bagian yang harus

dipertimbangkan adalah:

1. Wrapper (untuk memegang seluruh tata letak kecuali footer)

2. Header (untuk bagian header termasuk navigasi halaman)

3. Konten (untuk memegang area posting dan juga sidebar)

4. Waktu-pelana (untuk area posting, komentar bagian dan menanggapi bagian)

5. Col kanan (sidebar, RSS, tentang aku dan kolom pencarian)

6. Footer (footer)

Persiapan

Saya menggunakan Dreamweaver sebagai editor. Sebelum kita mulai. Buat file index.html stlye.css dan

sebuah. Tempatkan kode di bawah sebelum judul di index.html tersebut.

Langkah 1 - Menyiapkan struktur Utama

Berikut adalah wadah utama untuk tata letak. Aku meletakkan footer keluar dari pembungkus untuk

lebar penuh untuk resolusi yang berbeda.

<div id="wrapper">  <div id="content"> <div id="left-col"></div> <div id="right-col"></div> </div> </div>

(10)

<div id="footer"></div>

Langkah 2 - Tambahkan More Details Ke Dalam Bagian Tertentu

Berikut adalah wadah utama untuk tata letak. Aku meletakkan footer keluar dari pembungkus

untuk lebar penuh untuk resolusi yang berbeda.

<div id="wrapper">

<div id="menu">

<ul>

<li class="page_item"><a href="#">Gallery</a></li> <li class="page_item"><a href="#">Contact</a></li>

<li class="page_item"><a href="#">About</a></li>

</ul> </div> </div>  <div id="content">  <div id="left-col">

<div id="featured-post"></div>

<div class="post"></div>

</div>  <div id="right-col">

<div id="feed"></div> <div id="searchform"></div> <div id="about"></div>  <div id="sidebar"> <div id="sidebar1"></div>

(11)

<div id="sidebar2"></div> </div> </div> </div> </div> <div id="footer"></div>

Langkah 3 - CSS Untuk Kontainer Utama

Berikut adalah wadah utama untuk tata letak. Aku meletakkan footer keluar dari pembungkus

untuk lebar penuh untuk resolusi yang berbeda.

#wrapper { width: 960px; margin: 0 auto; } #header { width: 960px; height: 100px; float: left; } #content { width: 960px; float: left; } #content #left-col { width: 600px; float: left; position: relative; padding-right: 30px; } #content #right-col { width: 330px; margin-top: 20px; float: left; position: relative; }

#content #right-col #sidebar { width: 330px; float: left; position: relative; } #footer { width: 100%; float: left;

(12)

background: url(images/footer-bg.png) repeat-x top left; height: 23px;

padding-top: 40px; color: #fff;

}

Langkah 4 - CSS Untuk Daftar Halaman

Kita tahu bahwa menu akan menempel ke sisi kanan. Dalam hal ini, menu akan dalam urutan. Jadi, kita

perlu untuk mengapung dengan benar.

#header #menu { float: left; width: 500px; margin-top: 38px; } #header #menu ul { width: 500px; list-style: none; float: right; text-align: right; }

#header #menu ul li.page_item { /* page_item is wordpress default class for page list */

float: right; }

#header #menu ul li.page_item a { padding: 4px 8px;

display: block; margin: 0 7px 0 0; float: left;

text-decoration: none;

font: 900 14px Arial, Helvetica, sans-serif; color: #a9bf78;

-moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; }

#header #menu ul li.page_item a:hover { color: #fff;

}

#header #menu ul li.current_page_item a { /* current_page_item is wordpress default class for active page list */

color: #fff;

background-color: #2c4106; }

(13)

WordPress memiliki struktur sidebar default. Ini adalah desain untuk cocok untuk semua widget Anda

akan digunakan di masa depan. Widget yang Anda terapkan akan dimulai pada tingkat kedua dari daftar.

<div id="sidebar"><h3>Sidebar</h3>  <div id="sidebar1"> <ul> <li><h2>Category</h2>

<ul> <li></li> </ul> </li> <li><h2>Links</h2> <ul> <li></li> </ul> </li> </ul> </div> </div>

Langkah 6 - CSS Untuk Struktur Sidebar

WordPress memiliki struktur sidebar default. Ini adalah desain untuk cocok untuk semua widget

Anda akan digunakan di masa depan. Widget yang Anda terapkan akan dimulai pada tingkat

kedua dari daftar.

#sidebar ul { list-style: none; } #sidebar1 { float: left; width: 160px; padding-right: 10px; } #sidebar2 { float: left; width: 160px; } #sidebar ul { } #sidebar ul li { float: left; width: 158px; background-color: #d7d39a; border: 1px solid #bbb875; margin-bottom: 10px; }

(14)

#sidebar ul li h2 { /* this is the widget title */ padding: 3px 4px 6px;

font: 400 18px Arial, Helvetica, sans-serif; color: #4c6b0d;

}

#sidebar ul li ul { }

#sidebar ul li ul li { /* begin for the widget list */ float: left; width: 158px; border: 0; margin-bottom: 0; } #sidebar ul li ul li a { border-top: 1px solid #bbb875; float: left; width: 150px; text-decoration: none; color: #5d5b35; padding: 2px 4px; } #sidebar ul li ul li a:hover { color: #fff; background-color: #bbb875; }

Langkah 7 - Komentari Bagian Untuk Page Single

Berikut adalah bagian komentar.

<div id="comments">

<h3 id="comment-title">Comments</h3> <ol>

<li>

</div>

</div> </li>

(15)

</div> </li> </ol>

</div>

Langkah 8 - CSS Untuk Bagian Komentari

Saya tidak akan menunjukkan struktur halaman di sini karena itu sebenarnya mirip dengan halaman

indeks. tapi saya memperlihatkan kepada Anda bagian komentar.

#comments { margin-top: 15px; float: left; width: 600px; } h3#comment-title {

background: url(images/comments.png) no-repeat top left; width: 600px;

float: left;

text-indent: -9999em; padding-top: 5px; }

#comments ol, #comments ol li { float: left; width: 600px; list-style: none; padding: 0; } #comments ol li .comment-data { float: left; width: 478px; margin-right: 10px; background-color: #d7d39a; padding: 5px 10px; min-height: 120px;

_height: 120px; /* an IE6 hack */ overflow: auto;

border: 1px solid #c1bd85; }

#comments ol li.alt .comment-data { float: left;

width: 478px;

margin-right: 10px;

(16)

padding: 5px 10px; min-height: 120px;

border: 1px solid #c1bd85;

_height: 120px; /* an IE6 hack */ overflow: visible; margin-top: -1px; margin-bottom: -2px; } #comments ol li .comment-info { width: 90px; float: left; text-align: right; font-size: 10px; line-height: 12px; }

#comments ol li .comment-info a img { border: 0; margin-bottom: 5px; } #comments ol li .comment-info a { text-decoration: none; }

Part II

Sekarang, saatnya untuk melakukan pelaksanaannya. Aku memecah menjadi beberapa sub bagian.

Dalam pelaksanaannya, Anda perlu tahu beberapa tag template wordpress. Anda dapat merujuk ke link

ini ketika Anda melakukannya. Mari kita mulai lalu.

Sebelum itu, Anda perlu mendownload dan menginstal localhost di pc Anda. Saya menggunakan xampp

untuk ini. Setelah itu, download wordpress dari situs resmi wordpress. Kemudian, kita akan

menggunakan tema default untuk memulai pelaksanaan wordpress. Berikut ini adalah bagian utama

yang perlu kita ambil peduli dengan. Saya juga membuat beberapa file tambahan untuk tema kita akan

membangun.

Bagian yang akan kita bahas pada bab ini:

1. header.php

2. sidebar.php

3. about.php - file kustom untuk bagian tentang di sidebar.

4. footer.php

5. index.php

6. fitur-post.php - file kustom untuk posting fitur.

7. page.php

8. single.php

9. comments.php

10. archives.php, links.php

11. search.php, searchform.php

12. function.php

(17)

13. image.php

Struktur Dasar WordPress

Berikut adalah struktur dasar dari wordpress.

Sebuah Break Down Dari Template_tags Kami Digunakan

Sepanjang jalan, Anda mungkin tidak tahu apa yang template_tags artinya bagi Anda. Jangan

khawatir, di sini adalah daftar dari mereka dan aku akan mencoba untuk menjelaskan kepada

Anda.

<?php echo get_option('home'); ?> /* get the home URL */

<?php bloginfo('description'); ?> /* display the blog description */ <?php bloginfo('name'); ?> /* display the blog name */

<?php bloginfo('template_directory') ?> /* get the home URL for template's directory */

<?php wp_list_pages('sort_order=desc&title_li='); ?> /* display the page list in descending order withour title */

<?php wp_list_bookmarks(); ?> /* display the list of blogrolls */ ===============within a loop===============

<?php the_content(); ?> /* display the contents of the current post */ <?php the_content(''); ?> /* the text "read more" will not show up */ <?php the_tags('', ' . ', ''); ?> /* dispaly the tags of the post */ <?php the_time('F jS, Y') ?> /* display the time of the current post */ <?php the_ID(); ?> /* display the numeric ID of the current post */

<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> /* display a link to them comment*/

<?php the_author() ?> /* display the author's name of the post */

<?php the_author_ID()?> /* display the unique numeric user ID for the author of a post */

(18)

<?php echo get_avatar( $comment, 80 ); ?> /* display the commentor avatar in a size of 80px X 80px */

<?php comment_text() ?> /* display the comment content */

<?php the_permalink() ?> /* display the URL for the permalink of the post currently being processed */

============Paganavigation===============

<?php previous_post_link('%link', 'Previous Post') ?> /* display a link to the previous post with an anchor text as "Previous Post" */

<?php next_post_link('%link', 'Next Post') ?> /* display a link to the next post with an anchor text as "Next Post" */

<?php posts_nav_link('','','« Previous Entries') ?> /* display a link to the previous page with an anchor text as "Previous Page" */

<?php posts_nav_link('','Next Entries »','') ?> /* display a link to the next page with an anchor text as "Next Page" */

<?php previous_image_link() ?> /* display a link to the previous image within the gallery */

<?php next_image_link() ?> /* display a link to the previous image within the gallery */

============file linking================= <?php get_header(); ?> /* load header.php */ <?php get_sidebar(); ?> /* load sidebar.php */ <?php get_footer(); ?> /* load footer.php */

<?php comments_template(); ?> /* load comments.php */

<?php include (TEMPLATEPATH . '/searchform.php'); ?> /* load searchform.php */

<?php include('about.php'); ?> /* load about.php */

<?php include('featured-post.php'); ?> /* load featured-post.php */ ============widgetize sidebar============

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar2') ) : ?>

/* if it is a widgetize sidebar, defince this as sidebar 2*/ <?php endif; ?>

============define the page template name in admin panel================== <?php

/*

Template Name: Links */

?>

============normal post loop==================

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> /* a normal posts loop, the contents go here */

<?php endwhile; else: ?> <?php endif; ?>/* end loop */

============query post loop================== <?php query_posts($query_string);

while (have_posts()) : the_post(); ?> /* get all posts excluding posts under category with ID=3 */

/* the contents go here */

<?php endwhile; ?>/* end loop */

(19)

<?php foreach ($comments as $comment) : ?> /* start the comments loop */ <?php endforeach; ?>/* end comments loop */

============use of custom fields==================

<?php while (have_posts()) : the_post(); /* start the loop */

$myphoto = get_post_meta($post->ID, "myphoto", TRUE); /* define the custom field key for the post being processed in the loop with the ID */

$mydesc = get_post_meta($post->ID, "mydesc", TRUE); /* define the custom field key for the post being processed in the loop with the ID */

?>

<?php echo $mydesc; ?> /* display the custom field value */ <?php endwhile; ?> /* end loop */

Pelaksanaan

header.php

Mudah bagian untuk kalian.

<body>

<div id="logo"><h1><a href="<?php echo get_option('home'); ?>" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h1></div> <div id="menu"> <ul> <?php wp_list_pages('sort_order=desc&title_li='); ?> </ul> </div> </div>

sidebar.php

Untuk sidebar, wordpress memiliki struktur sendiri untuk itu. Setiap bagian akan mulai dengan

daftar. Biasanya adalah tingkat <li> daftar kedua unordered. Kita perlu mendefinisikan sidebar di

sini. Sehingga kita dapat menerapkan widget di atasnya.

<div id="right-col"> <div id="feed">

<a href="<?php bloginfo('url'); ?>/feed" class="rss">RSS</a>Subscribe to my feed now.

</div>

<?php include (TEMPLATEPATH . '/searchform.php'); ?> /* load a file which named as searchform.php */

<?php include('about.php'); ?> /* load a file which named as about.php */

(20)

<div id="sidebar"><h3>Sidebar</h3> <div id="sidebar1">

<ul>

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>

/* if it support widgetize sidebar, declare the widget sidebar as sidebar 1 */

<?php wp_list_categories('title_li=<h2>Categories</h2>'); ?>

/*A template tag to list down the categories with a title named Categories */

<?php endif; // end of sidebar1 ?> </ul> </div> <div id="sidebar2"> <ul> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar2') ) : ?>

/* if it support widgetize sidebar, declare the widget sidebar as sidebar 2 */

<?php wp_list_bookmarks(); ?>/*A template tag to list down the blogroll */

<?php endif; // end of sidebar1 ?> </ul>

</div> </div> </div>

about.php

Saya buat file ini untuk membuat pekerjaan lebih mudah. Di sini, kita akan memiliki loop untuk meminta

posting yang dinamakan sebagai "tentang". Kami menggunakan query_posts untuk memanggil halaman

- tentang. Setelah itu, kita mendefinisikan 2 kolom kustom untuk itu. Untuk informasi Anda, kami juga

perlu menambahkan 'kunci "dan" nilai "dari bidang adat ketika kita membuat halaman. Sebagai contoh,

kuncinya adalah myphoto dan apa yang perlu Anda lakukan adalah mengetikkan nilai untuk itu di admin

panel.

<?php query_posts('pagename=about'); ?> /* request page which name equal to "about" */

<?php while (have_posts()) : the_post(); /* if have posts */ $myphoto = get_post_meta($post->ID, "myphoto", TRUE); /* define the custom field with key = myphoto */

$mydesc = get_post_meta($post->ID, "mydesc", TRUE); ?> /* define the custom field with key = mydesc */

<h3>About Me</h3>

/* <?php echo $mydesc; ?> to call the value for the mydesc and so on */

(21)

<a href="<?php bloginfo('url'); ?>/about"><img src="<?php echo $myphoto; ?>" alt="<?php bloginfo('blogname'); ?>" title="<?php

bloginfo('blogname'); ?>" /></a><span><?php echo $mydesc; ?> ... <a href="<?php bloginfo('url'); ?>/about">more</a></span>

</div> <?php endwhile; ?> /* end loop */

footer.php

Ini adalah bagian yang paling mudah untuk diimplementasikan.

href="http://wordpress.org">WordPress</a>.</span>

<em>WordPress Theme by <a href="http://themetation.com" target="_blank" title="Themetationn">Themetation</a>.</em> </div> </div> <?php wp_footer(); ?> </body>

index.php

Halaman utama atau halaman blog juga disebut sebagai halaman posting. saya menggunakan

query_posts sini untuk mengecualikan tulisan di bawah kategori dengan ID = 3 yang juga merupakan

kategori untuk posting yang ditampilkan. Kita hanya perlu memasukkan kode yang sesuai. Saya pikir ini

tidak akan menjadi masalah bagi Anda. Perubahan hanya saya buat untuk template wordpress asli

the_content (). Aku menjadikannya sebagai the_content (") yang berarti akan ada ruang kosong untuk

'read more' link. Ini karena saya sudah membuat 1 di bagian bawah setiap pos dan saya memberikan link

yang berarti link ke posting target dengan pointer ke garis membaca istirahat lebih.

<?php include('post.php'); ?> /* load the file named as featured-post.php */

<?php query_posts($query_string.'&cat=-3'); while (have_posts()) : the_post(); ?>

/* start the loop but exclude posts from category ID = 3 */ <div class="post" id="post-<?php the_ID(); ?>">

<img src="<?php bloginfo('template_directory') ?>/images/authors/<?php the_author_ID()?>.jpg" alt="<?php the_author() ?>" title="<?php the_author() ?>" />

(22)

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> /* the post title */

<?php the_content(''); ?> /* the post content,I use an empty '' so that it will not showing anything when we use the read more tag */

</div>

</div>

<?php endwhile; ?>

</div> /* end loop */ </div>

fitur-post.php

Untuk menampilkan posting di bawah kategori posting fitur. Sekali lagi, saya menggunakan loop

query_posts untuk mendapatkan 1 post dari kategori pasca fitur (3). Dan juga mendefinisikan 2 kolom

kustom untuk mereka. Mungkin Anda akan mengatakan bahwa itu terlalu banyak. Karena setiap kali

Anda menulis posting fitur, Anda memerlukan gambar dan deskripsi. Tapi, jika hal ini dapat membantu

situs Anda terlihat lebih terorganisir dan profesional. Mengapa tidak?

<?php query_posts('category_name=featured post&&showposts=1'); ?> /* request post only under category name is featured post and only show maximum of 1 post */

<?php while (have_posts()) : the_post();

$fimg = get_post_meta($post->ID, "thumb", TRUE); /* define the custom field with key = thumb */

$fdesc = get_post_meta($post->ID, "desc", TRUE); ?> /* define the custom field with key = desc */

<div id="featured-post"> <h3>Featured Post</h3> <div class="featured">

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> /* post title */

<span id="f-date"><?php the_time('F jS, Y') ?> . by <?php the_author() ?> . <a href="#"><?php comments_popup_link('No Comments', '1 Comment', '%

Comments'); ?></a></span>

<p><img src="<?php echo $fimg; ?>" width="140px" height="100px" alt="<?php the_title(); ?>" /><?php echo $fdesc; ?></p>

<a href="<?php the_permalink() ?>" id="readmore">read more</a> </div>

(23)

<?php endwhile; ?> /* end loop */

Pelaksanaan

page.php

Sebuah template halaman yang kita gunakan untuk membuat halaman. Tidak jauh berbeda dengan index.php.

<?php get_header(); ?> /* get the header */ <div id="content">

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> /* if have post */

<div class="post" id="post-<?php the_ID(); ?>"> <h2><?php the_title(); ?></h2> /* page title*/

<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?> /* page content */

<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

</div> </div>

<?php endwhile; endif; ?> /* end loop */

<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?> /* appear when admin is login */

</div>

<?php get_sidebar(); ?> /* get the sidebar */ </div>

</div>

<?php get_footer(); ?> /* get the footer */

single.php

Single.php digunakan untuk menampilkan single post dengan komentar dan menanggapi bagian. Saya

hanya akan menampilkan bagian penting untuk itu.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> /* if have posts */

<img src="<?php bloginfo('template_directory') ?>/images/authors/<?php the_author_ID()?>.jpg" alt="<?php the_author() ?>" alt="<?php the_author() ?>" title="<?php the_author() ?>" />

<?php the_content(); ?> /* load post content in full version */ </div>

(24)

comments.php

Komentar bagian untuk menampilkan semua komentar di posting tunggal. Biasanya, kami hanya

mengedit mulai dari garis 18.

<?php if ($comments) : ?> /* if comments exist */ <h3 id="comment-title">Comments</h3>

<ol>

<?php foreach ($comments as $comment) : ?> /* comments loop start */ <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">

<?php comment_text() ?> /* comments content*/

<?php if ($comment->comment_approved == '0') : ?> /* if comment is under moderation, this line will be shown */

<em>Your comment is awaiting moderation.</em> <?php endif; ?>

<?php edit_comment_link('edit','  ',''); ?> /* the edit link for the admin*/

</div>

<?php echo get_avatar( $comment, 80 ); ?> /* to get the avatar of the commentor */

</div> </li>

<?php

/* Changes every other comment to a different class */

$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : ''; /* different style for the class named as "alt" */

?>

<?php endforeach; /* end for each comment */ ?> /* comments loop end*/ </ol>

<?php else : // this is displayed if there are no comments so far ?> <?php if ('open' == $post->comment_status) : ?>

<?php else : // comments are closed ?>

<p class="nocomments">Comments are closed.</p> <?php endif; ?>

<?php endif; ?>

Tepat setelah ini, ada bentuk komentar yang kita tidak berbuat banyak tentang hal itu.

archives.php, links.php

arsip dan link yang kedua template hanya halaman untuk menampilkan konten. Saya hanya akan

menampilkan template arsip di bawah ini.

<?php /*

Template Name: Archives (to display the page template name which you can select from the admin panel when creating a page.

(25)

*/ ?>

<h2>Archives by Month:</h2> <ul>

<?php wp_get_archives('type=monthly'); ?> /* to list the archives in monthy */

</ul>

<h2>Archives by Subject:</h2> <ul>

<?php wp_list_categories('title_li='); ?> /* to list the categories without title */

</ul> </div>

search.php, searchform.php

Search.php adalah untuk menampilkan hasil pencarian sementara searchform.php hanya berisi

searchform yang kita gunakan. bawah ini searchform tersebut.

</form></div>

function.php

Kami menggunakannya untuk menentukan fungsi yang kita butuhkan dalam tema kami. Dalam

kasus kami, saya hanya menggunakannya untuk definisi sidebar.

<?php if ( function_exists('register_sidebar') ) register_sidebar(array('name'=>'sidebar1')); register_sidebar(array('name'=>'sidebar2')); ?>

image.php

Ini adalah file baru sejak 2,5 wordpress. Ini adalah template halaman khusus untuk menampilkan

galeri foto yang kita buat. Sebenarnya, ada tidak jauh berbeda dengan template single.php

normal. Cek di bawah.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> /* if have posts */

<h2><a href="<?php echo get_permalink($post->post_parent); ?>"

rev="attachment"><?php echo get_the_title($post->post_parent); ?></a> » <em><?php the_title(); ?></em></h2>

<p class="attachment"><a href="<?php echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' );

?></a></p> /* the medium size image */

<div class="caption"><?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the "caption" ?></div> /* the photo caption */

(26)

<?php the_content('<p class="serif">Read the rest of this entry »</p>'); ?>

<div class="navigation"> /* image navigation for the gallery */ <div class="alignleft"><?php previous_image_link() ?></div> <div class="alignright"><?php next_image_link() ?></div> </div>