พื้นฐานของตัวสร้าง: การสำรวจรูปแบบบล็อก

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

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

พื้นฐาน

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

ปิดกั้น

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

ลวดลาย

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

บรรณาธิการ

ตัวแก้ไข คือส่วนต่อประสานกับผู้ใช้ที่เราใช้เพื่อสร้างหน้าและโพสต์นอกบล็อก นับตั้งแต่เปิดตัวใน WordPress 5.0 จนถึงปี 2018 ตัวแก้ไขก็ถูกเรียกชื่อหลายชื่อ ซึ่งรวมถึง Gutenberg, Gutenberg Editor, Block Editor และอื่นๆ สำหรับวัตถุประสงค์ของบทความนี้ เราจะใช้คำว่า "บรรณาธิการ" เพียงอย่างเดียว

ตัวแทรก

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

ภาพหน้าจอด้านล่างแสดงข้อกำหนดที่เรากำหนด

ทำไมต้องบล็อกรูปแบบ?

Editor ช่วยให้เราสามารถสร้างการออกแบบจากบล็อกต่างๆ ไม่ว่าจะเป็นบล็อกโพสต์ธรรมดาหรือหน้า Landing Page ที่ซับซ้อน ลองใช้บทความนี้เป็นตัวอย่าง สิ่งที่คุณกำลังอ่านอยู่ในขณะนี้คือบล็อกย่อหน้า ส่วนหัวด้านบนเป็นบล็อกส่วนหัวและภาพหน้าจอเป็นเพียงบล็อกรูปภาพ การเพิ่มองค์ประกอบเนื้อหาเหล่านี้ในหน้านั้นทำได้ง่าย ฉันเปิด Inserter พบบล็อกที่เหมาะสมและคลิกเพื่อแทรก

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

แล้วมีอะไรซับซ้อนกว่านั้นอีกเล็กน้อย? พิจารณาตารางราคาต่อไปนี้ ซึ่งเป็นการออกแบบที่ใช้กันทั่วไปเพื่อแสดงผลิตภัณฑ์หรือบริการบนเว็บไซต์

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

อันที่จริง ตารางราคานี้ประกอบด้วยบล็อกละ 25 บล็อก โดยไม่คำนึงถึงระดับทักษะของคุณกับ WordPress การจำลองเค้าโครงนี้ตั้งแต่ต้นอาจเป็นเรื่องที่น่าเบื่อและท้าทายเล็กน้อย

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

นี่คือที่มาของรูปแบบบล็อก ตารางราคาด้านบนนี้จริง ๆ แล้วเป็นรูปแบบที่รวมอยู่ในธีม Twenty Twenty-Two ที่กำลังจะมีขึ้น ซึ่งจะวางจำหน่ายพร้อมกับ WordPress 5.9!

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

วิธีใช้รูปแบบ

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

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

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

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

ภาพหน้าจอด้านบนเป็นการทำซ้ำครั้งแรกของ Pattern Explorer การเปิดตัว WordPress ในอนาคตคาดว่าจะขยายฟังก์ชันการทำงานของ Explorer การทดลองปัจจุบันเพิ่มการแสดงตัวอย่างอุปกรณ์เคลื่อนที่/แท็บเล็ต และตัวเลือกสำหรับรูปแบบการสาธิตทีละรายการ ตรงข้ามกับรูปแบบกริด แม้ว่าจะไม่ได้รับการยืนยัน แต่ให้คอยดูการปรับปรุงเพิ่มเติมใน WordPress 6.0 ในช่วงกลางปี ​​2022

จากการอภิปรายเกี่ยวกับรูปแบบทั้งหมดนี้ คุณอาจสงสัยว่าจริง ๆ แล้วรูปแบบเหล่านี้มาจากไหน?

หาได้ที่ไหน

รูปแบบที่จะลงทะเบียนด้วยวิธีใดวิธีหนึ่งจากสามวิธี ไม่ว่าจะผ่านทางธีมปัจจุบันของคุณ ปลั๊กอินของบุคคลที่สาม หรือ WordPress เองผ่านทางไดเรกทอรีรูปแบบ มาสำรวจแต่ละวิธีกัน

ธีม

ธีมของคุณน่าจะเป็นวิธีที่ตรงที่สุดที่จะทำให้รูปแบบพร้อมใช้งานบนเว็บไซต์ของคุณ ตามที่เราเห็นในตารางราคาข้างต้น ธีมแบบบล็อกจำนวนมากรวมถึงคอลเล็กชันรูปแบบตามสั่ง นี่เป็นเพียงอีกวิธีหนึ่งสำหรับธีมในการสร้างความแตกต่าง และชุดตัวเลือกเลย์เอาต์ที่มีประสิทธิภาพจะเป็นประโยชน์อย่างมากต่อผู้ใช้ ในขณะที่เขียน ธีม Twenty Twenty-Two จะจัดส่งมากกว่า 60 รายการ!

ไดเรกทอรีรูปแบบ (WordPress)

เริ่มต้นด้วยการเปิดตัว WordPress 5.9 WordPress จะให้รูปแบบของตัวเองผ่านทางไดเร็กทอรีรูปแบบ

ไดเรกทอรีรูปแบบเป็นพื้นที่เก็บข้อมูลรูปแบบที่ขับเคลื่อนโดยชุมชน เช่นเดียวกับปลั๊กอิน WordPress และที่เก็บธีม และจะเปิดให้ส่งแบบสาธารณะในรุ่น 5.9 รูปแบบที่ส่งและได้รับการอนุมัติทั้งหมดจะพร้อมให้คุณเรียกดูและแทรกได้โดยตรงจาก Pattern Explorer ซึ่งหมายความว่าผู้ใช้ WordPress จะสามารถเข้าถึงรูปแบบบล็อกได้หลายร้อยรูปแบบ

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

ปลั๊กอินของบุคคลที่สาม

ในที่สุดเราก็มีปลั๊กอิน เนื่องจากรูปแบบมีมานานหลายปี ปลั๊กอินของบุคคลที่สามจำนวนมาก เช่น Genesis Blocks และ Redux ได้สร้างไลบรารีรูปแบบที่กว้างขวาง บ่อยครั้งที่ไลบรารีเหล่านี้ไม่ได้รวมเข้ากับคุณลักษณะต่างๆ เช่น Pattern Explorer โดยตรง และคุณลักษณะบล็อกที่กำหนดเองซึ่งไม่พบใน WordPress core พวกเขายังมีแนวโน้มที่จะใช้วิธีการแทรกรูปแบบของตัวเอง แต่เมื่อเวลาผ่านไป ฉันคาดว่าหลายคนจะเริ่มปฏิบัติตามแนวทางมาตรฐานใหม่ของ WordPress

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

อนาคตของรูปแบบ

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

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

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

รูปแบบคืออนาคตของ WordPress และอนาคตก็สดใส

ห่อ

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

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