ทำเว็บด้วย WordPress – เริ่มเว็บแรก ตอนที่ 2

ความเดิมจากตอนที่แล้ว: แฟนผมให้ช่วยทำเว็บสำหรับแสดงผลงานการถ่ายภาพให้ครับ ตอนแรก คุณเธออยากได้เหมือนเว็บ chanel.com แต่ให้เว็บเป็นสีดำ จนฟังก์ชั่น เอฟเฟ็คอะไรต่างๆเกือบจะเรียบร้อย ผู้ว่าจ้างแต่ไม่จ่ายตังของผม (แฟน) ก็มาบอกว่า “อยากเปลี่ยนแบบแล้วอ่ะ” ก็เลยต้องมาเขียนอีกโพสต์นี้ล่ะครับ

 

 

WordPress: เปลี่ยน Requirement แล้วอ่ะ

ขณะที่ทำหน้าแรกของ http://www.smagan.com อยู่นาน ทำบ้างไม่ทำบ้าง ด้วยงานยุ่งบ้าง เล่นทวิตเตอร์บ้างเฟสบ้าง คุณแฟนก็มาบอก “เปลี่ยนแบบแล้วอ่ะ” -_-

ด้วยความที่เว็บสีดำมันแสดงถึงความหรูหรา แต่ผลงานที่ถ่ายออกมา มันยังไม่หรูอย่างนั้น บวกกับได้ดูเว็บใหม่ๆ มาด้วยล่ะ … ก็เลย … เปลี่ยน เปลี่ยนให้ดูสดใสกว่าเดิมน่ะครับ

เว็บอ้างอิง

รูปด้านล่างนี้เป็นเว็บที่คุณแฟนเอามาให้ดูครับ อยากได้อย่างนี้…

Dennis Adelmann http://dennisadelmann.de/
Dennis Adelmann http://dennisadelmann.de/
Wanda Print http://wandaprint.com/home/
Wanda Print http://wandaprint.com/home/

เอาล่ะ คราวนี้น่าจะง่ายขึ้น

WordPress: ทำเว็บด้วย WordPress รอบที่สอง…

smagan.com
smagan.com Desktop Version

คราวนี้ผม ก็เลยเริ่มใหม่กับ Bones อีกรอบโดยมีรายละเอียดดังนี้ครับ

mobile menu

รอบนี้ผมตั้งใจจะเอา mobile menu มาใช้ เท่าที่หามา รู้สึกว่า jQuery Plugin mmenu ใช้ได้เลยล่ะครับ มี animation ที่สามารถเลื่อนเข้าเลื่อนออกได้เพียงแค่กำหนดลิ้งค์ที่ปุ่มเมนูแค่นั้นเองครับ

แต่จะมีปัญหาตรงที่ ถ้าเปิดใช้โดยไม่กำหนดเงื่อนไขเลย plugin จะไปบังคับหน้าเว็บที่เป็นเวอร์ชั่น Desktop ทำให้เมนูหาย

ผมเลยแก้โดยใช้ jQuery ช่วย แค่ไปตรวจสอบขนาดหน้าจอว่าเป็น mobile site รึเปล่า ถึงค่อยเปิดใช้ตัว mmenu นี้

smagan.com
smagan.com Mobile Version
smagan.com mobile menu
smagan.com mobile menu

โดยผมใส่ code jQuery  ที่ตรวจสอบขนาดหน้าจอไว้ในไฟล์ script.js ใน event jQuery(document).ready(function(){})  ซึ่งจะได้ใช้ประโยชน์ในส่วนอื่นได้ด้วยครับ

 

เหอๆ จะบอกว่า จะกลับมาเขียนต่อ แต่จำไม่ได้แล้วว่าจะเขียนอะไรบ้าง เอาเป็นว่า ผมเอาหัวข้อที่เหลือใส่ไว้ข้างล่าง ค้างไว้ก่อนละกันนะครับ ส่วนเว็บ smagan.com ตอนนี้กำลังทำการเปลี่ยนหน้าโดยใช้ jQuery  อยู่ครับ (จดไว้ก่อน ไม่ได้แก้เว็บนานแระ เดี๋ยวลืมอีก :P)

  • jQuery.jTile – สำหรับ overlay บน thumbnail
  • functions.php : Thumbnail size
  • less CSS Framework
  • ปัญหาการใช้ <center> แล้วข้อความมันเคลื่อน เลยใช้ jQuery เพื่อสร้าง padding เพื่อให้ Tile อยู่ตรงกลาง

เอาล่ะครับ สำหรับตอนนี้ จบเอาดื้อๆก่อนละกัน มีอะไรจะถาม ก็คอมเม้นท์ไว้ข้างล่างได้เลยครับ

Advertisements

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s