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. 2. 3. 4. 5. 6. 7. 8. 9. 10.
Header Posting area Sidebar Single page Comment Feedback Searching field Page menu RSS 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. Final Result
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
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.
Step 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.
Step 6
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
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.
Step 10
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.
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:
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.
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.
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; }
Langkah 5 - 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
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 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; }
#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
<strong>
<strong>
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;
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
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's directory */ /* display the page list in 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 author of a post */
/* display the commentor avatar in a size of 80px X 80px */ /* display the comment content */ /* display the URL for the permalink of the post currently being processed */ ============Paganavigation=============== /* display a link to the previous post with an anchor text as "Previous Post" */ /* display a link to the next post with an anchor text as "Next Post" */ /* display a link to the previous page with an anchor text as "Previous Page" */ /* display a link to the next page with an anchor text as "Next Page" */ /* display a link to the previous image within the gallery */ /* display a link to the previous image within the gallery */ ============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 under category with ID=3 */ /* the contents go here */ /* end loop */ ============comment loop==================
/* start the comments loop */ /* end comments loop */ ============use of custom fields================== 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 */ ?> /* display the custom field value */ /* end loop */
/* load a file which named as searchform.php */ /* load a file which named as about.php */
Sidebar
/* if it support widgetize sidebar, declare the widget sidebar as sidebar 1 */ Categories'); ?> /*A template tag to list down the categories with a title named Categories */
/* if it support widgetize sidebar, declare the widget sidebar as sidebar 2 */ /*A template tag to list down the 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 equal to "about" */ 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 */
footer.php Ini adalah bagian yang paling mudah untuk diimplementasikan.
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.
/* load the file named as featuredpost.php */ /* start the loop but exclude posts from category ID = 3 */
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? ID, "thumb", with key = thumb */ $fdesc = get_post_meta($post->ID, "desc", field with key = desc */
post&&showposts=1'); ?> /* request post and only show maximum of 1 TRUE); /* define the custom field TRUE); ?> /* define the custom
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 title*/
Read the rest of this page »'); ?> /* page content */ '
<strong>Pages: ', 'after' => '
', 'next_or_number' => 'number')); ?>
/* end loop */ ', ''); ?> /* appear when 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 have posts */
<em> <span class="post-tag">
/* load post content in full version */
/* load the comment section */
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 */
id="comment-">
/* comments content*/ comment_approved == '0') : ?> /* if comment is under moderation, this line will be shown */ <em>Your comment is awaiting moderation. /* the edit link for the admin*/
/* to get the avatar of the commentor */ <strong>
/* comments loop end*/ comment_status) : ?>
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 akan menampilkan template arsip di bawah ini.
*/ ?>
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.
function.php Kami menggunakannya untuk menentukan fungsi yang kita butuhkan dalam tema kami. Dalam kasus kami, saya hanya menggunakannya untuk definisi sidebar. '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. /* if have posts */
post_excerpt) ) the_excerpt(); // this is the "caption" ?>
/* the photo caption */
Read the rest of this entry »'); ?>
/* image navigation for the gallery */
Kesimpulan dan menyebarkan berita! Nah, setelah panjang tutorial. Tentu saja kami berakhir di sini. Saya berharap bahwa Anda dapat belajar sesuatu dari rangkaian tutorial. Saya akan senang jika Anda dapat membantu saya untuk menyebarkan tutorial untuk orang lain. Tapi, ingat untuk menghubungkan kembali ke pos aslinya. Terima kasih. Ok, sekarang Anda dapat kepala ke tema gratis yang baru - superfresh di posting berikutnya untuk demo dan download. Cheers!
 ?>/images/authors/<?php the_author_ID()?>.jpg "<?php the_author() ?>")
<em> <span class="post-tag">
Comments
<strong>
<strong>