สอนเทคนิคน่ารู้ สร้าง UI popup ให้กับเว็บด้วย Twitter โดย Nectar Ninjar By uiblogaziner September 23, 20152171 views ShareTweet 0 ช่วงนี้ใครแวะเยี่ยมเยียนเว็บ uiblogazine จะสังเกตเห็น popup เล็กๆ ขึ้นอยู่ที่มุมขวาล่างของหน้าแรก เจ้า popup นี้ ผมไม่ได้ใช้ jQuery หรือ plugin ใดๆ ของ wordpress เพื่อสร้างมันขึ้นมานะครับ แต่ผมใช้แค่ script สั้นๆ ของ Nectar Ninja แล้วก็สั่งการผ่าน Tweet ในหน้าเว็บ Twitter แบบง่ายๆ ถ้าสนใจอยากทำตาม งั้นก็อ่านต่อเลยซิ popup ที่สร้างจาก script จากเว็บ Nectar Ninja ตัวอย่าง popup ที่สร้างผ่าน Tweet 1. คัดลอก script จากเว็บ Nectar Ninja ชุด script เพื่อรองรับการสร้าง popup ผ่านทาง Twitter ขั้นตอนแรกสุดเลย ให้เราเข้าไปที่เว็บ https://nectar.ninja/ แล้วเลื่อนหน้าจอหา script ซึ่งจะมี 2 แบบให้เราเลือกใช้ แบบแรกคือ script ที่จะเอาไปแปะไว้ในหน้าโค้ดเว็บทั่วไป แบบที่สองคือ script ที่จะเอาไปแปะไว้ในหน้าเว็บที่ใช้ WordPress รูปด้านบนจะเห็นว่า สิ่งที่เราต้องแก้ไขใน code ก็คือค่าตัวแปร handle ตรง @placeholder ค่านี้คือชื่อ account Twitter ของเราที่จะใช้สั่งการเจ้า popup นี้นั่นเองครับ 2. แทนที่ค่าตัวแปร ตำแหน่งชื่อ Account ของ Twitter ที่จะนำไปแทนที่ตัวแปร @placeholder ดังนั้น ให้เราล็อคอินเข้าหน้าเว็บ Twitter จากนั้นมองหาชื่อตรงบริเวณที่ผมชี้ลูกศรสีเหลืองตามรูปด้านบน เอาชื่อนี้ไปใส่แทนตรง @placeholder 3. แปะโค้ดที่ไฟล์เว็บ กรณีแรกที่เป็นเว็บทั่วไปไม่ได้พัฒนาบนระบบ CMS (Content Management System) ให้เราเอาโค้ดไปแปะไว้ก่อนแท็ค </head> ในไฟล์ index.html ที่อยู่บน root directory ของเซิร์ฟเวอร์ กรณีสองที่เป็นเว็บซึ่งพัฒนาบน WordPress เราต้องเอาโค้ดไปแปะไว้ก่อนแท็ค </header> เช่นกัน แต่เป็นในไฟล์ header.php ของธีมที่เรากำลังเลือกใช้งานอยู่ครับ อย่างเว็บ uiblogazine ก็พัฒนาบน WordPress ฉะนั้นเรามาดูตัวอย่างจริงเลยแล้วกันเนอะ ตำแหน่งและไฟล์ header.php ของธีม WordPress บนไฟล์เซิร์ฟเวอร์ ให้เรา access เข้า FTP แล้วเข้าไปที่ folder directory ของธีมที่ใช้งาน เช่น ธีมของเว็บ uiblogazine คือ volt เราก็เข้าไปที่ path: wp-content > themes > volt ในนี้เราจะเห็นไฟล์ header.php ให้เปิดไฟล์นี้ขึ้นมาแก้ไขเลยครับ ตำแหน่งที่วางโค้ดในไฟล์ header.php เอาโค้ดจากเว็บ Nectar Ninja ไปแปะไว้ก่อนแท็ค </header> เหมือนกับตำแหน่งภาพด้านบน แล้วอย่าลืมแทนที่ค่าตัวแปร @placeholder ด้วยชื่อของ account เราใน Twitter ด้วยนะครับ ถึงตอนนี้เราก็พร้อมจะสร้าง popup ด้วยการ Tweet แล้ว 4. สร้าง popup ผ่าน Tweet ปุ่ม tweet บนหน้าเว็บ Twitter กลับไปที่หน้าเว็บ Twitter แล้วเลือกปุ่ม Tweet ที่อยู่ด้านบนขวาของหน้า ตัวอย่างรูปแบบโครงสร้างการพิมพ์เพื่อสร้าง popup แล้วพิมพ์ตามรูปแบบการสั่งงานตามที่เว็บ Nectar Ninja กำหนด ซึ่งมีโครงสร้างดังนี้ครับ @NectarNinja + ข้อความ + ลิงค์ (มีหรือไม่มีก็ได้) + #(notification, question, alert, hide) ตัวอย่างการพิมพ์ Tweet ของหน้าเว็บ uiblogazine จากตัวอย่างที่ผมพิมพ์เพื่อให้ได้ popup ดั่งที่ปรากฎบนเว็บก็คือ @NectarNinjar: ค่านี้เปลี่ยนแปลงไม่ได้ เพราะเป็นการส่งคำสั่งไปให้ Nectar Ninja ช่วยสร้าง popup ให้เรา UI ask บริการใหม่่… : เป็นข้อความใดๆ ก็ได้ที่เราต้องการแจ้งให้ยูสเซอร์ทราบ goo.gl/tPvxm3: เป็นลิงค์ย่อที่เมื่อยูสเซอร์กดที่ปุ่ม Read More บน popup จะวิ่งไปที่หน้านี้ #notification: เป็น popup ประเภทชนิดให้ข้อมูล เราสามารถใส่ค่าอื่นได้เช่น #alert (สร้าง popup แจ้งเตือน), #question (สร้าง popup แบบร้องขอหรือเสนอแนะข้อมูล), #hide (ซ่อน popup) ผลลัพธ์เมื่อเรากด tweet จะเป็นไปตามภาพด้านล่างนี้เลยครับ หน้าตาของ popup ประเภทต่างๆ หน้าตาของ popup ประเภทต่างๆ เมื่อเอาเมาส์ไปวาง สิ่งที่ต่างกันของ popup ประเภทต่างๆ ก็คือสีวงกลมตรงกระดิ่ง แล้วก็ถ้าเป็น popup แบบ question ก็จะมีช่องให้ยูสเซอร์กรอกข้อมูลซักถามหรือสิ่งเสนอแนะเมื่อเอาเมาส์ไปวางบน popup สุดท้ายหากเราอยากซ่อน popup ก็ไม่ยากเลยครับ แค่พิมพ์ @NectarNinja #hide เท่านี้ก็เรียบร้อยครับ มากกว่านี้… ก็ลองใช้งานดูนะครับ แล้วถ้าใครสนใจเพิ่มเติมก็เข้าไปที่เว็บ https://nectar.ninja/ แล้วศึกษาในเรื่องของการเปลี่ยนสี, ทำสไตล์, หรือจะพัฒนาต่อยอดก็สามารถทำได้เช่นกันครับ ขอให้สนุกกับการสร้าง popup แสนง่ายนี้นะครับ ^^
ซีรีย์ Photoshop ชุด GoPro ทิปที่ 6 – สร้าง Stroke 5 ชั้น ด้วย 1 เลเยอร์ By uiblogazinerJune 18, 20150