แนะนำ Editor ตัวใหม่ในการเขียนบทความที่มีชื่อว่า “Gutenberg”


สวัสดีครับ วันนี้ผู้เขียนจะมาแนะนำ Editor ตัวใหม่ในการเขียนบทความที่มาพร้อมกับ WordPress 5.0 เจ้าตัว Editor ตัวใหม่นี้มีชื่อว่า “Gutenberg” เท้าความกันก่อนครับ แต่เดิมพวกเราเขียนบทความลงบนบล็อก KM นี้เราจะใช้ตัว Editor ที่ชื่อว่า TinyMCE ซึ่งใช้งานง่ายมากเพราะมันมีเครื่องมือคล้ายๆ MS Word ที่เราใช้พิมพ์งานกัน แต่ ณ ตอนนี้ เป็นต้นไปภาพจำเหล่านั้นต้องถูกลบออกไป เนื่องจาก WordPress 5.0 ตัดเจ้า TinyMCE ออกไป และใส่เจ้า Gutenberg เข้ามาแทนครับ

Tiny MCE

มีเสียงบ่นจากผู้ใช้ทั่วโลกว่าใช้งานยากไม่คุ้นเคย อยากกลับไปใช้เจ้า TinyMCE แต่เนื่องจากเว็บบล็อก KM ต้องอัพเดทเวอร์ชั่นตาม WordPress เป็นเวอชั่น 5.0 ทำให้พวกเราต้องเปลี่ยนมาใช้เจ้า Gutenberg ในการเขียนบทความกัน พวกเราจึงหนีไม่พ้นเจ้า Gutenberg เพราะฉะนั้นเรามาทำความรู้จักและลองใช้งานเจ้า Editor ตัวนี้เบื้องต้นกันครับ


Johannes Gensfleisch zur Laden zum Gutenberg

Gutenberg เป็นชื่อนักประดิษฐุ์ชาวเยอรมัน ชื่อเต็มคือ โยฮันเนิส เก็นส์ไฟลช์ ซัวร์ ลาเดิน ซุม กูเทินแบร์ค (Johannes Gensfleisch zur Laden zum Gutenberg) เป็นช่างเหล็ก ช่างทอง ช่างพิมพ์ และนักประดิษฐ์ชาวเยอรมัน มีชื่อเสียงจากการมีส่วนพัฒนาเทคโนโลยีการพิมพ์ในช่วงคริสต์ทศวรรษ 1450 (wiki) ทีมงาน WordPress ใช้ชื่อนี้เพื่อให้เกียรติท่านครับ

หน้าตาของ Gutenberg

Gutenberg ถูกออกแบบมาให้เป็น “Block editor” หมายถึงเวลาเราจะเขียนหรือใส่รูปในบทความของเรา เราต้องวาง Block ก่อน ซึ่ง Block ของ Gutenberg มีหลายชนิดแต่ที่เราใช้กันบ่อยๆก็พวก Block Title สำหรับหัวเรื่อง, Block Paragraph สำหรับพิมพ์ข้อความย่อหน้า, Block Image สำหรับรูปภาพเป็นต้น ในบทความนี้จะแนะนำ Block ที่เป็นพื้นฐานของการเขียนบทความเบื้องต้นครับ

สารบัญ

เริ่มต้นเขียนบล็อก

เริ่มแรกให้เข้าหลังบ้านเว็บบล็อก KM แล้วไปที่ url : http://km.li.mahidol.ac.th/wp-admin แล้ว Login ด้วย Username และ Password ที่มีครับ

เมื่อ Login สำเร็จแล้วจะเข้าสู่หน้าควบคุมเว็บหรือ Dashboard ครับ ให้เราไปที่แถบเมนูด้านซ้ายมือชื่อว่า Posts ถ้าเราเคยเขียนบทความอยู่แล้วสามารถเข้าไปดูและแก้ไขบทความของเราได้ที่เมนู All Posts แต่ถ้ายังไม่เคยเขียนบทความเลยก็คลิกปุ่ม Add New เพื่อเขียนบทความใหม่ได้เลยครับ ทำตามรูปด้านล่างนี้ครับ

การตั้งชื่อบทความ

เมื่อสร้างบทความใหม่ gutenberg จะสร้าง Block Title และ Block เปล่าๆ มาให้อัตโนมัติให้เราตั้งชื่อบทความใน Block title ได้เลยครับ การตั้งชื่อนี้จะส่งผลให้ URL ของบทความเป็นชื่อเดียวกันแต่เราสามารถแก้ไขได้ภายหลังครับ เดี๋ยวไว้ตอนท้ายๆจะพูดถึงเรื่อง URL บทความอีกครั้งหนึ่งครับ

การใส่หัวข้อ

ในการพิมพ์หัวข้อ เราต้องเพิ่ม Block Heading ลงไปในบทความของเราก่อน โดยคลิกที่เครื่องหมายบวก + ด้านบนจากนั้นก็สามารถพิมพ์หัวข้อที่ต้องการลงไปได้ และสามารถเลือกขนาดของหัวข้อได้ว่าจะกำหนดขนาดเท่าใดมีให้เลือกตั้งแต่ H1 H2 H3 H4 สามารถใส่ตัวหนา, ตัวเอียงหรือใส่ลิงค์เชื่อมโยงเว็บไซต์ให้กับหัวข้อของเราได้ ดูตัวอย่างด้านล่างครับ

เราสามารถจัดตำแหน่งของหัวข้อได้ จะให้ชิดซ้าย ชิดขวา กึ่งกลางก็สามารถทำได้ ด้วยแถบเครื่องมือ Text Alignment คล้ายกับปุ่มเครื่องมือใน MS Word ทุกท่านน่าจะคุ้นเคยเป็นอย่างดี

การพิมพ์ย่อหน้า

การพิมพ์ย่อหน้าใน Gutenberg เราจะใช้ Block Paragraph ในการพิมพ์ข้อความลงไปทีละย่อหน้า ย่อหน้านึงก็ใช้ Block Paragraph นึงต่อกันไปเรื่อยๆ จนจบ ไม่แนะนำให้ปาดข้อความทีละหลายๆย่อหน้าจาก MS Word หรือเว็บไซต์ต่างๆ นำมาวางนะครับ เพราะบางครั้งบทความที่เราไป copy มาอาจจะมีข้อความที่เป็นรูปแบบรายการหรือ list ติดมาด้วยจะทำให้เกิด Block เพิ่มขึ้นมากมาย ต้องมานั่งลบทีละ block แล้วจะทำให้ไม่เป็นระเบียบด้วยนะครับ แนะนำให้ค่อยๆเพิ่มทีละ Block และ Copy มาทีละย่อหน้าจะดีกว่าครับ ดูตัวอย่างการพิมพ์ข้อความแต่ละย่อหน้าได้ที่รูปด้านล่าง (* ในกรณี copy ข้อความจากเว็บไซต์มาควรนำไปวางใส่ในโปรแกรม Notepad ก่อนค่อยนำมาวางใน Block เพื่อให้ได้เฉพาะข้อความอย่างเดียวไม่ติด tags HTML มาด้วย)

เราสามารถปรับขนาดของตัวอักษรได้ที่แถบเมนูด้านขวามือโดยเลือกได้หลายขนาดดังนี้ Small, Normal, Medium, Large และ Huge หรือจะปรับขนาดเป็นตัวเลขก็ได้ครับ ใน Block Paragraph ก็จะมีปุ่มจัดตำแหน่งข้อความชิดช้าย ชิดขวากึ่งกลางมาให้ และสามารถปรับตัวหนาตัวเอียงใส่ลิงค์ได้เช่นกันครับ ดูตัวอย่างที่รูปด้านล่างครับ

การใส่สีข้อความและพื้นหลังข้อความ

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

แนะนำเครื่องมือจัดการ Block

ในแต่ละ Block จะมีปุ่มเครื่องมือที่ใช้ในการจัดการ Block อยู่รอบๆ Block ซึ่งเราสามารถใช้ปุ่มเครื่องมือเหล่านี้ในการจัดการ Block ของเราได้ครับ ปุ่มเครื่องมือมีดังนี้ครับ

1.ปุ่มสลับชนิดของ Block ใช้ในการเปลี่ยนประเภทของ Block เช่นเปลี่ยนจาก Block Paragraph เป็น Block Heading เป็นต้น

2.กลุ่มเครื่องมือจัดการข้อความชิดซ้าย, จัดกึ่งกลางและชิดขวา

3.กลุ่มเครื่องมือจัดการตัวอักษรประกอบด้วยปุ่มใส่ตัวหนา ตัวเอียง ใส่ลิงค์เชื่อมโยงเว็บไซต์
และปุ่มขีดฆ่าตัวอักษร

4.ปุ่ม More options จะซ่อนเมนูสำหรับจัดการ Block ไว้ข้างในอีก 7 รายการดังรูปด้านล่างนี้ครับ

  • Hide Block Settings ใช้สำหรับซ่อนแถบตั้งค่า

Hide Block Settings
  • Duplicate ทำเสาเนา Block ที่เลือก

Duplicate
  • Insert Before แทรก Block ใหม่ก่อนหน้า Block ที่เลือก

Insert Before
  • Insert After ทำงานคล้ายกับ Insert Before แต่จะแทรก Block ใหม่หลัง Block ที่เลือก
  • Edit as HTML ใช้แก้ไข Html ให้ Block ที่เลือก
  • Add to Reusable Blocks เพิ่ม Block ที่เลือกเพื่อนำไปใช้ซ้ำ
  • Remove Block ลบ Block ที่เลือก
Remove Block

5.เครื่องมือย้าย Block ใช้สำหรับเลื่อนตำแหน่งของ Block ขึ้นลง หรือย้ายไปที่ตำแหน่งอื่นได้อย่างอิสระ


ย้าย Block

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

7. แถบเครื่องมือแก้ไขย้อนกลับ Undo และ Redo ใช้เมื่อเราบังเอิญไปเผลอลบหรือแก้ไข Block ของเราผิดพลาด เราสามารถใช้ Undo และ Redo ย้อนกลับไปให้เหมือนเดิมได้ครับ ปล .เราจะใช้คีย์ลัดบนคีย์บอร์ดของเราก็ได้ครับคือ กด Ctrl+Z สำหรับการ Undo หรือ Ctrl+Shift+Z สำหรับ Redo ครับ

Undo

การพิมพ์ข้อความแบบรายการ List

การพิมพ์ข้อความแบบรายการสามารถพิมพ์ได้สองลักษณะคือแบบมี Bullet และแบบเป็นตัวเลข

การใส่ลิงค์เชื่อมโยงเว็บไซต์

การใส่ลิงค์ให้กับข้อความสามารถทำได้ง่ายๆ โดยการคลิกที่ปุ่มลิงค์และวาง URL ของเว็บไซต์ปลายทางได้เลย

การใส่ลิงค์เชื่อมโยงไฟล์เอกสารประเภท PDF หรือ MS Word

ก่อนอื่นเราต้องอัพโหลดไฟล์เอกสารที่ต้องการเข้าไปบนเว็บไซต์ของเราก่อน ให้เราไปที่แถบเมนูด้านซ้ายชื่อว่า Media > Add New >Select Files อัพโหลดเสร็จแล้วให้ copy URL ของไฟล์เอกสารมาใส่เป็นลิงค์ให้กับข้อความ ดูตัวอย่างได้ที่รูปด้านล่างนี้

การสร้างตาราง

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

เมื่อสร้างตารางเรียบร้อยแล้วสามารถแก้ไขตารางได้โดยไปที่ปุ่ม Edit Table ด้านบนจะมีเมนูคำสั่งสำหรับจัดการตารางแสดงไว้อยู่ดังนี้

-Add Row Before ใช้สำหรับเพิ่มแถวก่อนแถวที่เลือก
-Add Row After ใช้สำหรับเพิ่มแถวหลังแถวที่เลือก
-Delete Row ลบแถวที่เลือก
-Add Column Before ใช้สำหรับเพิ่มคอลั่มก่อนคอลั่มที่เลือก
-Add Column After ใช้สำหรับเพิ่มคอลั่มหลังคอลั่มที่เลือก
-Delete Column ลบคอลั่มที่เลือก

การใส่รูปภาพในบทความ

การใส่รูปเข้าไปในบทความของเราทำได้ง่ายๆ 2 วิธี วิธีแรกคือเพิ่ม Block Image ลงไปในบทความและอัพโหลดรูปภาพที่เราต้องการ ดูตัวอย่างที่รูปด้านล่างครับ

วิธีที่ 2 ในการใส่รูปสามารถเปิดโฟลเดอร์ที่อยู่ของรูปภาพที่ต้องการแล้วลากรูปมาใส่ในบทความได้เลย

การปรับขนาดรูปภาพ

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

การจัดตำแหน่งรูปภาพ

เราสามารถจัดตำแหน่งของรูปภาพได้ด้วยปุ่มจัดชิดซ้าย ชิดขวาและกึ่งกลางคล้ายกับการจัดตำแหน่งข้อความ แต่ถ้าอยากให้มีข้อความอยู่ด้านข้างของรูปภาพด้วยก็สามารถทำได้โดยปรับตำแหน่งรูปภาพโดยใช้ปุ่มชิดซ้ายหรือชิดขวา แล้วไปที่แถบเมนูปรับแต่งแล้วเลือก Image Size ให้เป็นรูปแบบ Thumbnail หรือ Medium เพียงเท่านี้รูปภาพก็จะมีข้อความอยู่ด้านข้างแล้ว ดูตัวอย่างได้ที่รูปด้านล่าง

การใส่คำบรรยายใต้ภาพและรายละเอียดรูปภาพ

เราสามารถใส่คำบรรยายใต้ภาพได้โดยพิมพ์ข้อความลงไปที่ช่อง Write Caption… .ใต้ภาพ และใส่รายละเอียดของรูปภาพได้ที่แถบเมนูปรับแต่งด้านขวาที่ช่อง Alt Text โดยการใส่รายละเอียดที่ช่อง Alt Text นี้จะมีผลต่อการทำ SEO แต่จะไม่มีใครเห็น

การสร้างอัลบั้มรูปภาพ

Gutenberg สามารถสร้างอัลบั้มรูปได้ ถ้าเรามีรูปภาพหลายๆรูปสามารถใช้อัลบั้มเพื่อแสดงรูปภาพของเราในบทความ ขั้นตอนการสร้างอัลบั้มอันดับแรกต้องไปที่แถบเมนู Common blocks แล้วเพิ่ม Block Gallery เข้ามาในบทความ ต่อมาให้อัพโหลดรูปภาพหลายๆรูปตามที่ต้องการตัว Block Gallery จัดวางรูปภาพให้เราอย่างสวยงาม

การใส่วีดีโอจาก Youtube

การใส่วีดีโอของ Youtube ลงในบทความของเรา สามารถทำได้โดยเพิ่ม Block youtube เข้าไปในบทความ โดยไปที่เมนู Block Embeds เสร็จแล้วก็นำ URL ของวีดีโอที่เราต้องการมาวางเท่านี้ก็เสร็จเรียบร้อยแล้วครับ ในเมนู Embeds ยังมี Block สำหรับฝั่งโพสของสื่อโชเชียลต่างๆอีกหลายอย่าง เช่น Facebook Instagram เป็นต้น ลองเล่นดูกับ Block Embeds นะครับ

การเตรียมบทความเพื่อเผยแพร่

ก่อนที่เราจะเผยแพร่บทความของเราออกสู่สาธารณะเราต้องกำหนดค่าต่างๆให้กับบทความของเราก่อนโดยมีขั้นตอนดังต่อไปนี้

1. การกำหนด Permalink

การกำหนด Permalink หรือชื่อ URL ของบทความโดยปกติถ้าเราไม่กำหนด Permalink เองระบบจะใช้ชื่อบทความเป็น URL ของบทความเราให้อัติโนมัติ แต่ในการตั้งชื่อบทความภาษาไทยจะทำให้ URL เป็นภาษาไทยซึ่งเวลานำไปใช้บนโชเชียลมีเดียต่างๆ URL จะยาวมากและเป็นอักขระไม่สวยงาม ดังนั้นผู้เขียนแนะนำให้กำหนด Permalink หรือ URL เป็นภาษาอังกฤษเพื่อให้เวลานำไปใช้โพสลงโชเชียลต่างๆ URL จะสั้นกระชับสวยงาม วิธีการกำหนด Permalink ดูตามรูปด้านล่างนี้ได้เลยครับ

2. การกำหนดหมวดหมู่ (Categories)

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

3.การติด Tags

การติด Tags คือการใส่คีย์เวิร์ดให้กับบทความ ช่วยให้บทความมีโอกาสถูกสืบค้นจาก google ได้มากขึ้น วิธีการติดแท็กให้เราคิดคีย์เวิร์ดของบทความของเราว่าบทความของเราเกี่ยวกับคำค้นอะไรบ้าง เช่นในบทความนี้แท็กที่เกี่ยวกับบทความนี้คือ Gutenberg, WordPress, TinyMCE, Editor เป็นต้น ให้นำคีย์เวิร์ดเหล่านี้ไปใส่ในแถบเมนู Tags ด้านขวามือได้เลย

4.การกำหนดรูปหน้าปกของบทความ Featured Image

การกำหนดรูปหน้าปกของบทความ Featured Image เป็นการกำหนดรูปหน้าปกของบทความของเราที่จะแสดงบนหน้าแรกของเว็บ KM Blog สามารถใส่รูปภาพอะไรก็ได้ที่เกี่ยวข้องหรือสื่อถึงบทความของเรา วิธีการใส่รูปหน้าปกดูได้ตามรูปด้านล่างนี้ครับ

5.การใส่คำโปรยของบทความ

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

6.การปิด Discussion

การปิด Discussion บทความเนื่องจากการเปิดช่องทางให้ผู้อ่านมาแสดงความคิดเห็นได้จะทำให้มี spam ผ่านเข้ามาทางช่องทางนี้ผู้เขียนจึงอยากแนะนำให้ทำการปิดช่องทาง
Discussion จะดีกว่าวิธีปิดดูได้จากรูปด้านล่างนี้

7.กำหนดค่า Yoast SEO

กำหนดค่า Yoast SEO ที่ช่อง Title และ Desciption เพื่อความสวยงามเวลาโพสลงบนโชเชียลมีเดียต่างๆเช่น Facebook และ Line (ถ้าไม่กำหนดค่าระบบจะใช้ค่า Default)

การเผยแพร่บทความสู่สาธารณะ

เมื่อเราเขียนบทความเสร็จแล้วสามารถบันทึกฉบับร่างของเราไว้ก่อนได้ที่ปุ่ม Save Draft ด้านบนบทความจะถูกบันทึกไว้ในระบบแต่ยังไม่ได้เผยแพร่ออกสู่สาธารณะ ถ้าอยากดูตัวอย่างบทความก่อนเผยแพร่ก็สามารถดูได้โดยกดปุ่ม Preview สุดท้ายควรตรวจสอบคำผิดอีกรอบหนึ่งให้แน่ใจว่าบทความของท่านมีความถูกต้องครบถ้วน ถ้าต้องการเผยแพร่บทความกดที่ปุ่ม Publish ได้เลย

สุดท้ายนี้…

ผู้เขียนหวังว่าบทความนี้จะช่วยให้ผู้อ่านทุกท่านใช้เป็นแนวทางในการเริ่มต้นเขียนบทความใน Blog KM กันได้ไม่ยากนะครับ ยังมีเครื่องมืออีกหลายชนิดใน Gutenberg ที่ยังไม่ได้แนะนำให้ได้รู้จัก เอาไว้บทความหน้าผู้เขียนจะมาเขียนแนะนำอีกนะครับ ขอให้สนุกกับกับเขียนบทความครับผมสวัสดี…


Mahidol University Library and Knowledge Center @ 2019