สร้างตารางราคามู่เล่ใหม่เป็นบล็อกแบบกำหนดเอง (ในเวลาประมาณ 10 นาที)

ตัวแก้ไขบล็อก (Gutenberg) เป็นศูนย์กลางของ WordPress สมัยใหม่อย่างไม่ต้องสงสัย ด้วยการแก้ไขไซต์อย่างเต็มรูปแบบใน WordPress Core บล็อกและสิ่งที่พวกเขาสัญญาจะอยู่ที่นี่

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

บล็อกที่กำหนดเองคือทางออกที่นี่! แต่บล็อกที่กำหนดเองนั้นต้องการ สำหรับผู้ที่ใช้งาน WordPress มาระยะหนึ่งแล้ว ต้องใช้แนวทางที่แตกต่างอย่างมากในการพัฒนา

แตกต่าง? ใช่!

ยาก? ไม่!

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

บล็อก

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

โฮลัป ! นี้ดูคุ้นเคย!

ใช่ เราจะสร้างตารางราคามู่เล่ใหม่เป็นบล็อกแบบกำหนดเอง ? มีบล็อกตารางการกำหนดราคาแบบ Plug-n-Play อยู่รอบ ๆ แต่ตารางของเราที่นี่ค่อนข้างพิเศษ ดังนั้นเราจะเปิดตัวของเราเอง

การตั้งค่า

ฮีโร่ของเรื่องนี้คือปลั๊กอินที่เรียกว่า Genesis Custom Blocks ฟรีที่ wordpress.org และมีรุ่น Pro ที่มีคุณสมบัติขั้นสูงที่ยอดเยี่ยม ได้แก่ :

• ติดตั้ง WordPress ใหม่ – ชมเชย Local
• Genesis Custom Blocks (ฟรี) ติดตั้งและเปิดใช้งาน
• ธีมลูกสำหรับ Genesis Block Theme

หมายเหตุสำคัญ: Genesis Custom Blocks ไม่ได้ขึ้นอยู่กับ Genesis Framework, Genesis Block Theme ด้านบน หรือปลั๊กอินหรือธีมอื่นๆ

การลงทะเบียนและกำหนดค่าบล็อก

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

ในผู้ดูแลระบบ WordPress ในเมนูด้านซ้าย ให้ไปที่ Custom Blocks > Add New

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

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

รายละเอียดบล็อกที่เราเพิ่มคือ:

• ชื่อ: ตารางราคา
• กระสุน: ตารางราคา
• ไอคอน: Genesis Planet

ฟิลด์ที่เราเพิ่มคือ:

การเพิ่มฟิลด์ในบล็อกที่กำหนดเองของเรามีลักษณะดังนี้:

เมื่อเราเพิ่มฟิลด์ทั้งหมดของเราแล้ว นี่คือสิ่งที่ดูเหมือน:

เมื่อเรากดเผยแพร่ เราจะได้รับข้อความ แจ้ง ว่าต้องทำอย่างไรต่อไป

สิ่งนี้นำเราไปสู่ขั้นตอนต่อไป:

การสร้างเทมเพลตบล็อก

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

Genesis Custom Blocks ช่วยให้ WordPress devs ใช้ประโยชน์จากแนวทางปฏิบัติเกี่ยวกับเทมเพลตที่เราได้ฝึกฝนมาในช่วงทศวรรษที่ผ่านมา มันง่ายมากและจะรู้สึกคุ้นเคยมาก

ในธีมลูกของเรา เราได้เพิ่มโฟลเดอร์และไฟล์ใหม่สองสามไฟล์ดังนี้:

/genesis-block-child-theme
    /blocks
        /pricing-table
            block.php
            block.css

สิ่งที่ควรทราบที่นี่:

• เราเพิ่มโฟลเดอร์ blocks ในธีมของเรา (ธีมลูก)
• เราเพิ่มโฟลเดอร์เฉพาะสำหรับบล็อกที่เรากำลังดำเนินการอยู่ และตั้งชื่อตามนั้นว่าบล็อกกระสุนคืออะไร ซึ่งในกรณีนี้คือ pricing-table ราคา
• เราเพิ่มไฟล์ PHP และไฟล์ CSS นี่คือที่ที่เราจะเพิ่มโค้ดเทมเพลตของเรา

เริ่มต้นด้วยไฟล์ PHP เริ่มต้นด้วยมาร์กอัป HTML พื้นฐานและคลาส CSS

ซึ่งจะมีลักษณะดังนี้:

<div class="fw-pricing-table">
    <img src="">
    <h3 class="fw-pricing-table__name"></h3>
    <p class="fw-pricing-table__description"></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><span> monthly visits</span></p>
			<progress value="" max="400000"></progress>
		</div>
		<div>
			<p><span>GB Disk</span></p>
			<progress value="" max="50"></progress>
		</div>
		<div>
			<p><<span>GB bandwidth</span></p>
			<progress value="" max="500"></progress>
		</div>
	</div>
</div>

สิ่งที่ควรทราบ:

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

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

ด้วยฟังก์ชันเหล่านี้ ไฟล์เทมเพลต PHP ของเราจึงมีลักษณะดังนี้:

<div class="fw-pricing-table">
    <img src="<?php block_field( 'icon' ); ?>">
    <h3 class="fw-pricing-table__name"><?php block_field( 'name' ); ?></h3>
    <p class="fw-pricing-table__description"><?php block_field( 'description' ); ?></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span><?php block_field( 'price' ); ?></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="<?php block_field( 'url' ); ?>">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span><?php block_field( 'site-count' ); ?></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><?php block_field( 'monthly-visits' ); ?><span> monthly visits</span></p>
			<progress value="<?php block_field( 'monthly-visits' ); ?>" max="400000"></progress>
		</div>
		<div>
			<p><?php block_field( 'disk-space' ); ?><span>GB Disk</span></p>
			<progress value="<?php block_field( 'disk-space' ); ?>" max="50"></progress>
		</div>
		<div>
			<p><?php block_field( 'bandwidth' ); ?><span>GB bandwidth</span></p>
			<progress value="<?php block_field( 'bandwidth' ); ?>" max="500"></progress>
		</div>
	</div>
</div>

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

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

.fw-pricing-table {
    border-radius: 4px;
    transition: box-shadow .3s ease-in-out;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    padding: 2rem 2em 4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fw-pricing-table:hover {
    box-shadow: 0 5px 22px 0 rgb(0 0 0 / 10%);
}

.fw-pricing-table img {
    max-height: 100px;
    width: auto;
}

.fw-pricing-table__name {
    margin-top: 20px;
    font-weight: 400;
}

.fw-pricing-table__description {
    font-size: 16px;
    font-style: italic;
    font-family: serif;
    max-width: 160px;
}

.fw-pricing-table__price {
    color: #50c6db;
    display: flex;
    align-items: flex-start;
    font-size: 46px;
    font-weight: 500;
}

.fw-pricing-table__price span:last-child {
    font-size: 24px;
    margin-top: 6px;
}

.fw-pricing-table__btn {
    display: block;
    background-color: #338199;
    color: #fff;
    padding: 6px 20px;
    border-radius: 18px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-top: 10px;
}

.fw-pricing-table__btn:hover {
    background-color: #01516e;
    color: #fff;
}

.fw-pricing-table__site-count {
    font-size: 14px;
    margin-top: 24px;
    font-weight: 500;
    color: #50c6db;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.fw-pricing-table__resources {
    margin-top: 8px;
}

.fw-pricing-table__resources>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fw-pricing-table__resources p {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 18px;
}

.fw-pricing-table__resources progress[value] {
    margin-top: 6px;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border: none;
    border-radius: 3px;
    overflow: hidden;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-bar {
    background-color: #e7e7e7;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-value {
    background-color: #50c6db;
    border-radius: 3px;
}

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

และนั่นแหล่ะ! ?

สรุป:

1. เราได้เพิ่มและกำหนดค่าบล็อกใน WP Admin
2. เราสร้างไฟล์เทมเพลต PHP ด้วย HTML พื้นฐาน 29 บรรทัดและฟังก์ชัน PHP เดียว
3. เราลด CSS บางส่วนลงใน block.css สำหรับการจัดสไตล์ของเรา

ใช้บล็อกที่กำหนดเองของเรา

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

เมื่อคลิกปุ่ม "เพิ่มบล็อก" คุณจะเห็นบล็อกตารางราคาของเราพร้อมดำเนินการที่นี่

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

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

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

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

• มีบางสตริงที่ต้องพหูพจน์ เช่น “WordPress Site” ควรเป็น “WordPress Sites” สำหรับแผนที่มีไซต์จำกัดมากกว่า 1 แห่ง ตรรกะพื้นฐานบางอย่างในไฟล์เทมเพลต PHP สามารถแก้ปัญหานี้ได้
• คุณสามารถข้ามบล็อกคอลัมน์และใช้ฟิลด์ Repeater แทน (คุณสมบัติ Pro) และมีแผนทั้งหมดในบล็อกเดียว
• เพิ่มจุลภาคให้กับตัวเลขที่มากขึ้น
• แถบความคืบหน้าแสดงค่าที่แน่นอนของความสัมพันธ์สูงสุด นี้ดูแปลกเล็กน้อย คุณสามารถเปลี่ยนไปใช้สิ่งที่มีแนวคิดเกี่ยวกับค่านิยมมากขึ้นได้

ห่อของ

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

ลิงค์สำคัญอื่นๆ:

• ปลั๊กอิน
• เว็บไซต์เอกสาร
• ชุมชน Genesis Slack

หากคุณต้องการเห็นการใช้งานจริงของ Genesis Custom Blocks เพิ่มเติม ในเซสชันล่าสุดที่ DE{CODE} ฉันได้สร้างและสาธิตบล็อกที่กำหนดเองสี่บล็อกแยกกัน (ของความซับซ้อนที่เพิ่มขึ้น) ในเวลาประมาณ 15 นาที ตรวจสอบการบันทึกตามความต้องการได้ที่นี่

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

ไชโย!

รับสิทธิ์เข้าถึงธีม StudioPress ที่สร้างโดยเจเนซิสฟรีด้วยมู่เล่!

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