วิธีใช้ตัวแก้ไขบล็อก WordPress

ในโพสต์นี้ ฉันจะสอนวิธีใช้ตัวแก้ไขบล็อกของ WordPress ซึ่งรวมอยู่ในการอัปเดต WordPress ตั้งแต่ปี 2018 และอยู่ที่นี่ต่อไป คุณจะได้ยินมันเรียกว่าตัวแก้ไข Gutenberg

นับตั้งแต่เปิดตัว WordPress 5.0 มีตัวเลือกในโปรแกรมแก้ไขข้อความของ WordPress ให้ "แปลงเป็นบล็อก" โดยคลิกจุดแนวตั้งสามจุดดังด้านล่าง

คุณควรแปลงเป็นบล็อกหรือไม่?

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

สำหรับคนอื่น – ฉันไม่รับผิดชอบ – สำรองข้อมูลเว็บไซต์/บล็อกเสมอ ก่อนที่จะแปลงหน้าเป็นบล็อก

แปลงแล้ว? ข้ามส่วนนี้

สำหรับผู้ที่เคยใช้ตัวแก้ไขแบบคลาสสิกและมีรูปแบบหน้าที่เรียบง่าย ฉันสามารถแนะนำบล็อก WordPress ได้

เมื่อคุณคุ้นเคยกับตัวแก้ไขบล็อกของ WordPress แล้ว ก็ใช้งานได้ง่าย

การกดปุ่ม CONVERT TO BLOCKS จะไม่แปลงทั้งเว็บไซต์/บล็อกเป็นบล็อก เพียงเพจหรือโพสต์ที่คุณกำลังทำงานอยู่

จะเกิดอะไรขึ้นเมื่อฉันแปลงเป็นบล็อก

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

ในไม่ช้าคุณจะชินกับมัน หากคุณเพียงแค่แปลง

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

เช่นเดียวกับวิดเจ็ต เช่น โพสต์ล่าสุด ปฏิทิน คลังโพสต์ หมวดหมู่ ไอคอนโซเชียล และฟีด RSS

บล็อก WordPress ทำให้ง่ายต่อการเพิ่มเกือบทุกอย่างที่เจ้าของเว็บไซต์ต้องการ มันสะดวกจริงๆ

หนึ่งบล็อกแสดงถึงหนึ่งรายการ ดังนั้นจึงง่ายกว่ามากในการเปลี่ยนลำดับหน้า เราจะกล่าวถึงในภายหลัง

ดูเว็บไซต์ WordPress ในแท็บใหม่

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

วิธีที่ง่ายที่สุดในการเปิดส่วนหน้าของเว็บไซต์ WordPress ของคุณในแท็บใหม่คือ

• ในพื้นที่ผู้ดูแลระบบ – วางเมาส์เหนือไอคอนบ้าน ด้านบนซ้ายของหน้าจอ
• จากเมนูแบบเลื่อนลง ให้ คลิกขวา ที่ 'เยี่ยมชมเว็บไซต์'
• คลิก "เปิดลิงก์ในแท็บใหม่"

หมายเหตุ อาจมีคำหลากหลายขึ้นอยู่กับเบราว์เซอร์ที่คุณใช้

ขณะนี้แท็บเบราว์เซอร์สองแท็บเปิดขึ้น หมายความว่าคุณสามารถสลับไปมาระหว่างแท็บทั้งสองได้

ดำเนินการต่อเพื่อแก้ไขหน้า WordPress ในแท็บเดียวโดยใช้พื้นที่ผู้ดูแลระบบ

ในอีกทางหนึ่ง คุณจะเห็นส่วนหน้าของเว็บไซต์ของคุณ นี่คือวิธีการตรวจสอบการเปลี่ยนแปลงแต่ละครั้งที่คุณทำ

เมื่อคุณทำการแก้ไขและบันทึก คุณสามารถแท็บไปที่ส่วนหน้าของไซต์ได้ กดปุ่ม F5 เพื่อรีเฟรชหน้า - เบราว์เซอร์จะแสดงเวอร์ชันที่อัปเดต

ส่วนหัว WordPress h1 และลิงก์ถาวร

มาดูชื่อเรื่องและลิงก์ถาวรกันก่อน

ส่วนหัว h1 เป็นบล็อกแรกที่ด้านบนของหน้า นี่เป็นบล็อกเดียวที่ไม่สามารถเคลื่อนย้ายได้และนั่นเป็นเหตุผลที่ดี

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

ใช้เมาส์คลิกภายในบล็อคชื่อ หากต้องการเปลี่ยนชื่อ ให้เน้นข้อความชื่อและเริ่มพิมพ์ เรียบง่าย.

ฟิลด์ลิงก์ถาวรจะอยู่ในการตั้งค่าเอกสารทางด้านขวามือ ดูภาพด้านล่าง ป้ายกำกับของ WordPress สำหรับชื่อหน้าคือ 'URL Slug'

โปรดใช้ความระมัดระวังในการแก้ไขลิงก์ถาวร ฉันได้รวมคำเตือนไว้ที่ด้านล่างของโพสต์นี้แล้ว

เพิ่มบล็อก WordPress

กดไอคอน Plus + ด้านบนซ้ายเพื่อเริ่มต้น

สำรวจไลบรารีบล็อก – มีตัวเลือกมากมายที่นี่

มีสองวิธีในการเพิ่มบล็อกในหน้า WordPress

หากคุณอยู่ในกระแสความคิดสร้างสรรค์ ให้เพิ่มบล็อกโดยกดปุ่ม return

วิธีที่สามทำได้โดยวางเมาส์เหนือบล็อก – ไอคอน Plus + จะปรากฏขึ้น

ในขณะที่เขียนสิ่งนี้เป็นเรื่องเที่ยวยุ่งยิ่ง - วางเมาส์เหนือด้านล่างตรงกลางของบล็อกเพื่อให้ไอคอนปรากฏขึ้น

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

ย่อหน้า WordPress โดยใช้บล็อก

บล็อกย่อหน้ามักจะเป็นองค์ประกอบทั่วไปของหน้าหรือโพสต์ WordPress เพิ่มบล็อกย่อหน้าแล้วเริ่มพิมพ์

กดย้อนกลับเพื่อสร้างบล็อกย่อหน้าใหม่และพิมพ์ต่อ

เพื่อให้เวิร์กโฟลว์เร็วขึ้น บล็อกย่อหน้าสามารถเปลี่ยนเป็นสไตล์อื่นได้

ด้วยเคอร์เซอร์ในบล็อกย่อหน้าใหม่ให้พิมพ์ a / (เครื่องหมายทับ) ทางลัดนี้ไปยังรายการประเภทบล็อกที่เป็นไปได้

หรือเปลี่ยนรูปแบบบล็อกโดยใช้แถบเครื่องมือ บนบล็อกที่เลือก แถบเครื่องมือจะปรากฏขึ้น ด้านซ้ายบน

ในแถบเครื่องมือสำหรับย่อหน้ามีตัวเลือกในการเปลี่ยน 'ประเภทหรือรูปแบบบล็อก' หรือรูปแบบข้อความ:

แปลงบล็อกย่อหน้า WordPress

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

ลองเปลี่ยนย่อหน้าเป็นส่วนหัวเช่น

ลูกศรบนรูปภาพด้านล่างชี้ไปที่ไอคอนที่แสดงถึง PARAGRAPH นี่คือวิธีที่คุณรู้ว่าบล็อกนั้นเป็นย่อหน้า

คลิกที่ไอคอนเพื่อแปลงย่อหน้า

ตี HEADING

ไอคอนย่อหน้าจะเปลี่ยนเป็น H และคุณจะเห็น H2 อยู่ข้างๆ

ไม่สามารถเลือก H1 ได้ – ควรใช้ H1 สำหรับชื่อหน้าเท่านั้น

บล็อกนี้เป็นบล็อกส่วนหัว

เลือก H3 หรือ H4 โดยกดปุ่ม H2 เลือกจากเมนู

ใช้หัวเรื่องเป็นลำดับชั้นภายในเพจและโพสต์ ใช้ H2 เพื่อแบ่งหน้าออกเป็นส่วนๆ ที่อ่านง่าย ใช้ H3 เพื่อย่อยหารเหล่านั้น

จัดรูปแบบย่อหน้าและหัวเรื่อง

การจัดรูปแบบข้อความหมายถึงการเพิ่มลักษณะเฉพาะลงไป

บนหัวเรื่องหรือย่อหน้า ให้เน้นข้อความที่คุณต้องการจัดรูปแบบ

แถบเครื่องมือปรากฏขึ้นอย่างน่าอัศจรรย์ ด้านบนซ้ายของบล็อก ที่นี่คุณจะพบตัวเลือกในการทำให้ข้อความเป็น ตัวหนา ตัว เอียง หรือเพิ่มไฮเปอร์ลิงก์ข้อความ

คุณยังสามารถใช้แป้นพิมพ์ลัด – เน้นข้อความและใช้:

• Control-b สำหรับตัวหนา
• Control-i สำหรับตัวเอียง
• Control-u จะขีดเส้นใต้ข้อความ

ผู้ใช้ Mac – ใช้ปุ่มคำสั่งแทนปุ่มควบคุม

ไปที่แป้นพิมพ์ลัดของ WordPress เพื่อดูรายการที่มีประโยชน์

สังเกตว่ามี ลูกศรชี้ลง บนแถบเครื่องมือ เมนูแบบเลื่อนลงสำหรับ 'การควบคุมข้อความที่มีรูปแบบมากขึ้น' พบรูปแบบอื่นๆ อีกสองรูปแบบที่นี่ – ขีดทับ และ สีข้อความ

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

'รหัสอินไลน์' และ 'รูปภาพอินไลน์' จะพบได้ในเมนูนี้เช่นกัน

'อินไลน์' ใดๆ จะถูกจัดตำแหน่งภายในบรรทัดข้อความที่คุณกำลังพิมพ์ มีประโยชน์สำหรับข้อมูลโค้ดและไอคอน แต่ภาพที่ใหญ่กว่าจะดูแปลกในความคิดของฉัน

การตั้งค่าย่อหน้า

เลือกบล็อกย่อหน้าเพื่อดูตัวเลือกทางด้านขวามือของหน้าจอ WordPress

เปลี่ยนขนาดข้อความของคุณที่นี่

ดีมากถ้ามีสายรัดที่คุณต้องการโดดเด่น

นอกจากนี้ยังมีความสามารถในการเปลี่ยนสีของทั้งย่อหน้า ฉันจะเตือนไม่ให้คลั่งไคล้ตัวเลือกเหล่านี้มากเกินไป

ตัวเลือกการแปลงเพิ่มเติมสำหรับย่อหน้า

ตัวเลือกการแปลงอื่น ๆ สำหรับบล็อกย่อหน้าคือ:

• รายการ
• บล็อกที่จัดรูปแบบไว้ล่วงหน้า
• ใบเสนอราคา
• กลอน
• หรือกลุ่ม

รายการ

รายการต่างๆ เป็นป้ายกำกับของ WordPress สำหรับหัวข้อย่อย ซึ่งมีประโยชน์มากในการช่วยให้รายการต่างๆ โดดเด่นบนหน้าเว็บ รายการมีสองประเภทให้เลือก:

• รายการสั่งซื้อ (OL) – เรียงตามเลขโรมัน ทศนิยม หรือตัวอักษร
• รายการที่ไม่เรียงลำดับ (UL) – หัวข้อย่อยที่มีสไตล์

สามารถจัดรูปแบบรายการได้เช่นเดียวกับย่อหน้า นอกจากนี้ยังมีตัวเลือกในการเยื้องรายการ ดังนั้นจึงสามารถสร้างรายการย่อยภายในรายการได้

เราไม่เคยเห็นบล็อก 'จัดรูปแบบล่วงหน้า' หรือ 'กลอน' ใน WordPress มาก่อน ดังนั้นฉันจะอธิบายเล็กน้อยเกี่ยวกับประเภทบล็อกเหล่านั้น

บล็อกที่จัดรูปแบบไว้ล่วงหน้าใน WordPress

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

ฉันไม่ชัดเจนว่าสิ่งนี้ใช้สำหรับอะไรในขณะนี้ มีคนให้ความกระจ่างแก่ฉัน

ในบล็อกย่อหน้าที่ว่าง ให้พิมพ์ /preformated จากนั้นกด Enter เพื่อสร้างบล็อกที่จัดรูปแบบไว้ล่วงหน้า

หรือใช้แถบเครื่องมือตามที่อธิบายไว้ข้างต้น

กลอน

WordPress กล่าวว่าบล็อกกลอนเหมาะอย่างยิ่งสำหรับการเพิ่มบทกวีในเว็บไซต์ของคุณ ดังนั้นชื่อที่เหมาะเจาะ

ผู้ใช้ขั้นสูงสามารถเพิ่ม CSS ลงในบล็อกกลอน เพื่อให้การจัดรูปแบบบล็อกกลอนเป็นเรื่องง่าย

 กุหลาบเป็น สีแดง , 
ไวโอเล็ตเป็นสีน้ำเงิน

ปุ่มในตัวแก้ไขบล็อก WordPress

ตัวแก้ไขบล็อก WordPress อนุญาตให้ตัวแก้ไขสร้างปุ่มตามความต้องการ

พวกมันเป็นปุ่มธรรมดาที่มีสไตล์จำกัด ไม่มีอะไรพิเศษเกี่ยวกับพวกมัน ในความเห็นของฉัน WordPress ได้ตัดสินใจถูกต้องแล้ว – รักษาความสะอาดเป็นตัวเลือกที่ดีกว่า

ในการเพิ่มปุ่ม ให้ใช้ไอคอน 'เพิ่มบล็อก' และเลือก 'ปุ่ม'

เริ่มพิมพ์ข้อความปุ่มทันที

ตอนนี้ 'การบล็อกปุ่ม' มีสองส่วน ซึ่งอาจทำให้สับสนได้

มีปุ่มอยู่ภายในบล็อกภายนอก คลิกที่ปุ่ม จากนั้นคลิกด้านนอกปุ่ม ในพื้นที่สีขาวเพื่อดูว่าฉันหมายถึงอะไร

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

คลิกที่ปุ่มและสามารถจัดรูปแบบได้ - สี, ข้อความ, เส้นขอบ นี่คือที่ที่คุณจะลิงก์ปุ่ม

มีเหตุผล?

เลือกปุ่ม – มีตัวเลือกสไตล์เพิ่มเติมที่ด้านขวามือของ WordPress

คุณสามารถเพิ่มสไตล์ให้กับข้อความของปุ่มได้เช่นเดียวกับย่อหน้า โปรดใช้ความระมัดระวังในการเชื่อมโยงข้อความ

ฉันพบว่า WordPress ให้ความสามารถในการเชื่อมโยงข้อความของปุ่ม (ผ่านแถบเครื่องมือของปุ่ม เช่นเดียวกับย่อหน้า) หรือเชื่อมโยงปุ่มทั้งหมดผ่านตัวเลือกทางด้านขวา สับสนเล็กน้อย

ตัวเลือกที่ดีที่สุดคือการเชื่อมโยงทั้งปุ่ม

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

ฉันไม่แนะนำให้เปิดใช้งานตัวเลือก 'เปิดแท็บใหม่' เนื่องจากเครื่องมือค้นหาต้องการให้ผู้ใช้ตัดสินใจเปิดแท็บใหม่

ในปุ่มตัวอย่างด้านบน ฉันได้เพิ่มไอคอน Font Awesome โดยคัดลอกโค้ด HTML จาก Font Awesome:

 <i class="fas fa-arrow-right"></i>

หากต้องการรวมไว้ในปุ่มของคุณ ให้เลือกปุ่ม กดปุ่ม 3 จุดในแนวตั้งที่ส่วนท้ายของแถบเครื่องมือ แล้วเลือก 'แก้ไขเป็น HTML' วางโค้ด HTML ก่อนแท็กปิด </a>

ไอคอนนี้จะใช้ได้เฉพาะเมื่อมีการติดตั้ง Font Awesome ไว้

กลุ่มของบล็อก

บล็อกกลุ่มช่วยให้เอดิเตอร์เพิ่มบล็อกภายในได้มากกว่าหนึ่งบล็อก เพื่อให้สามารถย้ายกลุ่ม ทำซ้ำ หรือนำกลับมาใช้ใหม่ทั้งหมดได้

มีประโยชน์สำหรับการจัดวาง หรือเพื่อให้หัวเรื่องและย่อหน้ารวมกันเพื่อไม่ให้หน้าสับสน

อย่างไรก็ตาม ฉันพบว่า GROUPS นั้นน่าหงุดหงิดเล็กน้อย เนื่องจากดูเหมือนว่าจะหายไป! ฉันเชื่อว่านี่เป็นข้อผิดพลาดใน WordPress

บล็อก WordPress ซ้ำ

หรือเมื่อคุณอยู่ในบล็อก ให้ใช้ทางลัด CONTROL-SHIFT-D (COMMAND-SHIFT-D บน Mac)

ใช้บล็อก WordPress ซ้ำ

คุณสมบัติที่ยอดเยี่ยมอีกประการหนึ่งเกี่ยวกับบล็อกของ WordPress คือตัวเลือก REUSABLE BLOCK

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

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

พบบล็อกที่ใช้ซ้ำได้ที่บันทึกไว้ในไลบรารีบล็อกใต้แท็บ 'ใช้ซ้ำได้' เพียงค้นหาและเพิ่มมันเหมือนบล็อกอื่นๆ มีประโยชน์

สามารถจัดการบล็อกที่นำกลับมาใช้ใหม่ได้ ดังนั้นคุณจึงไม่มีบล็อกส่วนเกินในคอลเลกชันมากเกินไป

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

ที่ส่วนท้ายของแถบนั้น คุณจะพบจุดแนวตั้ง 3 จุด คลิกจุดเหล่านั้นเพื่อดูรายการ ที่ด้านล่างคือตัวเลือก "จัดการบล็อกที่นำกลับมาใช้ใหม่ได้ทั้งหมด"

จัดการบล็อกที่นำกลับมาใช้ใหม่ได้ในลักษณะเดียวกับโพสต์ – คลิกที่ชื่อเพื่อแก้ไข

การแก้ไขบล็อกที่ใช้ซ้ำได้จะไม่เปลี่ยนสไตล์ของบล็อกที่มีอยู่แล้วบนไซต์

วิธีลากบล็อก WordPress

เนื่องจากการอัปเดตเป็น WordPress 5.5 ตัวเลือกการลากจึงไม่ชัดเจน

คุณต้องเลือกบล็อก จากนั้นคลิกลูกศรขึ้น-ลงค้างไว้

เมื่อคุณลากบล็อก พื้นที่จะถูกเน้นเป็นสีน้ำเงินเพื่อระบุว่าบล็อกจะถูกทิ้งที่ใดเมื่อปล่อยเมาส์

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

• วิธีเพิ่มรูปภาพใน WordPress
• เชื่อมโยงรูปภาพใน WordPress
• หัวเรื่องและย่อหน้าใน WordPress
• ไฮเปอร์ลิงก์ใน WordPress
• การจัดรูปแบบใน WordPress
• วิธีเพิ่ม PDF ไปยัง WordPress (และเชื่อมโยงไปยังมัน)

มากมายให้ไปด้วย! แจ้งให้เราทราบว่าคุณไปอย่างไร