Kunathip's Weblog

สร้างธีม WordPress ใช้เอง ตอนที่ 2

kunathip — Mon, 06 Jun 2011 16:28:32 +0000

ก่อนที่จะไปสู่การสร้าง header, index, page หรือ sidebar เรามาดู HTML ตัวอย่างกันก่อน เพื่อนำไปใช้ในส่วนต่อไปของบทความ ในที่นี้ใช้เป็น XHTML 1.0 Strict (อยากใช้ HTML5 แต่ยังงงกับการใช้ tag บาง tag เช่น article กับ section ว่าใช้อย่างไรกันแน่ เลยใช้ XHTML ไปก่อน) แล้วบันทึกเป็น index.php โดยมีโครงสร้างคร่าว ๆ ดังนี้





My Blog






Blog ของผมครับ


 





ส่วนเนื้อหา





ส่วนนำทางหรือเมนู




 

Copyright © 2011 My Blog

การสร้าง Header

ให้ copy ส่วนของ html ที่อยู่ระหว่าง tag และ คือในบรรทัดที่ 1 ถึงบรรทัดที่ 17 ในตัวอย่างไปใส่ไว้ใน header.php ดังนั้น header.php ในตอนนี้จะมี code ดังนี้

header.php





My Blog






Blog ของผมครับ

ในการสร้างธีม WordPress นั้น จำเป็นต้องมีการประกาศ DOCTYPE ว่าเป็น HTML หรือ XHTML เพื่อเป็นการบอก browsers ให้ render เว็บเพจได้อย่างถูกต้อง

ในส่วนของ นั้น เราจะใช้ เฉย ๆ ไม่ต้องตามตัวอย่างก็ได้ (ผมใส่ตามหนังสือน่ะ) โดยในตัวอย่างจะเป็นเรื่องเกี่ยวกับการที่หน้า blog ของเรามีความสัมพันธ์เชื่อมโยงกับคนอื่น (มั๊ง) สามารถหารายละเอียดเพิ่มเติมที่ XHTML Friends Network

จากนั้นทำการแก้ไข header.php ดังนี้





<?php wp_title('«', true, 'right'); ?><?php bloginfo('name'); ?>








Blog ของผมครับ

จาก code ข้างบน การแก้ไขเริ่มตั้งแต่บรรทัดที่ 5 จากของเดิมคือ

My Blog

ก็เปลี่ยนเป็น

<?php wp_title('«', true, 'right'); ?><?php bloginfo('name'); ?>

การเปลี่ยนข้างต้นจะแสดงชื่อ blog ของเราตามที่ตั้งค่าไว้ตอนติดตั้งครั้งแรกในส่วนของ admin ซึ่งสามารถแก้ไขได้ ถ้าเอาแบบตาม Tutorial จากเว็บอื่นบางเว็บจะใช้แค่

<?php bloginfo('name'); ?> <?php wp_title(); ?>

ก็แล้วแต่สะดวกครับ ลองใช้ทั้งสองแบบแล้วดูว่าเราชอบแบบไหน ข้อมูลเพิ่มเติมของ tag wp_title() สามารถดูได้ที่ wp_title()

ต่อมาในบรรทัดที่ 6 คือการบอก browser ว่าหน้าเว็บเราเป็น HTML ที่มีการเข้ารหัส (Encoding) แบบ UTF-8

ข้อควรระวังคือเวลาพิมพ์ code เหล่านี้ต้องเลือกบันทึกเป็นแบบ UTF-8 ด้วย มิฉะนั้นเวลาแสดงผลจะเป็นภาษาต่างดาว เช่นถ้าใช้ Notepad++ ต้องเลือกที่เมนู Encoding –> Encode in UTF-8 without BOM

เปลี่ยนเป็น

บรรทัดที่ 7 คือการอ้างถึง CSS ที่ใช้ในธีมของเรา โดยหลังจากที่เราสร้างไฟล์ style.css กับไฟล์ index.php (ไฟล์ template ของ code ข้างต้น) ให้เลือกธีมในส่วนของ admin ที่เป็นชื่อธีมชื่อเราได้สร้างไว้ (ชื่อเดียวกับชื่อธีมที่กำหนดใน style.css) จากเดิม

เปลี่ยนเป็น

ในบรรทัดที่ 8 ใช้สำหรับการจัดการกับ comment ส่วนในบรรทัดที่ 9 คือการดึงส่วนที่เหลือใน เช่น Prototype, version ของ WordPress ที่เราใช้ หรือ plugin ต่าง ๆ ที่เราใช้ เป็นต้น

ในส่วนต่อมาคือส่วนของส่วนหัวของเว็บที่จะแสดงผล (ที่ผ่านมาคือการประกาศค่าใน tag ยังไม่เกี่ยวกับการแสดงผลให้เห็น ต่อจากนี้คือการให้ browser แสดงผลสิ่งที่อยู่ภายใต้ tag ) แก้ไขไฟล์ header.php ดังนี้





<?php wp_title('«', true, 'right'); ?><?php bloginfo('name'); ?>

ในบรรทัดที่ 14 ถ้าเรา view sourcecode จะเห็นเป็น

ชื่อ blog ของเรา

จะเห็นว่า จะแสดงข้อมูลต่าง ๆ ของ WordPress แล้วแต่ว่าเราผ่านค่า argument อะไรเข้าไป เช่น จากบรรทัดที่ 14 เราผ่านค่า url และ name เข้าไป ทำให้แสดงผลเป็น url และชื่อ blog ของเราที่ตั้งไว้ ดูเพิ่มเติมเกี่ยวกับ bloginfo() ได้ที่ bloginfo()

ในบรรทัดที่ 16 ส่วนนำทาง (navigation) ส่วนบนที่อยู่ในส่วนของ

จะแสดงหน้า (page) ที่เราสร้างไว้ แต่ถ้าเราต้องการแสดงเป็นหมวดหมู่ (Category) ก็ใช้ code แทนดังนี้

โดยฟังก์ชั่น wp_list_categories() สามารถดูเพิ่มเติมได้ที่ wp_list_categories

จากนั้นให้ทำการบันทึก header.php ตอนต่อไปจะเป็นการสร้างไฟล์ index.php (แค่ header.php ก็เขียนตั้งหลายวัน แล้ว index.php จะกี่วันเนี่ย)

แปลจาก: WordPress 3 Site Blueprints

โดย: Heather R. Wallace

สร้างธีม WordPress ใช้เอง ตอนที่ 1

kunathip — Tue, 31 May 2011 16:52:45 +0000

เริ่มต้นกับ Theme

ก่อนอื่นก็คิดชื่อ Theme ที่จะสร้างขึ้นมาใหม่ เสร็จแล้วก็สร้าง folder โดยใช้ชื่อเดียวกับชื่อ theme ที่คิดจะตั้งชื่อ โดย folder ที่จะสร้าง theme ประกอบด้วยไฟล์ต่าง ๆ ดังนี้

functions.php
header.php
index.php
single.php
page.php
sidebar.php
footer.php

สร้าง stylesheet โดยตั้งชื่อว่า style.css และใช้ editor เปิดเพื่อ

แก้ไขไฟล์ ดังนี้

/*
Theme Name: ชื่อ theme
Theme URI: url ของ theme
Description: อธิบาย theme ที่เราสร้าง
Author: คนสร้าง (ชื่อเราเอง)
Auhtor URL: url ของคนสร้าง
Version: เวอร์ชั่น อาจเป็น 1.0 หรืออะไรก็ได้
*/

เพิ่มโค๊ดข้างต้นในไฟล์ style.css และ save ไฟล์

แบ่งส่วนหน้า template

การแบ่งส่วนในหน้า template เป็น 4 ส่วน โดยขึ้นกับเราว่าจะแบ่งส่วนใดเป็น header, sidebar, footer หรือ content โดยอาจแบ่งได้ดังนี้

ส่วน header

ส่วน sidebar

ส่วน footer

ส่วน content

หลังจากแบ่งหน้าได้ 4 ส่วนแล้ว ก็ถึงเวลาที่จะลงรายละเอียดในแต่ละไฟล์แล้ว ดังนี้

การสร้างไฟล์ functions

ก่อนทำการสร้าง theme ต้องสร้างไฟล์ functions.php ก่อน เพราะไฟล์นี้ทำให้เราสามารถเพิ่ม function เพิ่มเติมใน theme ของเราได้ โดยไฟล์ functions.php นี้ทำให้เราสามารถเพิ่ม widget เข้าไปใน sidebar ของเราจากหน้า admin panel ได้เลย

เปิดไฟล์ functions.php แล้วเพิ่ม code ดังต่อไปนี้

functions.php

'',
      'after_widget'=>'',
      'before_title'=>'',
      'after_title'=>'',
   ));

ต่อมาให้เพิ่ม code ด้านล่างนี้ต่อท้ายเพื่อให้ theme ของเราสามารถเปลี่ยน background ภายในหน้า admin panel ได้โดยไม่ต้องแก้ไขที่ stylesheet ในส่วนของ Custom Background

add_custom_background();

เพิ่ม code ส่วนต่อมาคือการ feed links ในส่วนของ header ของ theme

add_theme_support('automatic-feed-links');

ตั้งแต่ WordPress 2.9 เป็นต้นมาจะมี feature ใหม่คือการใส่รูป thumbnail ซึ่งจะเป็นเมนูเพิ่มอยู่ทางด้านล่างขวา แสดงเมื่อเราอยู่ในส่วนของการ add new post โดยมี code ดังนี้

add_theme_support( 'post-thumbnails');

ตามด้วยการปิด tag ของ php

?>

เมื่อเสร็จสิ้น code ทั้งหมดของ functions.php จะเป็นดังนี้

functions.php

 '',  
      'after_widget' => '',  
      'before_title' => '',  
      'after_title' => '',  
   ));  
add_custom_background();
add_theme_support('automatic-feed-links');
add_theme_support('post-thumbnails');	
?>

ในตอนที่ 1 จะขอจบที่การสร้างไฟล์ functions.php ก่อน ส่วนการสร้าง header, sidebar, content และ footer จะกล่าวถึงในตอนต่อไป

แปลจาก: WordPress 3 Site Blueprints

โดย: Heather R. Wallace

แก้ไขเดือนและปีใน wordpress ให้เป็นเดือนภาษาไทย และปีภาษาไทย

kunathip — Fri, 15 Apr 2011 12:30:33 +0000

การแก้เดือนภาษาไทยมีวิธีดังนี้

ไปที่ folder wp-include –> locale.php
หาคำว่า “//The Months” เป็นคอมเมนต์
แก้ไขเดือนที่เป็นภาษาอังกฤษให้เป็นภาษาไทยให้หมด

รูปที่ 1 รูปก่อนการแก้ไข

รูปที่ 2 หลังการแก้ไข

การแก้ปีให้แสดงเป็นปีพุทธศักราชขึ้นอยู่กับ Theme ซึ่งค่อยมาเพิ่มเติม

คำสั่ง sql ในการคำนวณอายุปัจจุบัน

kunathip — Wed, 02 Mar 2011 17:10:33 +0000

((date_format(now(), ‘%Y’) -date_format(dob, ‘%Y’)) – (date_format(now(), ’00-%m-%d’) < date_format(birthDate, ’00-%m-%d’))) as age

ดื่มน้ำเมื่อท้องว่าง ดีอย่างไร (เปลว สีเงิน)

kunathip — Fri, 29 Oct 2010 00:46:12 +0000

การดื่มน้ำเมื่อท้องว่างผ่านกระเพาะเพื่อรักษาสุขภาพที่ดี ในประเทศญี่ปุ่น ทุกวันนี้เป็นที่นิยมการดื่มน้ำทันทีหลังตื่นนอนตอนเช้า (ก่อนแปรงฟัน) เพื่อการรักษาสุขภาพที่ดี มีการทดลองยางวิทยาศาสตร์ พบว่าน้ำสามารถใช้ชะลอความแก่ และสามารถบำบัดรักษาโรคได้ เราสามารถใช้น้ำเพื่อบำบัดรักษาโรคได้หลายโรค

มีการพิสูจน์จนยอมรับว่าสามารถบำบัดรักษาโรคเหล่านี้ได้ผล 100% (ค่อยเป็นค่อยไป ต้องใช้ระยะเวลา) ปวดหัว ปวดตามตัว โรคระบบหัวใจ โรคไขข้ออักเสบ โรคหัวใจเต้นเร็ว โรคลมบ้าหมู โรคอ้วน โรคหลอดลมอักเสบ โรคหืด และยูริก โรคแสสงคลื่นไส้ต่าง ๆ โรคกระเพาะ โรคท้องร่วง โรคริดสีดวง โรคเบาหวาน โรคอาการท้องผูก โรคตา โรคภายในสตรี มะเร็ว และรอบเดือนไม่ปกติ โรคคอ หู จมูก

วีธีการรักษาปฏิบัติดังนี้

ตื่นนอนตอนเช้า ก่อนแปรงฟัน ให้ดื่มน้ำ 4 แก้ว (640 ซีซี)
หลังจากนั้นสามารถแปรงฟันและล้างหน้าได้ แต่ต้องไม่ดื่มหรือรับประทานอะไรจนกว่า 45 นาทีผ่านไป จึงจะรับประทานได้ตามปกติ
หลังรับประทานอาหารเช้า กลางวัน เย็น ไปแล้ว 15 นาที ต้องไม่ดื่มน้ำหรือรับประทานเลย จนกว่า 2 ชั่วโมงผ่านไป
ผู้ป่วย หรือคนชรา ที่ไม่สามารถดื่มน้ำ 4 แก้ว ก็ขอให้ค่อย ๆ ดื่ม ค่อยเป็นค่อยไปเรื่อย ๆ จนได้ครบ 4 แก้ว

ข้อปฏิบัติ 4 ข้อดังกล่าวจะทำให้ท่านบำบัดรักษาโรคที่เป็นอยู่ ค่อย ๆ เบาและหายขาดได้ในที่สุด วิธีนี้ไม่มีผลข้างเคียงใด ๆ ทั้งสิ้น

ที่มา: คอลัมน์ เปลว สีเงิน หนังสือพิมพ์ไทยโพสต์ ฉบับวันพุธที่ 27 ตุลาคม พ.ศ.2553

วันสบาย สบาย

kunathip — Thu, 30 Sep 2010 02:26:45 +0000

ช่วง 2 – 3 อาทิตย์ที่ผ่านมา ห้องงานเทคโนโลสีสารสนเทศทำการขยายห้องใหม่ มีการกันห้อง ยกพื้น ปูพรม ทั้งเสียงดังและกลิ่นสี แต่ว่าไม่มีปัญหา ทนได้เพื่อห้องใหม่

พี่ณัฐเก๊กซะ

สองหนุ่มหล่อ

สามหนุ่มสามมุม

chill chill

CSS shorthand properties แบบต่าง ๆ

kunathip — Wed, 29 Sep 2010 09:24:31 +0000

การใช้ CSS ที่ดีคือทำให้เวลาการโหลดสั้นที่สุด หนึ่งในวิธีที่นิยมคือการประกาศ property ของ css แบบสั้น (shorthand) นั่นเอง

Font

font: 1em/1.5em bold italic serif;

จากแบบเต็ม

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif;

Background

background: #fff url(image.gif) no-repeat top left;

จากแบบเต็ม

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Lists

list-style: disc outside url(image.gif);

จากแบบเต็ม

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif);

ความจริงมีมากกว่านี้ ทั้ง Border, Margin & Padding แต่ใช้บ่อยเลยไม่ได้ใส่

CSS Selector แบบต่าง ๆ

kunathip — Thu, 23 Sep 2010 10:50:11 +0000

selector ใน css มีหลายแบบ แต่จะแนะนำอันหลัก ๆ ดังนี้

Descendant Selector
Parent-Child Selector
Adjacent Selector
Attribute Selector

โดยจะขออธิบายทีละอย่าง เริ่มกันเลย

1. Descendant Selector

Descentdant แปลโดย พจนานุกรม Longdo แปลว่า “ซึ่งสืบทอดมา”, “ผู้สืบสกุล”, “ทายาท” ซึ่งก็คือ การสืบทอดนั่นเองโดยมีตัวอย่างการใช้ดังนี้

CSS:

li em {
 color: green;
}

แบบนี้จะเลือกทุก ๆ em ที่อยู่ภายใต้ li โดยเลือกทั้งหมดไม่ว่า em จะซ้อนด้วยแท็กอื่นอีกที ขอแค่ให้มี li ครอบอยู่ก่อนหน้านั้น

ใน HTML ข้างล่าง em ตัวแรกจะแสดงผลเป็นสีเขียว แต่ em ตัวที่สองจะเป็นสีปกติ

HTML:

Item One
Item two

An italicized words.

2. Parent-Child Selector

มีตัวอย่างการใช้งาน ดังนี้

CSS:

body > p {
 font-weight: bold;
}

แบบนี้จะเลือกเฉพาะ p ที่เป็น element ลูกโดยตรงของ body ไม่นับพวกที่โดนซ้อนอยู่อีกโดย tag อื่น

จาก HTML ข้างล่าง p ตัวที่ไม่อยู่ใน block ของ element ในที่นี้คือ

จะแสดงผลเป็นตัวหนา เพราะอยู่ติดกับ body แต่ p ตัวที่สองจะเป็นเป็นขนาดปกติ

HTML:

Welcome to the web site! Here's a list

This is the first paragraph in the list. It's also the last.

การใช้ Parent-Child Selector ไม่รองรับกับ Internet Explorer 6 ดังนั้นก็แล้วแต่เป้าหมายของผู้ชมกลุ่มเป้าหมายละกาน

3. Adjacent Selector

Adjacent Selector เป็น selector ที่ไม่ใช้การสืบทอดเหมือนกับ Descendant Selector แต่เป็นตัวที่ติดกันในโค๊ด HTML ดังตัวอย่างด้านล่าง

CSS:

h1+h2 {
 margin-top: 11px;
}

จากตัวอย่างเป็นการบอกให้ h2 ตัวแรกที่อยู่ติดกับ h1 มีช่องว่างด้านบน 11 px โดยดูตัวอย่างจาก HTML ดังนี้

This is important stuff!
First important item
Second important item

จาก HTML แท็ก h2 บรรทัดที่ 2 จะห่างจาก h1 ขนาด 11 px แต่จะไม่มีผลกับ h2 ในบรรทัดที่สาม

และอีกตามเคย ไม่ support Internet Explorer 6

4. Attribute Selectors

selector แบบที่ 4 นี้จะคล้ายกับการเขียนโปรแกรม โดยมีรูปแบบดังนี้

[attribute] จะเข้าเงื่อนไขคือกำหนด attribute ทั้งหมด

[attribute="value"] จะเข้าเงื่อนไขเมื่อมีการกำหนดค่าให้กับ attribute

[attribute~="value"] คือ attribute ใด ๆ ที่มีคำตรงกับค่าที่กำหนด จากการเว้นช่องว่าง

[attribute|="value"] คือ attribute ใด ๆ ที่มีคำตรงกับค่าที่กำหนด โดยใช้เครื่องหมายคำพูด

ตัวอย่างการใช้งาน ถ้าต้องการให้ textbox () มีตัวอักษรสีขาว และพื้นหลังเป็นสีดำ สามารถกำหนด CSS ดังนี้

input[type="text"] {
color: white;
background-color: black;
}

อีกซักตัวอย่าง

CSS:

div[class~="advertisement"]  {
 background: rgb(220, 220, 220);
 width: 74em;
 border:  solid 0.02em rgb(200, 200, 200);
 margin: 0 auto;
 min-height:  5em;
}

HTML:


 Content  goes here

แค่นี้แหละ ขี้เกียจแระ

การติดตั้ง PHP และ Apache HTTP Server

kunathip — Sat, 11 Oct 2008 13:11:41 +0000

ก่อนอื่นเราต้อง download โปรแกรมทั้ง 2 ตัวนี้จากเว็บไซท์อย่างเป็นทางการ

PHP ปัจจุบันเวอร์ชั่นที่เสถียรคือ 5.2.6 (11 ตุลาคม 2551) download ที่นี่ ถ้าใช้ windows ให้เลือก PHP 5.2.6 zip package

ส่วน Apache เวอร์ชั่นปัจจุบันคือ 2.2.9 download ที่นี่ โดยเลือก Win32 Binary including OpenSSL 0.9.8h (MSI Installer)

รู้จักการใช้ PDO (PHP Data Objects) Part 2

kunathip — Tue, 30 Sep 2008 06:29:19 +0000

อ้างอิงจาก phpro.org ต้องบอกไว้ก่อน ความจริงแล้วผมทำขึ้นเพื่อเอาไว้อ่านของผมเอง เหมือนสมุดจดสิ่งที่ผมได้รู้แบบออนไลน์ (เท่ห์โคตรเลย)

เอาหล่ะ มาดูเกี่ยวกับการ Query ข้อมูล ด้วย PDO กันบ้าง โดยใช้ฐานข้อมูลที่สร้างเมื่อตอน part1 มาทำต่อกันเลย

Insert

insert คือการใส่ข้อมูลลงในฐานข้อมูล โดย PDO นั้นจะใช้คำสั่ง PDO::exec ในการประมวลผลตาม code ด้านล่าง

exec("INSERT INTO animals(animal_type, animal_name) VALUES ('kiwi', 'troy')");

    /*** echo the number of affected rows ***/
    echo $count;

    /*** close the database connection ***/
    $dbh = null;
    }
catch(PDOException $e)
    {
    echo $e->getMessage();
    }
?>

คำสั่ง sql ข้างต้น หมายความว่าให้ใส่ข้อมูลในตาราง animals ใน field ของ animal_type และ animal_name ข้อมูลที่ใส่คือ “kiwi” และ “troy”

output ที่ได้คือ

Connected to database
1

ผลลัพธ์ที่ออกมาอย่างนี้ เพื่อแสดงว่า เราสามารถติดต่อกับ MySQL ได้ และแสดงแถวที่เราได้ทำกับ insert เข้าไป

Select

select คือการเลือกข้อมูลจากฐานข้อมูลเพื่อนำมาใช้ ลองดูจาก code ดังนี้

Kunathip's Weblog

สร้างธีม WordPress ใช้เอง ตอนที่ 2

Blog ของผมครับ

การสร้าง Header

Blog ของผมครับ

Blog ของผมครับ

ชื่อ blog ของเรา

สร้างธีม WordPress ใช้เอง ตอนที่ 1

เริ่มต้นกับ Theme

แบ่งส่วนหน้า template

การสร้างไฟล์ functions

', 'after_title'=>'

', 'after_title' => '

แก้ไขเดือนและปีใน wordpress ให้เป็นเดือนภาษาไทย และปีภาษาไทย

คำสั่ง sql ในการคำนวณอายุปัจจุบัน

ดื่มน้ำเมื่อท้องว่าง ดีอย่างไร (เปลว สีเงิน)

วันสบาย สบาย

CSS shorthand properties แบบต่าง ๆ

Font

Background

Lists

CSS Selector แบบต่าง ๆ

1. Descendant Selector

2. Parent-Child Selector

3. Adjacent Selector

This is important stuff!

First important item

Second important item

4. Attribute Selectors

การติดตั้ง PHP และ Apache HTTP Server

รู้จักการใช้ PDO (PHP Data Objects) Part 2

Insert

Select