สำหรับชาวบล็อก Exteen จะเรียกว่าประสบปัญหา มันก็ออกจะดูเวอร์ไปหน่อยนึง แต่เอาเป็นเป็นว่าสำหรับคนที่ชอบเปลี่ยนธีมบล็อก แก้ CSS บ่อย ๆ แล้วละก็ การประกาศให้ลูกบล็อกที่เข้ามาดูบล็อกของเราว่า อัพธีมแล้วนะ Refresh กันด้วย คงทำกันจนชินมือเห็นกันจนชินตาไปแล้ว วันนี้ผมเลยมาเสนออีกหนึ่งวิธีบ้าน ๆ ที่ผมคิดขึ้นมานานละ แต่ไม่เคยทำจริงจังสักที ครั้งนี้เลยขอเผยแพร่ไอเดีย ให้ชาว Exteen นำไปใช้กัน

ที่ผมเน้นย้ำว่าชาว Exteen ก็ไม่ได้แปลว่า จะใช้ได้แค่กับ Exteen นะครับ วิธีที่ผมจะใช้สามารถนำไปใช้ได้กับทุก ๆ เว็บไซต์เลย เพียงแต่ว่าถ้าเป็นเว็บไซต์อื่น ๆ มันน่าจะมีวิธีที่ดีกว่านี้อยู่แล้ว อย่างเช่นการใช้ PHP Code ในการกำหนดเวอร์ชันของ CSS เพื่อให้เบราเซอร์มันอัปเดตอัตโนมัติเอง ไม่ต้องมานั่ง Refresh กัน แต่ Exteen นั้น เราไม่อาจเข้าไปแก้ถึงขนาดนั้นได้ เลยก่อกำเนิดเป็นวิธีบ้าน ๆ นี้เอง

อารัมภบทซะยาว มาเข้าเรื่องกันเลยดีกว่านะ

อย่างที่รู้กันว่า ทุกเบราเซอร์นั้นมีการแคช CSS เก็บไว้ในเครื่อง หรือแม้แต่รูปภาพก็มี เป็นระบบที่ช่วยให้เราสามารถเข้าเว็บไซต์ต่าง ๆ ที่เคยไปมาแล้วได้เร็วมากขึ้น เพราะเราไม่ต้องโหลดไฟล์จากไซต์นั้น ๆ ใหม่ทั้งหมด ถ้าหากว่าข้อมูลยังเป็นตัวเดิมชื่อเดิมอยู่ ทว่านี่แหละคือปัญหา เพราะไฟล์ style.css ของ Exteen นั้นเป็นการลิงก์มาจากที่อื่น ไม่ได้เป็นแบบฝังลงใน HTML และไม่ได้มีการกำหนดเวอร์ชัน ดังนั้นไม่ว่าเราจะอัปเดต CSS ยังไง มันก็จะยังเป็นไฟล์ชื่อ style.css เหมือนเดิม และเบราเซอร์จะไม่มีทางรู้เลยว่า Code ที่อยู่ใน style.css มีการอัปเดตอะไรบ้างรึเปล่า และมันยังคงเรียกใช้แคชเดิมที่อยู่ในเครื่องต่อไป

แต่ไฟล์ HTML นั้นไม่ใช่ ไฟล์ HTML ก็คือโครงสร้างของหน้าเว็บเรานี่แหละ มีการกำหนด Tag ต่าง ๆ เอาไว้ในแต่ละเนื้อหา ตัวอย่างเช่น <header>, <h1>, <a>, <span> หน้าตาแบบนี้น่าจะคุ้นเคยกัน สิ่งเหล่านี้แหละที่นำมาเขียนเอาไว้ใน HTML เพื่อรอให้ CSS มาอ้างอิง แล้วจัดเว็บให้สวยงามอย่างที่เห็นกันทั่วไป และด้วยเหตุที่ว่ามันเป็นส่วนของเนื้อหา มันเลยไม่มีการแคชและต้องอ่าน HTML ใหม่ทุกครั้งที่มีการ Reload ดังนั้นเราจะใช้ประโยชน์ข้อนี้มาทำให้วิธีของผม...เวิร์ค

สำหรับวิธีนี้ สิ่งที่เราต้องใช้ก็คือกล่อง Custom Code 1 กล่อง จะว่างหรือไม่ว่างก็ได้ ขอให้ใส่ Code ได้พอ โดยแนะนำว่า Custom Code อันนี้ควรจะวางอยู่ใน Sidebar ไม่ก็ Bottom menu ของบล็อกนะครับ ส่วนเหตุผลนั้นเดี๋ยวผมจะบอกในขั้นตอนท้าย ๆ

จากนั้นก็ Code ที่เตรียมไว้ให้ Custom Code โดย Code นี้จะเป็นแบบเดียวกับที่อยู่ในภาพแรกนะครับ ส่วนใครอยากได้ดีไซน์ใหม่ เดี๋ยวว่ากันทีหลัง เพราะเราสามารถแก้ได้อิสระเท่าที่ความสามารถจะมีเลยละ

ให้คัดลอก HTML Code ต่อไปนี้ วางลงใน Custom Code ที่เตรียมไว้เลย แล้ว Save ให้เรียบร้อย

<span class="css-update-v1" style="position:fixed;right:20px;bottom:20px;width:250px;background:#FFD82D;color:#555;padding:15px;border:1px solid #FFF;border-radius:10px;text-shadow:0 1px 0 #FFF;box-shadow:0 3px 4px 0 rgba(0,0,0,.2);"><p>บล็อกมีการอัพเดท <strong>Cascade Style Sheet</strong> กรุณา <strong>Refresh แบบ Clear Cache</strong> จนกว่าข้อความนี้จะหายไป</p></span>

จากนั้นให้เอา CSS อีกบรรทัดนึงไปวางไว้ใน CSS Editor ของ Exteen

.css-update-v1 {display:none;}

ถ้าใครที่เข้าใจสิ่งที่ผมพูดไปก่อนหน้านี้ หรือมีพื้นฐานอยู่แล้ว ก็คงจะ อ๋อ แล้วใช่มั้ยละครับ ส่วนใครที่ไม่เข้าใจหรือเกือบจะเข้าใจแล้ว แต่งงว่าทำไมถึงกำหนดใน CSS ว่า display:none; แบบนี้ใครจะเห็นได้ เดี๋ยวเรามาอ่านคำอธิบายกันครับ

ก่อนอื่นเลยให้ดูที่ HTML Code ที่พิมพ์ให้ไป ที่มันยาวเฟื้อยน่ะครับ มาดูทีละส่วนกัน

<span class="css-update-v1"... ส่วนนี้เป็นชื่อ Class ที่เราต้องการ สามารถเปลี่ยนเป็นอะไรก็ได้ แต่ต้องจำไว้ เพราะว่าเราต้องใช้ชื่อเดียวกันนี้อ้างอิงกับ CSS ของ Exteen

...style="position:fixed;right:20px;bott...);"> ส่วนนี้คือ CSS แบบ Inline (CSS แบบฝังใน HTML ดังนั้น CSS จะถูกโหลดขึ้นมาเป็นเวอร์ชันล่าสุดแน่นอน) ตัวกำหนดหน้าตาที่เราต้องการให้ป๊อบอัพมันแสดงครับ ปรับแต่งได้มากมายตามความสามารถ CSS ของท่านเอง ใครปรับไม่ได้ใช้เหมือนผมไปก็ได้ครับ ไม่ว่ากัน แต่ยังไงถ้ามีเวลา ผมจะมาเพิ่ม Preset หลาย ๆ แบบให้เอาไปใช้กันครับ

...<p>บล็อกมีการอัพเดท <strong>Casc...</p> ส่วนนี้คือข้อความที่เราต้องการครับ อยากจะแก้คำก็จัดการที่ส่วน <p>...</p> ได้เลยครับ

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

ต่อมาก็มาดู CSS Code กันบ้าง

.css-update-v1... ส่วนนี้คือชื่อ Class ที่เรากำหนดไว้ ถ้าใครเปลี่ยนชื่อที่ HTML ละก็ อย่าลืมเปลี่ยนตรงนี้ด้วยนะ โดยรูปแบบก็คือ ใส่ . (จุด)แล้วตามด้วยชื่อที่ต้องการ

...{display:none;} ตรงนี้คือคุณสมบัติที่เราต้องการให้ Class ดังกล่าวแสดง ตามที่ผมพิมพ์ไว้ก็คือ display:none; แปลว่าไม่ต้องแสดง แต่ไม่ต้องกลัวว่าป๊อปอัปข้างหน้าที่เราทำไว้เมื่อกี้จะหายไปนะครับ อย่างที่บอก CSS ใน style.css ของ Exteen ไม่ว่าแก้ยังไงมันจะยังไม่ถูกอัปเดตทันที และ Code นี้ก็จะยังไม่โดนใช้งานนั่นเอง ดังนั้นผู้ใช้คนอื่นก็จะยังเห็นป๊อปอัปดังกล่าวอยู่ และหลังจากที่เบราเซอร์ของผู้ใช้ Reload จนสามารถโหลด style.css ล่าสุดได้แล้ว คำสั่งนี้ก็จะถูกโหลดขึ้นมา และป๊อปอัปที่เราทำไว้ก็จะหายไป บ่งบอกว่า CSS เป็นเวอร์ชันล่าสุดแล้วนั่นเอง

เท่านี้ก็เสร็จแล้วละครับ วิธีนำไปใช้เบื้องต้น ส่วนหลังจากนี้หากว่ามีการอัปเดต CSS ของบล็อกเราอีก เราก็แค่เปลี่ยนชื่อที่ Class ทั้งใน HTML Code และ CSS Code ให้เป็นชื่อใหม่ที่ตรงกัน เช่น เดิมทีชื่อ .css-update-v1 ก็เปลี่ยนเป็น .css-update-v2 ก็ได้ แล้วป๊อปอัปก็จะกลับมาแสดงอีกครั้งนึง

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

ส่วนอีกเรื่องนึงที่ผมติดไว้ตอนต้น ที่ว่าทำไม Custom Code ถึงควรวางไว้ใน Sidebar หรือ Bottom menu อันที่จริงคือไม่ควรที่จะไปวางไว้ในส่วนของ Top menu แค่นั้นเอง เพราะถ้าหากว่าวางใน Top menu มันจะมีโอกาสที่ Google bot จะเข้ามาเก็บข้อมูลส่วนนี้ไปใช้เป็นคำอธิบายบล็อกเวลาลิงก์บล็อกเราไปติดอันดับอยู่ใน Search Engine นั่นเอง (ผมเคยโดนมาแล้ว) มันคงจะตลกน่าดู ถ้านิยามบล็อกเรากลายเป็นคำเตือนเพื่อให้ Reload เพจซะอย่างนั้น

ก็หวังว่าชาว Exteen จะเอาไปประยุกต์ใช้กันได้นะครับ ลาละครับ

ปล. เอนทรีนี้ตัวหนังสือเป็นพรืดเลยแฮะ


Example Code

แบบมีฟิลเตอร์สีดำโปร่งแสงด้านหลัง และตัวหนังสืออยู่กลางจอ

HTML Code

<span class="css-update-v1" style="display:table;position:fixed;top:0;left:0;width:100%;height:100%;"><span style="display:table-cell;vertical-align:middle;text-align:center;background:rgba(0,0,0,.5);text-shadow:0 1px 0 rgba(255,255,255,.5),0 -1px 0 #000;color:#900;)"><p>บล็อกมีการอัพเดท <strong>CSS</strong> แล้วนะ กรุณากด <strong>Ctrl+F5</strong> บน Firefox หรือ <strong>F5</strong> ย้ำ ๆ บนเบราเซอร์อื่นด้วยจ้า</p></span></span>

CSS Code

.css-update-v1 {display: none !important;}

Recommend