WordPress Theme Designการสรางธีมเวิรดเพรส

โดย จักรกฤษณ ตาฬวัฒน (เมน)

www.iMenn.com

โครงสรางของเว็บสวนใหญในปจจุบัน

header

footer

content sidebar

(navigation)

HTMLสราง HTML กอน เนนใส div ครอบใหถูกที่

มองตำแหนงตางๆ เปน <div>

header

footer

content sidebar

(navigation)

wrapper<div id="wrapper">

<div id="header">(ใสสวนหัว เชนโลโก)</div>

<div id="nav">(ใสสวนเมนู)</div>

<div id="main">

<div id="content">(ใสเนื้อหา)</div>

<div id="sidebar">(ใสสวนเสริม)</div>

</div><!--main-->

<div id="footer">(ใสสวนทาย เชน เครดิต)</div>

</div><!--wrapper-->

ครอบ <div> เปนระยะ

content sidebar

main

pic info

item

<div id="main">

<div id="content">(ใสเนื้อหา)</div>

<div id="sidebar">(ใสสวนเสริม)</div>

</div><!--main-->

<div class="item">

<div class="pic">(ใสรูปขาว)</div>

<div class="info">(ใสขอมูลขาว)</div>

</div><!--item-->

ID มีครั้งเดียว

Class มีหลายครั้ง

เขียนโคด HTML ใหครบ

#wrapper#header

#logo#ad-top

#nav#mainnav#searchbox#social

#main#content

#featured.f-items

.pich3

#items.item

h3.meta.excerpt

.pic

.info(.item...)

.navigation#sidebar

.ad-side

.widget-tabs

.facebook

.twitter#footer

.copyright

.footnav

CSSตัด CSS ตาม HTML ที่ออกแบบไว

พื้นฐาน CSS (1)

Resethttp://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

Box Modelhttp://www.css-reset.com/css-intro-part-4-the-box-model

Un-resethttp://noscope.com/vanilla-css

คำสำคัญ: 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-sprites-

techniques-tools-and-tutorials/

CSS Inheritance: ใครเจาะจงกวาก็ไดไปhttp://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

การจัด div

pic info

item

1. div ลอย ตองมี div ครอบ

2. ระวัง Padding, Margin

3. div ขางนอก ใสคลาส clearfix ใน html

4. div ขางใน ใส CSS เปน pic - float:left, info - float:right

HTML

CSS

330px

310px

100px 200px

การจัด div (อีกแบบ)

1. div ขางนอก CSS ใส overflow:hidden แทน

2. div ขางใน CSS: pic - float:left, info - float:right

CSS

pic info

item HTML

330px

310px

100px 200px

ใส css ตาม html ใหครบ

#wrapper#header

#logo#ad-top

#nav#mainnav#searchbox#social

#main#content

#featured.f-items

.pich3

#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

.pich3

#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

header.php

footer.php

#sidebar sidebar.php

ใสตัวแปรแทนรูป/ไฟล ตางๆ

<link rel="stylesheet" href="style.css" type="text/css" />HTML

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />header.php

<img src="images/logo.jpg" alt="Logo" />HTML

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="Logo" />header.php

ตัวแปรอื่นๆ

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

Header

Sidebar

Footer

แสดงเนื้อหา {

จะเห็นวาแสดงแคสวนเนื้อหา (#content) เพราะที่เหลือแบงชิ้นสวน (header,footer,sidebar) ไวแลว

เกิดครั้งเดียว

กรณีไมมี comments

single.php

Header

Sidebar

Footer

แสดงเนื้อหา {

จะเห็นวาแสดงแคสวนเนื้อหา (#content) เพราะที่เหลือแบงชิ้นสวน (header,footer,sidebar) ไวแลว

มีสวน comments ดวย

มี comments เพิ่มเขามา (ไฟล page.php ก็ใชโคดนี้ไดเหมือนกัน)

index.php (แบบแสดงรูปดวย)

The Loopจำนวนของการวนลูป

(แสดงกี่ขาวตอหนา)

ตั้งไดที่

Settings > Reading

ไฟลพิเศษfunctions.php

functions.php ที่ควรมี

add_theme_support( 'post-thumbnails' );

คำสั่งอื่นๆ http://digwp.com/2010/03/wordpress-functions-php-template-custom-functions/

ใสรูปประจำเรื่อง

เปดระบบ Menu register_nav_menus( array(

'abc-main' => __( 'เมนูหลัก', 'abc' ),

'abc-foot' => __( 'เมนูดานลาง', 'abc' )

));

เปดระบบ Sidebar register_sidebar(array(

'id' => 'sidebar-main',

'name'=> "Main Sidebar"

));

อยากไดโครงหนาแบบอื่นๆWordPress Page Template

หนา Home

page-home.phphome.php

<html><title>หนาแรก ไมเหมือนใคร</title><body>

(อยากใสอะไรก็ใส จะแกก็มาแกไฟลนี้นะ)

</body></html>

<?php/*Template Name: Home*/?>

<html><title>หนาแรก ไมเหมือนใคร</title><body>

(อยากใสอะไรก็ใส แตจะดึงขอมูลจากระบบ WordPress มางายกวา)

</body></html>

หนาอื่นๆ

<?php/*Template Name: About*/?>

<?php get_header(); ?>

(ใสโคดอะไรของตัวเองไดเลย)

<?php get_footer(); ?>

page-about.php

จบลองโมธีมเลนดูดีกวา