หลังจากไม่ได้เขียนบล็อกมานาน งานยุ่งมากๆ พึ่งทำเว็บให้แฟนเสร็จหมาดๆ เลยครับ เป็นการเริ่มต้นกับ WordPress เลยล่ะ มือใหม่สุดๆ เลยกับ WordPress ก็ได้ประสบการณ์หลายอย่างทั้ง WordPress, jQuery, CSS3, LESS ในโปรเจ็คเดียวกันนี้เลย ต้องขออภัยที่ใช้เวลานานเป็นเดือนเลยกว่าจะคลอดโพสต์นี้ออกมานะครับ

ตั้งแต่ The Next Resignment by @axdaman ก็พึ่งได้มาเขียนบล็อก เพราะพึ่งทำเว็บให้แฟนเสร็จหมาดๆ (ถ้าไม่มีอะไรเพิ่มนะ -_-‘) ช่วงนี้เลยยังไม่ได้หัดทำ Laravel 4 ต่อเลย หลังจากลง Laravel4 ได้แล้วเมื่อคราวก่อน

โพสต์นี้ผมขอแยกเป็นหลายตอนนะครับ เพราะมีรายละเอียดที่อยากจะลงลึกซักหน่อย

WordPress: เริ่มเก็บ requirement… รอบแรก

คุณแฟนผมอยากได้เว็บสำหรับแสดงผลงานการถ่ายภาพที่เว็บ http://www.smagan.com ผมเลยตัดสินใจใช้ WordPress เป็น engine ด้วยเหตุผลดังนี้ครับ

1. เว็บต้องการความสวยงามเป็นหลัก
2. WordPress ช่วยในเรื่องการจัดการเนื้อหาให้ง่าย – คุณแฟนจะได้ใช้งานได้ไม่ยาก

จากนั้นผมก็เริ่มเก็บ requirement “อ่ะ… อยากได้เว็บแบบไหนล่ะ?”

… มาเลยครับ … http://www.chanel.com หน้าตาแบบข้างล่างนี้

โดยมี Requirement เพิ่มเติมคือ

1. Frontpage Slideshow
2. Auto Scroll Front Page แบบเว็บ chanel.com
3. ส่วนที่อยู่ใต้เมนูหน้าแรก เป็น Thumbnail Tile แสดงผลงาน
4. พื้นเป็นสีดำ

WordPress: ทำเว็บด้วย WordPress รอบแรก..

โอเค ได้ครับ 🙂 ผมตัดสินใจใช้ Bones ซึ่งเป็น HTML5 WordPress Starter Theme มาใช้ในการทำเว็บนี้เพราะมันรองรับ responsive web ด้วย

Bones – HTML5 WordPress Start Theme

Bones เป็น Starter Theme ที่รองรับ Responsive ตั้งแต่เริ่มต้นครับ

Responsive Web ของ Bones ใช้แนวคิด Mobile First ครับ การแก้ไข CSS จะใช้ LESS หรือ Sass เป็น pre-processor ก่อน compile เป็น CSS อีกทีครับ  งานนี้ผมเลือกใช้ less ครับ ส่วนตัวไหนดีกว่ากัน ผมคงไม่สามารถบอกได้นะครับ ลองอ่านตามเว็บด้านล่างนี้นะครับ

Sass vs. LESS | CSS-Tricks

CSS Preprocessors Compared: Sass Vs. LESS | hongkiat.com

An Introduction To LESS, And Comparison To Sass | Smashing Magazine

ใน Bones จะช่วยแบ่งไฟล์ของ less เป็นส่วนๆ โดยมี _base.less เป็นพื้นฐานของส่วนประกอบทั้งหมด และมี _mixin.less แล้วก็ไฟล์ตามขนาดความกว้างของหน้าจอครับ

Full Page Slide Show

ช่วงแรกผมใช้เวลาหาอยู่พอสมควร จนเจอ Supersized ซึ่งเป็น Free jQuery Plugin ที่เรียกได้ว่าเป็นที่น่าพอใจทีเดียว

แต่… ก็ใช้ไม่ได้ เพราะผมยังไม่สามารถเชื่อมระบบให้เลือกรูปได้จากส่วน admin ของ WordPress ได้

ผมใช้เวลางมอยู่นานกับ Slideshow แถมคุณแฟนก็เร่ง ก็เลยตัดสินใจซื้อ RoyalSlider – Touch Content Slider for WordPress ที่เขียนโดย Semenov มาลง

เจ้า Royal Slider นี่ ดีที่เชื่อมกับระบบของ WordPress ให้แล้ว แต่เวอร์ชั่นที่ผมซื้อมานี่ยังไม่พอใจการตัดภาพ ถ้ารูปเป็นแบบแนวตั้ง จะตัดภาพส่วนหัวขาดไป แต่ Supersized ไม่เป็นอย่างนั้น Supersized จะพยามเอาทั้งภาพแสดงขึ้นมาและแสดงภาพแนวนอนให้เต็มความกว้างของจอภาพ

Menu & Content Layer for Front Page

เทคนิคอันนึงที่ chanel.com ใช้คือ เค้าจะให้ slide show เป็น position: fixed (CSS นะครับ) แล้วให้ส่วนของเมนูซ้อนขึ้นมาครับ แต่มีต้องใช้ทริคนิดนึง เพราะข้อจำกัดของการจัด element ของแท็ค div มันจะต้องต่อๆกันมาเป็นแถวยาวครับ พอเราเอา slide show ให้ fix เอาไว้ เจ้า div ที่เป็นส่วนของเมนูจะขึ้นมาอยู่บนสุดทันทีเลยครับ

วิธีการให้แท็ค div ไปอยู่ข้างล่างก็คือ ให้สร้าง div อีกตัวนึงที่ความสูง 100% เพื่อดันให้ส่วนของเมนูตกลงไป… แต่ทีนี้ มันหายไปเลยครับ เราเลยต้องไปกำหนด margin-top ของส่วนเมนูเป็นลบครับ เช่น -2em เพื่อให้ตำแหน่งของ element มันเลื่อนขึ้นมาครับ

Q: ทำไมไม่ใช้ position: fixed แล้วใส่ bottom: 2em ล่ะครับ?

A: ก็เพราะว่าเราต้องการให้เมนูมันสามารถเลื่อนตามการเลื่อน scrollbar ได้ครับ ถ้า position เป็น fixed แล้ว element จะถูกยึดเอาไว้เลย ไม่เลื่อนไปไหนแล้วครับ

พอกำหนด element เสร็จ ก็ใส่เนื้อหาเข้าไปได้เลย…

Frontpage Autoscroll

พอเสร็จแล้ว ก็ถึงคราวตัว Auto Scroll… ทีนี้ทำยังไงดีล่ะ หาไปหามา ลอง jQuery plugin อยู่หลายตัวเลย ก็ไม่เวิร์คเท่าไหร่…. ก็เขียนเองเลยดีกว่า ก็ลองอยู่นานเลยครับกว่าจะได้ เพราะต้องทดสอบเอฟเฟ็คให้ใช้ได้ทั้ง mousewheel ทั้งปุ่ม arrow บนคีย์บอร์ด ทั้งการใช้นิ้วลากบนมือถือ

ตอนแรกผมมีปัญหาว่ากดปุ่มลูกศรขึ้น แล้วเมนูมันกระตุกๆ และพอเลื่อนขึ้นมาเสร็จ จะให้มันเลื่อนกลับก็ช้าเกิน มาเจอทีหลังว่า มันเป็นเพราะเวลากดปุ่มบนคีย์บอร์ดทำให้เข้า event onkeypress ติดๆกันหลายครั้ง ก็ค้นไปค้นมาเลยเจอฟังก์ชั่น event.preventDefault() ของ jQuery ซึ่งจะช่วยให้ element ไม่เข้าไปใน event onkeypress อีกครับ

 

ทำเกือบเสร็จแล้วววว….

ทำไปทำมา เกือบจะเสร็จแล้วครับ นายจ้างมาบอก “ไม่เอาแล้วอ่ะ จะเปลี่ยนแบบแล้ว แบบนี้ไม่เค้ากับสไตล์แล้ว…”    T-T    ก็ต้องเปลี่ยนสิครับ แต่ขอเก็บไว้โพสต์ต่อไปนะครับ

 

ถ้ามีคำถาม comment ด้านล่างไว้ได้เลยนะครับ ถ้ามีเนื้อหาตรงไหนไม่ละเอียด ทิ้งคอมเม้นต์ไว้นะครับ จะแก้ให้เพิ่มเติมนะครับ

หรือติดต่อมาทางทวิตเตอร์ @gd_ab นะครับ 🙂