การจัดการและการสร้างรูปแบบที่ทันสมัย

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

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

ลำโพง:

• Michael Day วิศวกรปฏิกิริยาที่ WP Engine
• Phil Johnston วิศวกรซอฟต์แวร์อาวุโสของ WP Engine

สไลด์เซสชัน:

ถอดเสียง:

ฟิล จอห์นสตัน: สวัสดี ฉันชื่อฟิล จอห์นสตัน เป็นวิศวกรซอฟต์แวร์อาวุโสของ WP Engine และตัวฉันและเพื่อนร่วมทีมของฉัน Mike Day กำลังจะพูดคุยเกี่ยวกับการจัดการรูปแบบที่ทันสมัยและการสร้างใน WordPress

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

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

ดังนั้นฉันจึงสามารถยืมตัวต่อ LEGO จากลูก ๆ ของฉันสำหรับการพูดคุยนี้ได้ เพื่อช่วยอธิบายสิ่งนี้ เมื่อคุณดูที่หน้านี้ซึ่งมีข้อความว่า I am a heading block คุณสามารถคิดได้ว่ามันเป็นบล็อก LEGO จากนั้นข้างใต้ส่วนที่เขียนว่า I'm a paragraph block คุณสามารถคิดได้ว่ามันเป็นบล็อกอีกอันที่คุณตัดลงมาข้างใต้นั้น ต่อไปเรื่อยๆ

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

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

บล็อก WordPress ก็เหมือนกับเลโก้ คุณสามารถรวมเข้าด้วยกันเพื่อสร้างเลย์เอาต์ที่เรียบง่ายเหมือนอันแรกที่ฉันแสดงหรือเลย์เอาต์ที่ซับซ้อนกว่าเช่นที่คุณกำลังดูอยู่ ดังนั้นฉันจึงเน้นบล็อกที่คุณอาจคาดว่าจะเห็นในหน้าเช่นนี้ด้วยสีแดง คุณจะเห็นว่าอันแรกมีกล่องสีแดงล้อมรอบ [ล้างคอ] ขอโทษนะ และนั่นหมายถึงบล็อก และข้างใต้นั้น คุณมีอีกบล็อกหนึ่งที่มีข้อความ Lorem ipsum อยู่ในนั้น แล้วก็บล็อกรูปภาพสามบล็อกอย่างที่ฉันพูดถึง บล็อกหัวเรื่องสามบล็อก บล็อกย่อหน้าสามบล็อกข้างใต้ และบล็อกปุ่มสามบล็อก

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

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

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

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

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

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

ที่ WP Engine เราจึงสร้างปลั๊กอินชื่อ Atomic Blocks และในบล็อกปรมาณูนั้น เราคิดแนวคิดของรูปแบบโดยพื้นฐานแล้ว แต่เราเรียกมันว่าส่วนและเค้าโครง และเป็นแนวคิดเดียวกันทุกประการ และ WordPress Core ได้รับแรงบันดาลใจจาก Atomic Blocks สำหรับแนวคิดของสิ่งที่อยู่ใน WordPress Core และเรียกว่ารูปแบบ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ไมค์ เดย์: สวัสดี ฉันชื่อไมค์ ฉันเป็นวิศวกรซอฟต์แวร์ที่ WP Engine รูปแบบเป็นเครื่องมือสร้างเลย์เอาต์ที่มีประสิทธิภาพซึ่งมีศักยภาพในการเปลี่ยนแปลงเกมสำหรับผู้สร้าง WordPress แต่อย่างที่ฟิลเพิ่งแสดงให้เห็น ประสบการณ์ในการใช้รูปแบบเหล่านี้จริง ๆ ในแง่ของการสร้างและจัดการมัน ก็ยังขาดสิ่งที่จะพูดน้อยที่สุด Pattern Manager มีจุดมุ่งหมายเพื่อนำการจัดการไฟล์รูปแบบไปสู่ระดับแนวหน้าของการออกแบบ WordPress ด้วยวิธีที่ราบรื่นผ่านปลั๊กอินที่สามารถเลื่อนเข้าสู่เวิร์กโฟลว์ของคุณได้ กระโดดเข้าไปกันเถอะ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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