การเปลี่ยน Theme แบบซ้บซ้อน - ตอนที่ 2

posted on 16 Jun 2007 18:34 by oatato in BlogDesign

จากการทดลองในตอนที่แล้ว คาดว่าหลายคนคงสามารถเปลี่ยนธีมของเอ็นทรีได้บ้างแล้วมั๊ง
อาจจะพบว่ามันมีขาดหายไปบ้าง ก็เป็นเพราะว่าธีมใหม่ที่เราใส่ซ้อนเข้าไป มันขาดในส่วนที่
ธีมหลักกำหนดไว้ มันก็เลยไปใช้ธีมหลักแทน งงไหมครับ

คงต้องขอนิยามศัพท์มาตรฐานขึ้นมาก่อนที่จะอธิบายต่อไปนะครับ ขอบอกก่อนว่าศัพท์นี้
ตั้งขึ้นมาเอง ไม่ได้เอามาตรฐานมาจากพจนานุกรมเล่มไหนเลย ดังนั้นถ้าเอาไปอธิบายต่อ
จะเรียกใหม่เป็นอะไรก็แล้วแต่ความสะดวกนะครับ แต่ในสำหรับการอธิบายในนี้ ขอใช้เป็น
คำนี้ละกัน เพื่อที่จะได้เข้าใจตรงกันนะ

ธีมหลัก : เป็นธีมของ exteen ที่บล็อกใน exteen กำลังใช้อยู่โดยปกตินั่นแหละครับ
ซึ่งเวลาจะแก้ไขธีมก็ต้องมาแก้ในส่วนของ Theme > Config CSS แล้วก็ไปแก้ไขค่า
ต่าง ๆ ในฟอร์มที่กำหนดให้ แล้วก็บันทึกข้อมูล

ธีมหลักนี้เราไม่สามารถดึงออกจากบล็อกเราได้นะครับ เพราะเป็นการเขียนโค้ดฝังเอาไว้
ในตัวโปรแกรมซึ่งมีผลกับทุกบล็อก แต่ก็ยังใจดีที่เปิดให้เราเข้าไปแก้ไขได้ เลยทำให้เรา
ได้มีโอกาสเห็นไอเดียสร้างสรรค์ของแต่ละคนในการตกแต่งบล็อกได้ตามสไตล์ของตัวเอง
ธีมส่วนตัว : ก็คือธีมที่เราเขียนแยกออกมาเอง จะคัดลอกมาจากธีมหลักหรือใช้พลังเทพ
เขียนขึ้นมาใหม่หมดเลยก็ตามสบาย แต่เมื่อใดที่มันถูกแยกออกมาแล้ว มันคือธีมส่วนตัว
ที่คุณจะเอาไปประยุกต์ใช้กับหน้าเว็บไหนก็ได้ หรือจะเอามันกลับมาใช้ในบล็อก exteen
ก็ยังได้ (ซึ่งก็คงเห็นกันไปแล้วว่ามันใช้ได้ผลจริง จากการทดลองในตอนที่แล้ว)

แต่การนำเอาธีมส่วนตัวมาใช้ในเอ็นทรีนั้น ไม่ได้หมายความว่าธีมหลักจะไม่ได้ถูกเลิกใช้นะครับ
ตามที่บอกไปแล้ว ว่าธีมหลักของ exteen เอาออกไม่ได้จริง ๆ และมันก็กำลังถูกเรียกใช้อยู่
ตามปกตินั่นแหละ แต่มันเป็นความสามารถพิเศษของcss ที่เราสามารถกำหนดคุณสมบัติต่าง ๆ
ในหน้าจอซ้ำกันได้หลาย ๆ หน เพียงแต่ว่ามันจะเลือกเอาการกำหนดค่าครั้งล่าสุดไปใช้เท่านั้น
พอธีมส่วนตัวตามเข้ามา อะไรที่กำหนดซ้ำกันมันก็จะถูกกลบด้วยธีมหลังนี่เอง

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

พูดหลักการพอเป็นพิธีแล้วลองยกเป็นตัวอย่างดูดีกว่า แก้อาการปวดหัวและมึนงง (หรือเปล่า?)

สมมุตินะครับสมมุติ ว่าในส่วนของการกำหนดค่าใน exteen ซึ่งเป็นธีมหลัก
เราได้เข้าไปกำหนดสีของลิ้งค์ในหน้าจอให้เป็นตามนี้

a:link, a:visited { color: #FF0000;background-color:#FFCC99 }

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

This is my link

ทีนี้ เราก็คัดลอกโค้ดนี้ไปสร้างไฟล์ mystyle.css ขึ้นมาใหม่ แล้วก็แก้ไขข้อมูลใหม่เป็น

a:link, a:visited { color: #000000;background-color:#669966 }

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

This is my link

ธีมเปลี่ยนไปแล้ว ซึ่งสีจากธีมหลักจะถูกแทนด้วยธีมส่วนตัวในชั่วพริบตา
ถ้ามองด้วยด้วยสายตาเปล่า ถึงจะไวแค่ไหน ก็คงดูการเปลี่ยนแปลงนี้ไม่ทัน
ผมจึงจำลองขั้นตอนแบบสโลว์โมชั่นในการเปลี่ยนธีมมาให้ดูกัน
1. โหลดข้อมูลเอ็นทรีมาบนหน้าจอเว็บ
2. my link : เป็นสีดั้งเดิมของลิ้งที่ Internet Explorer ตั้งค่าไว้หรือที่ได้จากการเขียนแท็กภาษา HTML
<body link="#XXXXXX" alink="#XXXXXX"> ซึ่งไม่มี css มาเกี่ยวข้อง
3. my link : เป็นสีของลิ้งจากการตั้งค่าในธีมหลักของ exteen

4. my link : เป็นสีของลิ้งจากการตั้งค่าในธีมส่วนตัวภายในไฟล์ mystyle.css
และนี่ก็คือสีชุดสุดท้ายที่จะเห็นบนหน้าจอ

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

ส่วนปัญหาเรื่องสีผิดไปจากที่คาดไว้ อาจจะมาไม่ครบหรือมาเกิน จะเกิดจากสาเหตุนี้ครับ

ใช้ตัวอย่างเดิม ที่การกำหนดค่าของธีมหลักเป็นแบบนี้

a:link, a:visited { color: #FF0000;background-color:#FFCC99 }

ซึ่งให้ผลเป็นแบบนี้

This is my link

และพอเราแก้ไขไฟล์ mystyle.css ใหม่ให้เป็น

a:link, a:visited { color: #3366CC; }

โดยที่เราก็แอบหวังว่า ผลลัพธ์น่าจะออกมาเป็นอย่างนี้

This is my link

แต่ผลลัพธ์ดันออกมาเป็น

This is my link

อาจจะแปลกใจว่าสีพื้นหลังมาได้ไง แต่คำตอบนั้นง่ายมากครับ สีพื้นหลังนี้มาจากธีมหลักนั่นเอง
ก็เพราะพื้นหลังสีส้มมันถูกกำหนดไว้เรียบร้อยแล้ว พอธีมส่วนตัวเข้ามา มันจะเปลี่ยนสีเฉพาะ
ที่มีการกำหนดไว้เท่านั้นครับ ซึ่งก็คือเปลี่ยนตัวอักษรเป็นสีฟ้าแค่นั้น พื้นหลังเป็นอะไรมาก่อน
ก็ไม่เปลี่ยน เพราะไม่มีการตั้งค่าใหม่

และนี่จึงเป็นการทดลองอย่างหนึ่งที่พิสูจน์ว่าธีมหลักไม่ได้หายไปไหน มันแอบซ่อนอยู่รอบตัวเรานี่เอง

ส่วนการกำหนดค่าให้กับ object ต่าง ๆ ในหน้าจอเว็บแบบนี้ หลายคนคงทราบแล้วมั๊งว่า
มันคือ style sheet ซึ่งแปลเป็นไทยก็คือ การกำหนดรูปแบบหรือสไตล์ให้กับแผ่นเอกสาร
มิได้แปลว่าเป็นเอกสารที่หรูหรามีสไตล์ หรือเป็นเอกสารไฮโซแต่อย่างใด

การทำงานแบบที่มีการกำหนดค่าซ้อนกันเป็นชั้น ๆ แบบว่าเจออะไรก่อนก็ทำไปก่อน
เจอคำสั่งไหนซ้ำก็เปลี่ยนตาม ถ้าไม่มีการกำหนดซ้ำก็จะปล่อยไว้อย่างนั้น ศัพท์ที่เป็น
ทางการจะเรียกว่าเป็นการทำงานแบบ cascade

ทั้งหมดนี้จึงเป็นสิ่งที่อธิบายถึงที่มาของคำว่าCascaded Style Sheet หรือ CSS นั่นเอง

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

จากวิธีที่กล่าวมาข้างต้นนั้น จะเห็นว่าวัตถุประสงค์ก็คือการเปลี่ยนสีให้กับเอ็นทรีใดเอ็นทรีหนึ่งเท่านั้น
แต่คุณก็อาจจะพบว่า การเปลี่ยนแปลงนี้ส่งผลกระทบกับเอ็นทรีอื่น ๆ และบล็อกในหน้าแรกทั้งหมด

ลองสังเกตดูว่า มีเอ็นทรีใดในหน้าแรกนั้นมีการเรียกใช้ธีมส่วนตัวขึ้นมาหรือเปล่า
คาดว่าหลักการในเรื่องของ cascade จะเป็นคำตอบของคำถามนี้นะครับ

และถ้าถามต่อว่า ในหน้าแรกมีการแสดงเอ็นทรีหลายเอ็นทรี แต่ละเอ็นทรีก็ที่มีการเรียกใช้ธีมส่วนตัว
และธีมส่วนตัวนั้นคนละไฟล์กัน มีการกำหนดสีและภาพต่างกัน แล้วบล็อกของเราจะเลือกใช้ธีมไหน
ธีมของเอ็นทรีที่เขียนล่าสุดหรือเปล่า?

จากหลักการของ cascade ก็คือพบการกำหนดค่าของธีมไหนก่อน มันก็จะเปลี่ยนก่อน
จากการเรียงเอ็นทรีในหน้าแรก มันจะเรียงจากเอ็นทรีใหม่ไปเก่า ซึ่งก็คือมันจะพบคำสั่ง
ในการเรียกธีมส่วนตัวของเอ็นทรีเก่าสุดเป็นคำสั่งหลังสุดและใช้ธีมนั้นแทน

ดังนั้นการใช้ธีมส่วนตัวในบล็อก ถ้าใช้หลากหลายมากเกินไปไปก็อาจสร้างความมึนงง
ให้กับเจ้าของบล็อกและผู้เยี่ยมชมได้เหมือนกันนะครับ ไม่เชื่ออย่าลบหลู่ หุหุ

Tags: css, stylesheet, theme switching, trick, web3 Comments