WordPress Theme Design การสรางธีมเวิรดเพรส
โดย จักรกฤษณ ตาฬวัฒน (เมน)
www.iMenn.com
โครงสรางของเว็บสวนใหญในปจจุบัน
header (navigation) content footer
sidebar
HTML สราง HTML กอน เนนใส div ครอบใหถูกที่
มองตำแหนงตางๆ เปน <div> wrapper
<div id="wrapper">
header
<div id="header">(ใสสวนหัว เชนโลโก)</div>
(navigation)
content
<div id="nav">(ใสสวนเมนู)</div>
sidebar
footer
<div id="main"> <div id="content">(ใสเนื้อหา)</div> <div id="sidebar">(ใสสวนเสริม)</div> </div><!--main--> <div id="footer">(ใสสวนทาย เชน เครดิต)</div> </div><!--wrapper-->
ครอบ <div> เปนระยะ main
content
sidebar
<div id="main"> <div id="content">(ใสเนื้อหา)</div> <div id="sidebar">(ใสสวนเสริม)</div> </div><!--main-->
ID มีครั้งเดียว Class มีหลายครั้ง item pic
info
<div class="item"> <div class="pic">(ใสรูปขาว)</div> <div class="info">(ใสขอมูลขาว)</div> </div><!--item-->
เขียนโคด HTML ใหครบ #wrapper #header #logo #ad-top #nav #mainnav #searchbox #social #main #content #featured .f-items .pic h3 #items .item h3 .meta .excerpt .pic .info (.item...) .navigation #sidebar .ad-side .widget-tabs .facebook .twitter #footer .copyright .footnav
CSS ตัด CSS ตาม HTML ที่ออกแบบไว
พื้นฐาน CSS (1) Reset http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
Un-reset http://noscope.com/vanilla-css
Box Model http://www.css-reset.com/css-intro-part-4-the-box-model
คำสำคัญ: Padding, Margin, Width
พื้นฐาน CSS (2) CSS Background: ใสรูปพื้นหลัง http://www.w3schools.com/css/css_background.asp
CSS Sprite: ใสรูปพื้นหลังแทนขอความ http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-spritestechniques-tools-and-tutorials/
CSS Inheritance: ใครเจาะจงกวาก็ไดไป http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
การจัด div 330px item
HTML
pic
info
100px
200px
310px
CSS 1. div ลอย ตองมี div ครอบ 2. ระวัง Padding, Margin 3. div ขางนอก ใสคลาส clearfix ใน html 4. div ขางใน ใส CSS เปน pic - float:left, info - float:right
การจัด div (อีกแบบ) 330px item
HTML
pic
info
100px
200px
310px
1. div ขางนอก CSS ใส overflow:hidden แทน 2. div ขางใน CSS: pic - float:left, info - float:right
CSS
ใส css ตาม html ใหครบ #wrapper #header #logo #ad-top #nav #mainnav #searchbox #social #main #content #featured .f-items .pic h3 #items .item h3 .meta .excerpt .pic .info (.item...) .navigation #sidebar .ad-side .widget-tabs .facebook .twitter #footer .copyright .footnav
เราจะได html+css สำหรับใชงานตอไป
เริ่มแบงใสไฟลธีม header.php, footer.php, sidebar.php, style.css
Header, Footer, Sidebar #wrapper #header #logo #ad-top #nav #mainnav #searchbox #social #main #content #featured .f-items .pic h3 #items .item h3 .meta .excerpt .pic .info (.item...) .navigation #sidebar .ad-side .widget-tabs .facebook .twitter #footer .copyright .footnav
#wrapper #header #logo #ad-top #nav #mainnav #searchbox #social #main
#footer .copyright .footnav
#sidebar
header.php
footer.php
sidebar.php
ใสตัวแปรแทนรูป/ไฟล ตางๆ HTML
<link rel="stylesheet" href="style.css" type="text/css" />
header.php
HTML
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<img src="images/logo.jpg" alt="Logo" />
header.php
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="Logo" />
ตัวแปรอื่นๆ WordPress Template Tags
http://codex.wordpress.org/Template_Tags
โพย (Cheat Sheet)
http://notaniche.com/wordpress-cheat-sheets/702/
แลวไฟลหนาตางๆ ละ? WordPress Template Hierarchy
จะแสดงหนาไหน ตอนไหน?
http://digwp.com/2010/09/wordpress-3-template-hierarchy/
เอาแคไฟลที่จำเปนไดมั้ย? หนาที่จำเปน index.php สำหรับแสดง “หลายรายการ” page.php สำหรับแสดง “Page, หนา” เดี่ยวๆ sigle.php
สำหรับแสดง “Post, เรื่อง” เดี่ยวๆ
ชิ้นสวนที่จำเปน
header.php, footer.php, sidebar.php, comments.php
page.php กรณีไมมี comments
Header แสดงเนื้อหา เกิดครั้งเดียว
{
Sidebar Footer
จะเห็นวาแสดงแคสวนเนื้อหา (#content) เพราะที่เหลือแบงชิ้นสวน (header,footer,sidebar) ไวแลว
single.php มี comments เพิ่มเขามา (ไฟล page.php ก็ใชโคดนี้ไดเหมือนกัน)
Header แสดงเนื้อหา
มีสวน comments ดวย
{
Sidebar Footer
จะเห็นวาแสดงแคสวนเนื้อหา (#content) เพราะที่เหลือแบงชิ้นสวน (header,footer,sidebar) ไวแลว
index.php (แบบแสดงรูปดวย)
The Loop จำนวนของการวนลูป (แสดงกี่ขาวตอหนา) ตั้งไดที่ Settings > Reading
ไฟลพิเศษ functions.php
functions.php ที่ควรมี เปดระบบ Sidebar
ใสรูปประจำเรื่อง เปดระบบ Menu
register_sidebar(array( 'id' => 'sidebar-main', 'name'=> "Main Sidebar" )); add_theme_support( 'post-thumbnails' );
register_nav_menus( array( 'abc-main' => __( 'เมนูหลัก', 'abc' ), 'abc-foot' => __( 'เมนูดานลาง', 'abc' ) ));
คำสั่งอื่นๆ http://digwp.com/2010/03/wordpress-functions-php-template-custom-functions/
อยากไดโครงหนาแบบอื่นๆ WordPress Page Template
หนา Home
home.php
page-home.php
<html> <title>หนาแรก ไมเหมือนใคร</title> <body>
<?php /* Template Name: Home */ ?>
(อยากใสอะไรก็ใส จะแกก็มาแกไฟลนี้นะ) </body> </html>
<html> <title>หนาแรก ไมเหมือนใคร</title> <body> (อยากใสอะไรก็ใส แตจะดึงขอมูลจากระบบ WordPress มางายกวา) </body> </html>
หนาอื่นๆ page-about.php <?php /* Template Name: About */ ?> <?php get_header(); ?> (ใสโคดอะไรของตัวเองไดเลย) <?php get_footer(); ?>
จบ ลองโมธีมเลนดูดีกวา