ไม่ได้ไปงาน Event นานแหละได้โอกาสอันนี้พร้อมๆกันวันว่างๆ จึงได้ไปงานนี้ซึ่งมีการจัดมาถึงครั้งที่ 5 สำหรับ community wordpress ในประเทศไทยของเรา โดยยังคงเป็นนายชินอิจิ ( @shinichiN ) เจ้าเดิมและมี section ที่น่าสนใจมากมายเลยวันนี้ งาน wordpress meet up ครั้งต่อไปถ้าจัดเราจะสามารถจัดงานครั้งใหญ่ได้อีกด้วย จึงอยากให้ท่านผู้อ่านที่สนใจจะเข้าร่วมมา join กันได้นะครับ เอาล่ะวันนี้จะมีเรื่องอะไรบ้างไปดูกันเลย !!!
รายละเอียดงาน WordPress meet up#5
Post by HUBBA Thailand.
จากที่เห็นจะเห็นว่าเริ่ม 13:30 แน่นอนว่า ผมไปทัน !! section 2 555555 ( ถ้าหากเป็นคนที่เคยอ่านบล็อคผมมาก่อนจะรู้เลยว่า ไปไม่เคยทัน ) เดี๋ยวไว้คนไหนเขียนเกี่ยวกับ section 1 แล้วจะมาบอกนะครับพี่น้อง โอเคข้ามไป section 2 กันเลย ไปอย่าไปคิดมาก
section 2 : Bootstrap BasicSpeaker: Woratana Perth Ngarmtrakulchol
section นี้เป็นของเพิร์ทเจ้าของเว็บ Designil.com พูดถึงเกี่ยวกับการใช้ Bootstrap ว่าใช้อย่างไร ทั้งพวก component และการปรับแต่งต่างๆ โดยเว็บเริ่มแรกที่เราต้องไปเอาคือเว็บ www.getbootstrap.com ประโยชน์หลักๆคือ
- รองรับ responsive เว็บเดียวดูได้ทั้งมือถือ, tablet, pc, wide screen
- web element มีให้เลือกใช้มากมาย พวก form , datepicker, process bar มากมาย
- ลดเวลาในการทำตัว prototype เช่น ได้เห็นเว็บเป็นรูป เป็นร่างแบบที่เราคิดไว้ก่อนเลย
- ง่ายต่อการใช้หรือเรียนรู้
- เอกสารการใช้ ดูแล้วง่ายรู้เรื่องเลย
ส่วนเว็บที่เป็นตัวอย่างที่ใช้คือ
- www.unroll.me
- www.fliplingo.com
เวลาเราใช้หลักในตัวที่เราทำการ Download คือ
- ไฟล์ bootstrap.css
- ไฟล์ bootstrap.js
- icon font ซึ่งเราจำเป็นต้องมีเพราะเวลาใช้ icon ในสมัยใหม่นั้นจะเอาเป็นตัวอักษรมากกว่าเป็นภาพเวลาย่อหรือขยายตัว icon จะได้ไม่แตก
หรือหากขี้เกียจมา download ก็มีแบบ CDN ( Content Delivery Network ) คือแหล่งที่จัดเตรียมไฟล์สามารถเรียกใน internet ได้เลยก็มีให้คือเว็บ www.bootstrapcdn.com copy แล้วไปใส่ได้เลยจ้า
สิ่งที่ตัว bootstrap เตรียมไว้ให้เรามีเยอะมากสำหรับเรื่อง component การใช้ต่างๆ ยกตัวอย่างเช่น
bootstrap-component-alert
การ alert แบบว่าเมื่อเรา insert อะไรซักอย่างเสร็จหรือมี error อะไรสามารถเรียกใช้ได้เลยสวยงามด้วย ง่ายๆ หรืออยากมี icon ที่ต้องการเราก็สามารถเรียกใช้ได้เลย เช่น
<i class="glyphicon glyphicon-heart-empty"></i>
ผลลัพธ์เป็นไปตาม link นี้ครับ http://codepen.io/designil/pen/zlofD ก็จะเห็น icon กุ๊งกิ้งๆ น่าร๊ากกกกกก ( เสียงเดกๆ ) เอาล่ะไปดูต่อไปกันเถอะ
Grid bootstrap
เอาล่ะจะพูดถึงเจ้า Bootstrap แล้วไม่พูดถึง Grid คงไม่ได้เพราะมันแทบจะมาพร้อมกันเลย ซึ่งเป็นตัวช่วยเหลือในการ ออกแบบ website ในปัจจุบันเลยทีเดียวและช่วยให้เราสามารถแบ่งจัดเรียงพวก column ได้สวยงามเป็นระเบียบโดยตัวเครื่องมือที่จะมาช่วยเราสามารถเข้าไปที่ Link นี้ครับ bit.ly/grid-overlay เมื่อเข้าไปสำหรับการ install ง่ายแสนง่ายทำได้โดยการ Drag ( ลาก ) ตรงคำว่า “Grid display” ไปวางไว้บน bookmark bar เสร็จแล้วก็สามารถกดให้มันแสดงเส้นได้เลยครับ
grid-overlay
เมื่อเรากดปุ่ม Grid displayer จะเป็นอย่างนี้ครับ
grid-overlay
โอเคโดยปกติแล้วนั้นก็จะแบ่งเป็น 12 Grid แล้วพวก column จะกินไปกี่ grid ก็นับๆเอา อย่างในภาพด้านบนก็มีแบบ 3 columns โดย column ละ 4 gird ก็จะครบ 12 Grid พอดี โดยการใช้ Grid มีข้อสังเกตุอีกอย่างสำหรับเราต้องการจัดการเมื่อมี user ใช้ device ต่างๆกันมาดูเว็บเราโดย class ที่เราต้องกำหนดมีดังนี้ครับ
scale-class-bootstrap
สมมติว่าเวลาเราใช้ก็ใช้
<div class="container">
<div class="row">
<div class="col-md-4">test 1</div>
<div class="col-md-4">test 2</div>
<div class="col-md-4">test 3</div>
</div>
</div>
ประมาณนี้ครับ โดยกฎการใช้ไม่มีอะไรยากเลยแค่ 3 step คือ
- add container ก่อน
- add row ตาม
- add col-md-xx ตามที่ต้องการ
โดยเราจะแบ่งแต่ละ section เป็น row ครับแล้วค่อนแบ่งเป็น column นั่นแหละ และสามารถ customize ได้ด้วยในเมนูด้านบนในเว็บครับ ก็สามารถปรับอะไรที่เราต้องการได้เช่นเราอาจจะไม่ต้องการให้มีเว้นระยะ จาก 30px เป็น 15px ต่อ Grid ก็ทำได้ครับ
Section 3 : Child Theme HandlingSpeaker: Shinichi Nishikawa
ละแล้วก็ถึง section ของชินซัง มาพูดเกี่ยวกับการทำ child theme แล้วมันคืออะไรล่ะ เอ่อ … มันคือ theme ลูก ( *โดนตบ* ) เอาจริงๆมันเหมือนการเป็นทำ theme ใหม่ที่สามารถสืบทอดจาก theme แม่ ( การรับคุณสมบัติทั้งหมดที่แม่มี ) โดย theme ลูกสามารถจะแก้ไข หรือ แอด อะไรเพิ่มเติมโดยจะไม่มีผลกระทบกับ theme แม่เลยครับ
รายละเอียดแบบเต็มๆ ดูได้ที่ Link นี้ครับ http://codex.wordpress.org/Child_Themes เอาล่ะฟังแล้วอาจจะงงๆ ไปดูกัน
ชินซังอธิบายว่า ทุก theme สามารถเป็น Parent theme หรือ theme แม่ได้ แต่เราไม่สามารถสร้าง child theme ของ child theme ได้กล่าวคือ ลูกของลูกอย่างนี้ไม่ได้ โดยการสร้างมี 3 steps ง่ายๆดังนี้
- สร้าง folder ใน wp-content/themes ชื่อ folder อะไรก็ได้ในตัวอย่าง ชินซังสร้างว่า “shin2014”
- สร้าง style.css โดยต้องมี comment ว่า “Template: pathToParentTheme” ตัวอย่าง “Template: twentyfourteen” และสำคัญต้อง @import ด้วย
/* theme name : shin2014 Template : twentyfourteeen */ @import url("../twentyfourteen/style.css"); // override a thing that you want body { color: red; } - สร้าง function หรือจะแอดไฟล์ที่อยากจะแก้ไขตามต้องการ
Concept ของการทำ child theme คือ
- ไม่ต้องทำซ้ำ
- ปรับเปลี่ยนสิ่งที่เราต้องการ
- ป้องกันปัญหาการ update theme (ตัวแม่) แล้วโค้ดที่เราแก้ไขหาย
เราสามารถ Override ( การทับสิ่งที่เราอยากจะเปลี่ยนประมาณนั้น ) ได้ 3 อย่าง
- css
- template file
- function ในไฟล์ function.php
โดยการทำงานจะโหลดตัว child ก่อนแล้วค่อยโหลดของตัว parent ตามโดยอะไรที่ตัว child ไม่มีมันจะไปเอาของตัวแม่มาใช้แทน ตรงนี้มีแนะนำตัว Plugin สำหรับการเช็คว่าหน้าที่เรากำลังดูอยู่นั้นมันใช้ไฟล์อะไรมาช่วยด้วยชื่อ Plugin ว่า show current template https://wordpress.org/plugins/show-current-template/ เพื่อเช็คว่าไฟล์ไหนไปเอาจากลูกหรือแม่กันแน่ครับ
โดยการ override css ก็เหมือนเราเขียนในไฟล์ตัว css ได้เลยครับชื่อ class หรือ id ไหนที่เราต้องการเปลี่ยนก็เขียนในไฟล์ลูกมันก็จะใช้แทนของตัวแม่ ส่วน template ก็เหมือนกันครับก็ไปดูว่าตัวแม่ชื่ออะไร แล้วก็ copy มาแก้ไขใน folder ของลูกครับเพียงเท่านี้ก็ได้แล้วงงมะ ถ้างงก็ comment ถามได้ครับ
ส่วนของ function เราก็สามารถ copy หรือสร้าง function.php ขึ้นมาแล้วดูว่า function ไหนที่เราต้องการปรับเปลี่ยนมัน เช่น เราอยากให้ตอน feed ที่เรียกมามีโชว์อะไรก่อนอย่างนี้ก็ไปดูว่า function ทำงานเสร็จแล้วเราต้องเช็คว่าที่ไฟล์ function.php ของ Parent theme ( แม่ ) มันมีเขียนเช็คว่ามีฟังก์ชั่นนี้หรือไม่จะเขียนทำนองว่า
if function_exists("function_name"):
bla bla bla
endif;
ถ้าไม่มีเขียนมันจะเอา function.php ของตัว Parent มาทับอันที่เราเขียนซึ่งจะทำให้ function.php ที่เราเขียนในตัว child ( ลูก ) ไม่ทำงานครับ
Child theme VS Theme framework
ชินซังแนะนำว่าให้เราไปดูตัว starter theme ที่ Link http://roots.io/starter-theme/ เขาบอกว่ามัน update บ่อยว่าของ underscore จ้าโอเคกลับมาที่เรื่องว่าเราจะเลือกใช้อันไหนดีไปดูที่ child theme ก่อนแล้วกันเราจะตัดสินใจเลือกใช้ child theme ก็ต่อเมื่อ
- เจอ Parent theme ที่ถูกใจ
- ชอบ feature ต่างๆเกือบหมดอาจจะมีแก้ไขเล็กน้อย
- ต้องการแก้ไขเล็กน้อยเช่น สี หรือ font หรือ แอดอะไรเข้าไปอีก
- งบน้อย หมายถึงลูกค้าที่มาจ้าง
ส่วนเราจะตัดสินใจเลือกทำ Theme framework เพราะ
- ต้องการเริ่มเขียนเองหมด
- ต้องการ Design เอง
- ต้องการแก้ไขหลายสิ่งเองหมดทุกอย่าง
Resource
- Slide ของ section 2 http://www.designil.com/slide-bootstrap-basic-3-grid.html
- Slide ของ section 3 http://www.slideshare.net/NSKW/child-theme
นอกจากนี้ระหว่างที่ผมกำลังเขียนบทความนี้มีน้องๆเพื่อนๆในงานได้เขียนรายละเอียดแล้วผมขอ Link ไปหาเนื้อหาต่อไปสำหรับคนที่สนใจอยากอ่าน section 1 นะครับเก็บรายละเอียดค่อนข้างดีกว่าผมซะอีก ( ฮา )
- http://devahoy.com/2014/08/wordpress-meetup-bangkok-how-to-design-and-create-themes-faster-and-better/
สรุป
ยังคงเป็นงานที่น่าสนใจเสมอเพราะ เครื่องมือที่ใช้ง่ายสำหรับมือใหม่เขียน Blog ก็สามารถเริ่มต้นได้เลย หรือยังเป็นมิตรกับผู้ใช้ seo ด้วยในงานเราจะได้เจอคนใหม่ๆและที่สำคัญตอนนี้เรากำลังก้าวไปสู่การจัดงานครั้งที่ 6 ซึ่งหมายความว่าเมื่อจัดครบ 6 ครั้งเราจะสามารถจัด Event ครั้งใหญ่ในชื่อว่า Wordcamp ซึ่งเป็น Event แบบว่าแต่ละภาคหรือประเทศนั้นๆเลยทีเดียว ตอนนี้เราต้องการคนที่อาสาและพร้อมจะเข้ามาร่วม Join กับ Community ครับหากสนใจก็เชิญได้เลยที่นี่ครับ
- https://www.facebook.com/groups/260156970842775/ กลุ่มนี้จะเป็นกลุ่มที่อาสามาช่วยๆงานหรือคิดงานมีชินซังอยู่ด้วย พูดไทยนะครับมีชินซังพูดอังกฤษแต่ก็จะแปลไทยให้อยู่แล้ว
- https://www.facebook.com/groups/wpalliance/ อันนี้เป็นอีกกลุ่มที่จะปรึกษาพูดคุยกันว่ามีปัญหาอะไรยังไงครับ
ก็อยากให้ join ทั้งสองกลุ่มเลยลองเข้ามาคุยมาเจอกันครับ ไม่จำเป็นต้องมีความรู้เยอะขอแค่อยากรู้จักหรืออยากเรียนรู้ก็พอมีคนพร้อมจะชี้แนะอยู่แล้วครับ
