BlogDesign

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

posted on 14 Jun 2007 23:32 by oatato  in BlogDesign

โดยปกติเราสามารถจัดเก็บธีมประกอบหน้าเว็บสไตล์ชีท (stylesheets) ของเรา
แยกออกไปเป็นไฟล์นามสกุล .css ได้อยู่แล้ว ซึ่งข้อมูลที่เก็บอยู่ในไฟล์นี้ก็จะมี
หน้าตาเหมือนโค้ดในหน้า Config CSS > Custom ของบล็อกเรานั่นเอง

ถ้าสมมุติว่าเราคัดลอก (copy) เอาโค้ดในส่วน custom ของบล็อก exteen แล้ว
บันทึก (save) เก็บไว้ในไฟล์ css ไฟล์หนึ่ง แล้วเอาไฟล์นี้ไปฝากไว้ที่เว็บรับฝากไฟล์ฟรี ๆ
ซักแห่งหนึ่ง (ตอนนี้ผมใช้ fileden.com อยู่ เสียดายว่าที่ exteen ไม่ยอมให้เก็บไฟล์สคริปต์
ประเภท css และ js มิเช่นนั้นคาดว่าคงจะสนุกกว่านี้แน่นอน)

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

การทดลองในวันนี้ ก็คือ ทำตามที่บอกข้างบนล่ะครับ

  • คัดลอกโค้ดเก็บไว้ อาจมีการเปลี่ยนรูปให้ต่างจากของเดิมในปัจจุบันซะหน่อย
    เพื่อให้เห็นความแตกต่าง บังเอิญที่ผมบันทึกธีมเก่า ๆ เก็บไว้อยู่แล้ว ก็เลยไม่ต้อง
    เสียเวลาทำอะไรเท่าไหร่ มีปรับแต่งโค้ดนิดหน่อยซึ่งบอกในหมายเหตุตอนท้ายครับ
    และทำการบันทึกเก็บไว้ในไฟล์ style03.css เป็นอันดับแรก
  • เอาไฟล์ style03.css ฝากไว้ที่ filedenพออัพโหลดเสร็จ จะได้ URL ของไฟล์นี้ คือ http://www.fileden.com/files/2007/1/5/597239/css_exteen/style03.css
  • เปิดเอ็นทรีใหม่(หรือเก่าก็ได้)ขึ้นมา 1 เอ็นทรี เขียนบทความอะไรให้เสร็จซะก่อน
    แล้วคลิกที่ปุ่ม เพื่อดูซอร์สโค้ด แล้วก็แปะโค้ดนี้เข้าไป น่าจะเป็นส่วนด้านบน
    เพราะตรวจเช็คโค้ดง่าย

    <link rel="stylesheet" href="http://www.fileden.com/files/2007/1/5/597239/css_exteen/style03.css" type="text/css" />
  • กดปุ่ม Publish ทันทีโดยไม่ต้องสวิตซ์โหมดกลับมา มิเช่นนั้น โค้ดข้างบนจะหายไป
    ในพริบตา และต้องเอามาแปะใหม่อยู่เรื่อย ๆไม่สนุกนักหรอก
  • ไปดูเอ็นทรีนี้ข้างนอก คุณจะพบการเปลี่ยนแปลง อย่างที่คุณกำลังเห็นอยู่ในขณะนี้

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

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

สนุกดีไหมครับ?

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

หมายเหตุที่ 1:

ที่ผมบอกเกริ่นไว้ว่า มีการปรับโค้ดในไฟล์ css นิดหน่อย นั่นคือการแก้ url ของไฟล์รูปต่าง ๆ ครับ
บางที url ของไฟล์รูปต่าง ๆ ที่ exteen กำหนดมาให้จะไม่เป็น url ในรูปแบบเต็ม เพราะถือเป็นการ
อ้างไฟล์ในเว็บเดียวกันเอง แต่กรณีนี้ ผมย้ายธีมไปเก็บในเว็บอื่นซะแล้ว เพราะฉะนั้น วิธีการอ้างแบบ
ย่อแบบเดิม ๆ ก็จะทำให้เกิดข้อผิดพลาด และทำให้หารูปไม่เจอได้ จึงต้องแก้ไข url ของไฟล์ซะใหม่
เปลี่ยนให้เป็นแบบเต็มครับ

ตัวอย่างเช่น ถ้าของเดิมเขียนอย่างนี้

เราก็ต้องแก้เป็นอย่างนี้แทน


หมายเหตุที่ 2:

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

ถ้าจำเป็นต้องคลิกเข้าไปจริง ๆ ก็ให้ Publish ออกไปก่อนที่หน้ารวมเอ็นทรี
แล้วค่อยคลิก edit กลับเข้ามาใหม่ เพื่อทำการแก้ไขต่อครับ


หมายเหตุที่ 3:

ความรู้ทั่วไปเกี่ยวกับนามสกุลของไฟล์สคริปต์

  • cssย่อมาจาก Cascaded Style Sheet
  • js ย่อมาจาก JavaScript

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

ความสนุกยังไม่จบเพียงแค่นี้ แล้วเจอกันตอนถัดไป ...
edit @ 2007/06/18 21:13:10
Tags: css, stylesheet, switching, theme, trick, web13 Comments

การเปลี่ยน 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

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

posted on 17 Jun 2007 02:24 by oatato  in BlogDesign

ในเนื้อหาตอนที่ 1 และ 2 พูดเกี่ยวกับสร้างธีมเฉพาะสำหรับเอ็นทรีใดเอ็นทรีหนึ่ง

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

โหมดง่าย
(สำหรับผู้แต่งบล็อกในระดับมาตรฐาน)

ถ้าต้องการเปลี่ยนธีมทั้งบล็อกให้เป็นไปตามไฟล์ css ที่คุณสร้างขึ้นมาเอง
ก็ให้ทำตามวิธีที่เคยบอกไว้ในตอนที่ 1แต่เปลี่ยนจากการวางโค้ดเรียกธีมในเอ็นทรี
มาไว้ในส่วน Preferences > Links > Add New Link แทน

แค่นี้เองครับ =)

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

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

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

ส่วนเรื่องวิธีการวางโค้ดของธีมที่จะนำมาแทนธีมหลักคือการไปวางโค้ดเรียกธีมในทุกเอ็นทรี
ฟังดูน่าตกใจ ถ้าคุณเขียนมา 100 กว่าเอ็นทรี แล้วต้องเข้าไปแก้ไขทุกเอ็นทรีตั้งแต่เคยทำมา
คงเป็นการทรมานตัวเองที่น่าสงสารทีเดียวที่จริงหลอกให้ตกใจไปอย่างนั้นเองแหล่ะ :P
มีวิธีอื่นที่ดีกว่าเยอะเลย ลองมาที่ส่วนจัดการบล็อกของคุณ แล้วไปที่

ไม่ต้องวางโค้ดในเอ็นทรี แต่ไปวางในส่วน Preferences > Links > Add New Link แทน

จากนั้นก็หรอกโค้ดเรียกธีมลงไป เป็นโค้ดเดียวกับที่เคยใส่ไว้ในเอ็นทรีเลย

<link href="http://www.fileden.com/ ... /style03.css" type="text/css" rel="stylesheet" />

แค่นี้เองครับ แล้วทุกเอ็นทรีในบล็อกของคุณก็จะเปลี่ยนเป็นธีมตามที่กำหนดไฟล์ css นั้นทั้งหมด

หมายเหตุ:
ถ้ารายการใน Preferences> Links ของคุณมีมาก และมีการโหลดของเล่นอะไรไว้เยอะแล้ว
ซึ่งในกรณีนี้ จะมีผลให้การวางโค้ดเรียกธีมที่อยู่ในตำแหน่งรายการสุดท้ายทำงานล่าช้าได้
และทำให้ต้องรอระยะหนึ่งจนกว่าธีมจะเปลี่ยน และในระหว่างนั้นคุณต้องทนกับธีมหลักที่อยู่
ในส่วนจัดการธีมของ exteen ไปพลาง ๆ ก่อน

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

ข้อจำกัดของวิธีนี้ คือ ส่วนรายการ Links จะไม่ใช่ส่วนแรกที่ถูกโหลดในหน้าบล็อก
เพราะฉะนั้นการเปลี่ยนธีม อาจจะทำได้ไม่ทันท่วงทีเหมือนกับการวางโค้ดในเอ็นทรี
เนื่องจากเวลาโหลดบล็อก เนื้อหาของเอ็นทรีจะมาก่อน แล้วรายการต่าง ๆ ที่เหลือ
(Recommended, Previous Entry, Category, Comment Alert, Favorite, Archive, Link)
จะโหลดตามเข้ามาเป็นอันดับถัดมา ช้าหรือเร็วก็ขึ้นอยู่ปริมาณหัวข้อในรายการต่าง ๆ

ถ้าจะมองในแง่ที่ดีก็คือ มันยังดีกว่าการต้องไปวางโค้ดในทุกเอ็นทรีก็แล้วกัน

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

สรุป

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

แต่ที่ต้องพูดถึงการวางโค้ดด้วยวิธีแบบนี้ ...

ก็เพราะว่ามันมีวัตถุประสงค์ที่ซับซ้อนในตอนต่อไปน่ะครับ
Tags: css, stylesheet, theme switching, trick, web5 Comments

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

posted on 17 Jun 2007 19:44 by oatato  in BlogDesign

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

ธีมที่เปลี่ยนตามเวลาในการเข้าบล็อกของผู้เยี่ยมชม

ขอเล่าที่มาของการเขียนบมความเรื่องการเปลี่ยนธีมหน่อยละกัน...
สืบเนื่องมาจากที่คุณตุ้มเป๊ะส่งลิงค์ของบทความเกี่ยวกับการสลับธีมมาฝากให้แปล

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

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

หลักการคือ เขียนโค้ดในภาษาจาวาสคริปต์ (JavaScript) ดึงค่าของเวลา (ชั่วโมง)
ปัจจุบันมาสร้างเงื่อนไขในการเลือกธีมแสดงผล

จากตัวอย่าง สมมุติว่าต้องการแบ่งช่วงเวลาออกเป็น 4 ช่วง คือ 0:00, 6:00, 12:00, 18:00
หรือคุณก็สามารถแก้ไขโค้ดเพื่อปรับเปลี่ยนเวลาหรือ แบ่งช่วงเวลาใหม่ได้ตามใจชอบ

สำหรับการเปลี่ยนธีมในเอ็นทรีใดเอ็นทรีหนึ่ง
ให้เอาโค้ดนี้ไปแปะไว้ในส่วนล่างสุดของเอ็นทรี แต่ก่อนที่จะแปะให้ทำดังนี้ก่อนเพื่อไม่ให้โค้ดหายไป
คือ ให้เคาะปุ่ม Enter เพื่อขึ้นบรรทัดใหม่เยอะ ๆ ประมาณว่าให้ข้อความที่เขียนในเอ็นทรีเลื่อนขึ้นไป
ด้านบนจนหายลับไปจากหน้าจอ และค่อยแปะโค้ด (เป็นการอาศัยบั๊กของโปรแกรมตัดโค้ดในเอ็นทรี
ในการวางโค้ด ถือเป็นเทคนิคที่น่าสนใจดีครับ)

<SCRIPT LANGUAGE="JavaScript">
function getCSS()
{
today = new Date(); // สร้างตัวแปรรับค่าวันเวลาปัจจุบัน
hour = today.getHours(); // ดึงเฉพาะเลขชั่วโมงออกมาใส่ตัวแปร

// สร้างตัวแปรเพื่อระบุ url ที่ใช้ฝากไฟล์ css
url ="http://www.yourhost.com/folder/";

// สร้างตัวแปรชื่อ display และกำหนดค่าจากเงื่อนไขดังนี้
if (hour > 18)
display = url + "style4.css"; //เวลาเกิน 18:00 ให้ใช้ชื่อ style4
else if (hour > 12)
display = url + "style3.css";//เวลาเกิน 12:00 ให้ใช้ชื่อ style3
else if (hour > 6)
display = url + "style2.css";//เวลาเกิน 06:00 ให้ใช้ชื่อ style2
else if (hour > 0)
display = url + "style1.css";//เวลาเกิน 00:00 ให้ใช้ชื่อ style1
else
display = url + "style1.css";//อื่นๆ (กรณี error)ให้ใช้ชื่อ style1

//สั่งให้โค้ดสร้างคำสั่งเรียกธีมโดยใช้ตัวแปร display มาใส่แทนในส่วนของชื่อไฟล์
var css = '<';
css+='link rel="stylesheet" href=' + display + ' \/';
css+='>';
// พิมพ์คำสั่งเรียกธีมที่สร้างเสร็จแล้ว
document.write(css);
}
</script>

<script language="javascript">getCSS();</script>

ซึ่งถ้าคุณแก้ไขโค้ดทุกอย่างถูกต้อง (เปลี่ยนชื่อไฟล์และ URL) ทุกอย่างน่าจะราบรื่นครับ

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

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

ให้บันทึกสคริปต์ข้างล่างลงในไฟล์ สมมุติว่าชื่อ "css_selector.js" *

* ในกรณีเซิร์ฟเวอร์ที่รับฝากไฟล์ไม่ยอมรับไฟล์นามสกุล js อย่าตกใจ
ไม่เป็นไร ให้เปลี่ยนนามสกุลเป็น "css_selector.txt" แทนก็ยังทำงานได้เหมือนกัน

function getCSS()
{
today = new Date(); // สร้างตัวแปรรับค่าวันเวลาปัจจุบัน
hour = today.getHours(); // ดึงเฉพาะเลขชั่วโมงออกมาใส่ตัวแปร

// สร้างตัวแปรเพื่อระบุ url ที่ใช้ฝากไฟล์ css
url ="http://www.yourhost.com/folder/";

// สร้างตัวแปรชื่อ display และกำหนดค่าจากเงื่อนไขดังนี้
if (hour > 18)
display = url + "style4.css"; //เวลาเกิน 18:00 ให้ใช้ชื่อ style4
else if (hour > 12)
display = url + "style3.css";//เวลาเกิน 12:00 ให้ใช้ชื่อ style3
else if (hour > 6)
display = url + "style2.css";//เวลาเกิน 06:00 ให้ใช้ชื่อ style2
else if (hour > 0)
display = url + "style1.css";//เวลาเกิน 00:00 ให้ใช้ชื่อ style1
else
display = url + "style1.css";//อื่นๆ (กรณี error)ให้ใช้ชื่อ style1

//สั่งให้โค้ดสร้างคำสั่งเรียกธีมโดยใช้ตัวแปร display มาใส่แทนในส่วนของชื่อไฟล์
var css = '<';
css+='link rel="stylesheet" href=' + display + ' \/';
css+='>';
// พิมพ์คำสั่งเรียกธีมที่สร้างเสร็จแล้ว
document.write(css);
}

getCSS();

ส่วนคำสั่งสำหรับการเรียกใช้สคริปต์ css_selector.js เป็นดังนี้

<script language="javascript" src="http://www.yourhost.com/folder/css_selector.js"></script>

ทีนี้ก็เอาโค้ดตรงโซนสีเขียวไปแปะในเอ็นทรีก็ได้

หรือถ้าจะต้องการให้มีผลกับทั้งบล็อก ก็ให้ไปวางโค้ดเรียกสคริปต์ในส่วนของ
Preferences > Links > Add New Link แทน

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

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

การยืม Theme ไปใช้

posted on 26 Jun 2007 10:00 by oatato  in BlogDesign

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

เราสามารถขอยืม Theme จากเพื่อนฝูงเอาไปใช้ตกแต่งบล็อกของเราเองได้ง่าย ๆ เลยทีเดียว
เพียงแค่รู้ตำแหน่ง (URL) ของไฟล์ css ที่เพื่อน ๆ อัพโหลดฝากไว้ในเว็บก็ดึงมาใช้ได้แล้ว

สมมุติว่า ผมต้องการจะแจกธีมชื่อ style03.css ผมก็จะบอกตำแหน่งว่าไฟล์นี้ถูกเก็บอยู่ที่
http://www.fileden.com/files/2007/1/5/597239/css_exteen/style03.css

ซึ่งจะทำให้คุณสามารถใส่โค้ดที่สามารถเลือกธีมได้อย่างถูกต้อง

<link rel="stylesheet" href="http://www.fileden.com/files/2007/1/5/597239/css_exteen/style03.css" type="text/css" />

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

มีตัวอย่างการทดลองให้ดูด้วย
สมมติว่าผมจะขอยืมธีมของคุณตุ้มเป๊ะมาใช้ ผมก็ใช้วิธีตามที่บอกข้างบน
แต่เปลี่ยนตำแหน่งของไฟล์ css ตามที่ได้ทราบมาเอาไปใส่ในโค้ดแทน

ผลลัพธ์ที่ได้(คลิก)

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

แต่ก่อนจะที่เริ่มอะไร มีข้อจำกัดที่ผู้ยืมธีมไปใช้จำเป็นต้องทราบคือ

  • ถ้ามีการเปลี่ยนแปลงแก้ไขภาพและสีของธีมนั้น มันก็จะมีผลไปกับบล็อกคุณไปด้วย
    ซึ่งไม่ว่าคุณจะชอบธีมใหม่ที่มีการแก้ไขหรือชอบของเก่าที่มีอยู่เดิม ก็เลือกไม่ได้อยู่ดี
  • ถ้าไฟล์ css นั้นถูกเปลี่ยนชื่อไฟล์หรือลบไฟล์ css นั้นแล้ว คุณก็ไม่สามารถใช้ Theme นั้น
    ได้อีกต่อไป เสียใจด้วยนะ

ถ้ายอมรับข้อนี้ได้ ก็เชิญตามสบายครับ=)

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

Tags: css, style sheet, theme8 Comments
First | Previous | Next | Last

หาเอ็นทรี่ไม่เจอ ค้นได้


กำลังโหลดข้อมูลในบล็อก

Recommend