วิธีสร้างรูปแบบบล็อก WordPress เพื่อเพิ่มความเร็วในการสร้างเว็บไซต์

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

 add_action( 'init', function() { register_pattern( 'NAME', [ 'title' => __( 'TITLE' ), 'content' => 'PATTERN' ] ); } );

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตกลง? ดังนั้นคุณจะคลิกที่นี่ แล้วคลิกควบคุม a หรือคำสั่ง a บนคอมพิวเตอร์ของคุณเพื่อไฮไลต์ทั้งหมด และพวกเขากำลังปีใหม่ ใส่ไว้ในคลิปบอร์ดของคุณ ดังนั้นฉันจะควบคุม C ตอนนี้มันอยู่ในคลิปบอร์ดของฉัน ตอนนี้สิ่งที่ฉันจะทำคือ ฉันจะออกไปจากที่นี่ ที่จริงแล้ว ถ้าคุณต้องการออกจากมุมมองนี้ จะมี X ตัวเล็ก ๆ อยู่ตรงนี้ที่เขียนว่า exit code editor และตอนนี้มันจะแสดงให้ฉันเห็นแบบที่ปกติจะอยู่ตรงนี้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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