สาธิตวิธีการทำป๊อปอัพ ถวายพระพร ทรงพระเจริญ ด้วยปลั๊กอิน TH Popup

ครั้งนี้จะมาสาธิตการใช้งาน WordPress plugin ป๊อปอัพที่ชื่อว่า “TH Popup” โดยปลั๊กอินมีความสามารถตั้งแต่การตั้งเงื่อนไขการแสดงป๊อปอัพ เทมเพลตการแสดงผล และการตั้งค่าอื่นๆ อีกมากมายโดยที่ผู้ใช้ไม่ต้องจำเป็นต้องใช้ความรู้ในการโค้ดดิ้ง เพียงแค่เตรียมรูปภาพบุคคล หรือพระสาทิสลักษณ์ และข้อความที่จะนำมาใส่ เพียงเท่านี้ก็สามารถมีป๊อปอัพสวยๆ ได้ง่ายๆ

  • กดเขียนเรื่องใหม่
  • กำหนดชื่อ เพื่อที่จะได้ทราบว่าป๊อปอัพนี้เกี่ยวกับอะไร เมื่อดูจากหน้ารวม
  • กำหนด วันเริ่มต้น และวันที่สิ้นสุดในการแสดงผล โดยสามารถกำหนดระยะเวลาไม่ให้ป๊อปอัพแสดงอีกหลังจากกดปิด โดยในตย. จะแสดงเพียงแค่ 1 วันก็สามารถให้ใส่ 0 ไว้เหมือนเดิมได้ไม่มีปัญหาใดๆ
  • ป๊อปอัพ ID มีไว้ในกรณีที่เรามีการเปลี่ยนแปลงป๊อปอัพแล้ว User คนนั้นกดปิดไปแล้ว แต่เราอยากให้แสดงอีกรอบก็สามารถกดเพื่อรีเฟรชป๊อปอัพ ID ตรงนี้ใหม่ได้จากนั้นกด บันทึกป๊อปอัพที่เคยกดปิดไปแล้วจะแสดงขึ้นมาอีกรอบ
  • กำหนดการแสดงผลหน้าแรก ถ้าหากกดปิดก็จะแสดงผลในทุกหน้า
  • ป๊อปอัพลิงก์ในกรณีที่อยากให้มีการกดที่ป๊อปอัพแล้วพาไปหน้าใดหน้าหนึ่ง เช่น ป๊อปอัพโปรโมชั่น เป็นต้น แต่ถ้าไม่ได้กำหนดอะไรก็สามารถปล่อยทิ้งไว้เฉยๆ ได้

ป๊อปอัพเทมเพลตครั้งนี้ผมจะเลือกเทมเพลตที่ 2 ให้รูปตรงกลางลอยเด่น และมี text อยู่ด้านล่าง และมีโลโก้ลอยอยู่ด้านข้างๆ

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

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

โดยเราสามารถอัพโหลดโลโก้ประจำพระองค์ ลงไปได้เลยจะไปปรากฎอยู่ข้างๆ รูปในหลวง

ข้อความจะมีสองส่วน ส่วนที่เป็นหัวข้อ และรายละเอียดหากต้องการให้หัวข้อเว้นบรรทัดสามารถใส่ tag <br> เข้าไปคั่นกลางได้เลย หากรายละเอียดก็เพียงกด shift+enter

ด้วยความที่พื้นหลังออกสีไปทางเข้มเลยจะใช้สีฟอนต์ไปทางสว่างและเงาเข้ม เพื่อเน้นให้ตัวอักษรเด่น โดยใช้เงารูปแบบเบลอแทนส่วนขนาด สามารถ save publish เพื่อไปกดดู preview ก่อนได้ว่าเพียงพอไหม โดยค่าตั้งต้นการแสดงป๊อปอัพจะไม่แสดงให้ user เห็นอยู่แล้วนอกเสียจากเป็น administrator

พื้นหลังผมเลือกเป็นสีเดียวกับตัวอักษร ผู้ใช้สามารถเลือกสไตล์ตามต้องการได้

บางเทมเพลตจะเป็นการใช้รูปคนละแบบในการแสดงผลบนป๊อปอัพ โดยที่เทมเพลตนี้จะมีการแสดงผลแบบเดียวกับ desktop และ tablet mobile จึงไม่มีความจำเป็นต้องอัพรูปสำหรับมือถือ

ในส่วนสุดท้ายจะเป็นการเลือกได้ว่าจะให้ต้องการเป็นลักษณะที่เป็นป๊อปอัพ หรือเต็มจอ และสามารถเลือกแอนิเมชั่นในการแสดงผลได้ด้วย ว่าจะให้เปิดแบบธรรมดาหรือมีลูกเล่นเพิ่มด้วย และยังสามารถกำหนดสีของพื้นหลังด้านหลังป๊อปอัพได้ด้วย อีกส่วนจะเป็นปุ่มปิดสามารถเปลี่ยนสีได้ โดยผมจะเลือกเป็นสีเดียวกับ text เพื่อให้ไปในทิศทางเดียวกัน ส่วนสุดท้ายจะเป็น z-index สามารถปรับได้หากท่านมี element อะไรที่ลอยเหนือป๊อปอัพ ก็สามารถปรับให้มากกว่าเพื่อแสดงทับขึ้นมาได้

ผลลัพธ์จากการทำทั้งหมดจะออกมาเป็นดังรูป กระบวนการที่ต้องทำจริงๆ คือการเลือกรูปบุคคลมาใส่ และคิดข้อความในป๊อปอัพเพียงเท่านั้น ส่วนที่เหลือท่านสามารถให้ “TH Popup” จัดการให้หมดเลย หากใครสนใจสั่งซื้อสามารถดูรายละเอียดได้ ที่นี่