วิธีสร้างบล็อก WordPress แบบกำหนดเอง (วิธีที่ง่าย)

คุณต้องการสร้างบล็อก Gutenberg แบบกำหนดเองสำหรับเว็บไซต์ WordPress ของคุณหรือไม่?

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

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

ทำไมต้องสร้างบล็อก WordPress ที่กำหนดเอง?

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

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

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

ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างบล็อกที่กำหนดเองโดยสมบูรณ์

หมายเหตุ : บทความนี้สำหรับผู้ใช้ระดับกลาง คุณจะต้องคุ้นเคยกับ HTML และ CSS เพื่อสร้างบล็อก Gutenberg แบบกำหนดเอง

ขั้นตอนที่ 1: เริ่มต้นกับบล็อกแรกที่คุณกำหนดเอง

ขั้นแรก คุณต้องติดตั้งและเปิดใช้งานปลั๊กอิน Genesis Custom Blocks สำหรับรายละเอียดเพิ่มเติม โปรดดูคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการติดตั้งปลั๊กอิน WordPress

สร้างโดยผู้ที่อยู่เบื้องหลัง Genesis Theme Framework และ StudioPress ที่ได้รับความนิยม ปลั๊กอินนี้มีเครื่องมือที่ง่ายสำหรับนักพัฒนาในการสร้างบล็อกที่กำหนดเองสำหรับโครงการของพวกเขาอย่างรวดเร็ว

เพื่อประโยชน์ของบทช่วยสอนนี้ เราจะสร้างบล็อก 'คำรับรอง'

ขั้นแรกตรงไปที่ Custom Blocks »เพิ่มหน้าใหม่ จากแถบด้านข้างด้านซ้ายของแผงการดูแลระบบของคุณ

ซึ่งจะนำคุณไปยังหน้าตัวแก้ไขบล็อก

จากที่นี่ คุณต้องตั้งชื่อให้กับบล็อกของคุณ

ที่ด้านขวาของหน้า คุณจะพบคุณสมบัติของบล็อก

ที่นี่คุณสามารถเลือกไอคอนสำหรับบล็อกของคุณ เพิ่มหมวดหมู่ และเพิ่มคำสำคัญ

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

ตอนนี้ มาเพิ่มฟิลด์บางฟิลด์ในบล็อกของเรา

คุณสามารถเพิ่มฟิลด์ประเภทต่างๆ เช่น ข้อความ ตัวเลข ที่อยู่อีเมล URL สี รูปภาพ กล่องกาเครื่องหมาย ปุ่มตัวเลือก และอื่นๆ อีกมากมาย

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

คลิกที่ปุ่ม [+] เพิ่มฟิลด์ เพื่อแทรกฟิลด์แรก

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

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

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

ตามขั้นตอนข้างต้น ให้เพิ่ม 2 ฟิลด์อื่นๆ สำหรับบล็อกคำรับรองของเราโดยคลิกที่ปุ่ม [+] เพิ่มฟิลด์

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

หากต้องการแก้ไขหรือลบฟิลด์ใดฟิลด์หนึ่ง คุณต้องคลิกป้ายกำกับฟิลด์และแก้ไขตัวเลือกในคอลัมน์ทางขวา

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

ขั้นตอนที่ 2: สร้างเทมเพลตบล็อกแบบกำหนดเอง

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

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

มีสองวิธีในการสร้างเทมเพลตบล็อก หากบล็อกเอาต์พุตของคุณอยู่ใน HTML/CSS คุณสามารถใช้ตัวแก้ไขเทมเพลตในตัวได้

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

วิธีที่ 1. การใช้ตัวแก้ไขเทมเพลตในตัว

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

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

ตัวอย่างเช่น เราใช้ HTML ต่อไปนี้สำหรับบล็อกตัวอย่างที่เราสร้างขึ้นด้านบน

<div class="testimonial-item">
<img src="reviewer-image" class="reviewer-image">
<h4 class="reviewer-name">reviewer-name</h4>
<div class="testimonial-text">testimonial-text</div>
</div>

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

นี่คือตัวอย่าง CSS ที่เราใช้สำหรับบล็อกที่เรากำหนดเอง

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

วิธีที่ 2 การอัปโหลดเทมเพลตบล็อกที่กำหนดเองด้วยตนเอง

วิธีนี้แนะนำหากคุณต้องการใช้ PHP เพื่อโต้ตอบกับฟิลด์บล็อกที่คุณกำหนดเอง

โดยพื้นฐานแล้ว คุณจะต้องอัปโหลดเทมเพลตตัวแก้ไขไปยังธีมของคุณโดยตรง

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

ถัดไป คุณต้องสร้างไฟล์ชื่อ block.php โดยใช้โปรแกรมแก้ไขข้อความธรรมดา นี่คือที่ที่คุณจะใส่ส่วน HTML / PHP ของเทมเพลตบล็อกของคุณ

นี่คือเทมเพลตตัวอย่างที่เราใช้สำหรับตัวอย่างของเรา

<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>

สังเกตว่าเราใช้ block_field() เพื่อดึงข้อมูลจากช่องบล็อกอย่างไร

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

อย่าลืมบันทึกไฟล์ในโฟลเดอร์ที่คุณสร้างไว้ก่อนหน้านี้

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

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

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

อย่าลืมบันทึกการเปลี่ยนแปลงของคุณ

โฟลเดอร์เทมเพลตบล็อกของคุณจะมีไฟล์เทมเพลตสองไฟล์อยู่ข้างใน

หลังจากนั้น คุณต้องอัปโหลดโฟลเดอร์บล็อกของคุณไปยังเว็บไซต์ของคุณโดยใช้ไคลเอนต์ FTP หรือแอปตัวจัดการไฟล์ภายในแผงควบคุมของบัญชีโฮสติ้ง WordPress ของคุณ

เมื่อเชื่อมต่อแล้ว ให้ไปที่โฟลเดอร์ /wp-content/themes/your-current-theme/

หากโฟลเดอร์ธีมของคุณไม่มีบล็อกชื่อโฟลเดอร์ ให้สร้างไดเร็กทอรีใหม่และตั้งชื่อโฟลเดอร์นั้นว่า blocks

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

นั่นคือทั้งหมด! คุณได้สร้างไฟล์เทมเพลตด้วยตนเองสำหรับบล็อกที่คุณกำหนดเองเรียบร้อยแล้ว

ขั้นตอนที่ 3 ดูตัวอย่างบล็อกที่คุณกำหนดเอง

ในตอนนี้ ก่อนที่คุณจะสามารถดูตัวอย่าง HTML/CSS ของคุณได้ คุณต้องระบุข้อมูลทดสอบที่สามารถใช้เพื่อแสดงผลลัพธ์ตัวอย่างได้

ภายในพื้นที่ผู้ดูแลระบบ WordPress แก้ไขบล็อกของคุณและสลับไปที่แท็บ Editor Preview ที่นี่ คุณต้องป้อนข้อมูลจำลอง

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

ตอนนี้คุณสามารถสลับไปที่แท็บ Front-end Preview เพื่อดูว่าบล็อกของคุณจะมีลักษณะอย่างไรในส่วนหน้า (พื้นที่สาธารณะของเว็บไซต์ WordPress ของคุณ)

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

ขั้นตอนที่ 4 การใช้บล็อกที่กำหนดเองของคุณใน WordPress

ตอนนี้คุณสามารถใช้บล็อกที่กำหนดเองใน WordPress ได้เหมือนกับที่คุณใช้บล็อกอื่นๆ

เพียงแก้ไขโพสต์หรือหน้าใด ๆ ที่คุณต้องการใช้บล็อกนี้

คลิกที่ปุ่มเพิ่มบล็อกใหม่และค้นหาบล็อกของคุณโดยพิมพ์ชื่อหรือคำหลัก

หลังจากที่คุณแทรกบล็อกลงในพื้นที่เนื้อหาแล้ว คุณจะเห็นช่องบล็อกที่คุณสร้างขึ้นสำหรับบล็อกที่กำหนดเองนี้

คุณสามารถกรอกข้อมูลในฟิลด์บล็อกได้ตามต้องการ

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

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

นี่คือลักษณะของบล็อกคำรับรองบนเว็บไซต์ทดสอบของเรา

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

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

หากคุณชอบบทความนี้ โปรดสมัครรับข้อมูลจากบทแนะนำวิดีโอ YouTube Channel สำหรับ WordPress คุณสามารถหาเราได้ที่ Twitter และ Facebook