8/8/2019 Slice Web Design
1/26
WP-Designer Theme Whoa?
Buat File layout di photoshop------>>>>>>>lanjutkan dengantekhnik ini:P
Sorry dalam bahasa inggris dulu
tapi..codingnya pake bahasaIndonesia kok.
Source :http://themetation.com
Structuring
This is a very important part in designing a web layout. We need to structure our layout beforeopen 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. Header2. Posting area3. Sidebar4. Single page5. Comment6. Feedback7. Searching field8. Page menu9. RSS10.Archives, Links and About Page
Something we need to keep in mind. We cant 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.
Final Result
http://themetation.com/http://themetation.com/http://themetation.com/http://themetation.com/8/8/2019 Slice Web Design
2/26
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 theruler. 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 asshown 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
http://themetation.com/img/how1/large.jpg8/8/2019 Slice Web Design
3/26
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 theselection. Go to Select > Modify > Contract > 1px. After that, create a new layer. Go to Edit
> Stroke > 1px, white, inside.
Step 4
8/8/2019 Slice Web Design
4/26
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. GradientOverlay 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.
Step 6
8/8/2019 Slice Web Design
5/26
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 fontfor testing. Dont 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 alreadysorry about that Then, For thesearch area, create a rounded rectangle with a maximum width of330px. Fill it with black color
and set it blend mode to soft light. Create another rounded rectangle inside. This will be ourinput field. Fill it with white color. Apply 1px inside stroke with color#d0ceae. Then, apply
8/8/2019 Slice Web Design
6/26
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 onhow to create a custom shapein 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.
Step 10
http://kailoon.com/how-to-create-custom-shape/http://kailoon.com/how-to-create-custom-shape/http://kailoon.com/how-to-create-custom-shape/http://kailoon.com/how-to-create-custom-shape/8/8/2019 Slice Web Design
7/26
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 cant, 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, weare 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.
http://themetation.com/img/how1/single-large.jpg8/8/2019 Slice Web Design
8/26
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 sangatberhati-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:
8/8/2019 Slice Web Design
9/26
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.
8/8/2019 Slice Web Design
10/26
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.
Gallery
ContactAbout
8/8/2019 Slice Web Design
11/26
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;
8/8/2019 Slice Web Design
12/26
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 forpage 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 wordpressdefault class for active page list */
color: #fff;background-color: #2c4106;
}
Langkah 5 - Struktur Sidebar
8/8/2019 Slice Web Design
13/26
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
Category
Links
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 tingkatkedua 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;
}
8/8/2019 Slice Web Design
14/26
#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.
Comments
8/8/2019 Slice Web Design
15/26
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;background-color: #eae8c6;
8/8/2019 Slice Web Design
16/26
8/8/2019 Slice Web Design
17/26
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.
/* get the home URL */ /* display the blog description */ /* display the blog name */ /* get the home URL for template'sdirectory */
/* display the page listin descending order withour title */ /* display the list of blogrolls */
===============within a loop=============== /* display the contents of the current post */ /* the text "read more" will not show up */
/* dispaly the tags of the post */ /* display the time of the current post */ /* display the numeric ID of the current post */ /*display a link to them comment*/ /* display the author's name of the post */ /* display the unique numeric user ID for the authorof a post */
8/8/2019 Slice Web Design
18/26
/* display the commentor avatar ina size of 80px X 80px */ /* display the comment content */ /* display the URL for the permalink of the postcurrently being processed */
============Paganavigation=============== /* display a link tothe previous post with an anchor text as "Previous Post" */ /* display a link to the nextpost with an anchor text as "Next Post" */ /* display a link to theprevious page with an anchor text as "Previous Page" */ /* display a link to the nextpage with an anchor text as "Next Page" */ /* display a link to the previous image withinthe gallery */ /* display a link to the previous image within thegallery */
============file linking================= /* load header.php */ /* load sidebar.php */ /* load footer.php */ /* load comments.php */ /* load searchform.php*/ /* load about.php */ /* load featured-post.php */
============widgetize sidebar============
/* if it is a widgetize sidebar, defince this as sidebar 2*/
============define the page template name in admin panel==================
============normal post loop==================/* a normal posts loop, the contents go here */
/* end loop */
============query post loop================== /* get all posts excluding posts undercategory with ID=3 *//* the contents go here *//* end loop */
============comment loop==================
8/8/2019 Slice Web Design
19/26
/* start the comments loop *//* end comments loop */
============use of custom fields==================
/* display the custom field value */
/* end loop */
Pelaksanaan
header.php
Mudah bagian untuk kalian.
8/8/2019 Slice Web Design
20/26
Sidebar
/* if it support widgetize sidebar, declare the widget sidebar as
sidebar 1 *//*A template tag to list down the categories with a title
named Categories */
/* if it support widgetize sidebar, declare the widget sidebar assidebar 2 */
/*A template tag to list downthe blogroll */
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.
/* request page which name equalto "about" */
/* define the custom field with key = mydesc */
About Me/* to call the value for the mydesc and so on
*/
8/8/2019 Slice Web Design
21/26
8/8/2019 Slice Web Design
22/26
8/8/2019 Slice Web Design
23/26
/* end loop */
Pelaksanaan
page.php
Sebuah template halaman yang kita gunakan untuk membuat halaman. Tidak jauh
berbeda dengan index.php.
/* get the header */
/* if have post */ /* page content */
/* end loop */
/* appearwhen admin is login */ /* get the sidebar */ /* 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.
/* if haveposts */
8/8/2019 Slice Web Design
24/26
comments.php
Komentar bagian untuk menampilkan semua komentar di posting tunggal. Biasanya, kami hanya
mengedit mulai dari garis 18. /* if comments exist */
Comments /* comments loop start */
/* comments content*/ /* if
comment is under moderation, this line will be shown */Your comment is awaiting moderation.
/* the editlink for the admin*/
/* to get the avatar of
the commentor */
/* comments loop end*/
Comments are closed.
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 akanmenampilkan template arsip di bawah ini.
8/8/2019 Slice Web Design
25/26
*/?>
Archives by Month: /* to list the archives in
monthy */Archives by Subject: /* to list the categories
without title */
search.php, searchform.php
Search.php adalah untuk menampilkan hasil pencarian sementara searchform.php hanya berisi
searchform yang kita gunakan. bawah ini searchform tersebut.
8/8/2019 Slice Web Design
26/26
Top Related