screenshot-2016-10-14-11-52-36

วิธีเปลี่ยนเว็บไซต์ให้เป็นสีขาวดำ

Print Friendly

เพื่อเป็นการแสดงความอาลัยต่อการสวรรคตของพระบาทสมเด็จพระเจ้าอยู่หัว เว็บไซต์ของศูนย์ CELT จะเปลี่ยนเป็นสีขาว-ดำ เป็นระยะเวลา 30 วัน

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

วิธีการโดยทั่วไป

  1. ท่านจะต้องเลือกว่าจะแก้ไขไฟล์ .css หรือแก้ไข .php
    1. ในบางกรณีการแก้ php ทำได้ง่ายกว่า เพราะเว็บไซต์ของท่านอาจมีไฟล์ php ไฟล์หนึ่งที่ถูก include โดยทุกๆ หน้าอยู่แล้ว อาทิ header.php หรือ footer.php
    2. ในบางกรณี ที่ท่านไม่สามารถแก้ไฟล์ php ได้โดยสะดวก การแก้ css อาจทำได้ง่ายกว่า เช่นการแก้ style.css ใน child theme ของ WordPress
    3. ใน website ที่ซับซ้อน อาจต้องแก้ทั้งสองกรณี
  2. มองหาไฟล์ .php และ/หรือ .css ที่ปรากฎอยู่ในทุกหน้า
  3. สำหรับไฟล์ .css ให้แก้ไขโดยเพิ่มรหัสดังนี้
    /* BEGIN: black and white for The King */
    body {
     /* IE */
     filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    
     /* Chrome, Safari */
     -webkit-filter: grayscale(1);
    
     /* Firefox */
     filter: grayscale(1);
    }
    /* END: black and white for The King */
    
  4. สำหรับไฟล์ .php ให้แก้ไขโดยเพิ่มรหัสดังนี้
    <!--BEGIN: black and white for The King -->
    <script type="text/javascript">
    (function () {
     var body = document.body;
     body.style['filter'] = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
     if (!body.style['filter']) {
     body.style['-webkit-filter'] = 'grayscale(1)';
     body.style['filter'] = 'grayscale(1)';
     }
    }()); 
    </script>
    <!--END: black and white for The King -->
  5. บันทึกข้อความนำร่อง ที่เขียนว่า BEGIN: black and white for The King เอาไว้ เพื่อการค้นหาภายหลัง

คำแนะนำเพิ่มเติมสำหรับ WordPress

  • ท่านสามารถแก้ไข header.php หรือ style.css ได้โดยตรงผ่าน dashboard โดยเข้าไปที่ Appearance -> Editor แก้ไขให้เสร็จสิ้น แล้วกด Update File
    screenshot-2016-10-14-11-22-46

เรียนผูกต้องเรียนแก้

วิธีการแก้กลับ คือ ลบข้อความที่ได้เพิ่มเข้าไปออกจากไฟล์ .php และ .css ทุกไฟล์ที่เคยแก้

ท่านจะมั่นใจได้อย่างไรว่าได้แก้ไขทุกไฟล์แล้วจริงๆ? วิธีหนึ่งที่ช่วยได้คือใช้ grep ค้นหาทุกไฟล์ .css และ .php ที่ได้ถูกแก้ในขั้นตอนที่แล้ว โดยใช้สองคำสั่งนี้ใน document root ของเว็บไซต์ (เช่น /var/www/html)

grep -r --include=*.php 'BEGIN: black and white for The King' ./
grep -r --include=*.css 'BEGIN: black and white for The King' ./

ผลลัพธ์ที่ได้จะมีลักษณะดังนี้

screenshot-2016-10-14-11-41-20

ท่านจะทราบทันทีว่าไฟล์ที่ท่านต้องเข้าไปแก้ไขนั้นมีไฟล์ใดบ้าง

Project Idea

  1. เขียนโปรแกรม turn_bw โดยใช้ภาษา php หรือ python ก็ได้
  2. โปรแกรมนี้รับ parameter สองตัวคือ เปิดหรือปิด และตามด้วยจำนวนวัน เช่น
    1. turn_bw on 30
      หมายถึงต้องการเปลี่ยนเว็บให้เป็นขาวดำเป็นเวลาสามสิบวัน
    2. turn_bw on
      หมายถึงต้องการเปลี่ยนเว็บให้เป็นขาวดำ ไปเรื่อยๆ ไม่มีกำหนด
    3. turn_bw off
      หมายถึงต้องการเปลี่ยนกลับเป็นโหมดสี
  3. turn_bw on จะทำงานดังนี้
    1. ค้นหาไฟล์ .html, .php หรือ .css ทั้งหมด แล้วใส่รหัสที่เกี่ยวข้องเข้าไปท้ายไฟล์
      1. จะต้องมี comment กำกับ คลุมทั้ง block ของรหัสนี้ โดยจะต้องมี unique serial number แปะไว้ด้วย จะได้ค้นหาเพื่อลบออกภายหลังได้
      2. สำหรับ php อาจต้องมีการตรวจสอบว่า function ดังกล่าวถูก defined ไว้แล้วหรือยัง (เช่นบางหน้าอาจ include ไฟล์ php หลายๆ ไฟล์ แต่ไม่ควรต้องโหลดฟังก์ชันนี้หลายรอบ)
      3. ก่อนแก้ไข อาจต้องตรวจสอบว่ามีการกำหนดไว้อยู่แล้วหรือยัง
    2. ถ้าเป็นการเปิดระบบแบบกำหนดจำนวนวัน จะต้องทำดังนี้
      1. สร้างหรือ activate cron job เพื่อตรวจสอบว่าล่วงพ้นกำหนดดังกล่าวแล้วหรือยัง (อาจตรวจสอบวันละครั้ง หรือทุก 3 ชั่วโมงก็พอ)
      2. ถ้าล่วงพ้นแล้ว โปรแกรม turn_bw off จะถูกเรียกโดยอัตโนมัติ
  4. turn_bw off จะทำงานดังนี้
    1. ค้นหาไฟล์ .html, .php หรือ .css ทั้งหมด แล้วลบรหัสที่เกี่ยวข้องออก โดยดูจาก signature ของ comment ที่มี unique serial number คลุมรหัสอยู่
    2. ยกเลิก cron job (ถ้ามีการติดตั้งไว้)

References