إعادة بناء جدول تسعير دولاب الموازنة ككتلة مخصصة (في حوالي 10 دقائق)

محرر المربعات (Gutenberg) هو بلا شك مركز WordPress الحديث. مع التحرير الكامل للموقع في طريقه إلى WordPress Core ، فإن الكتل وكل ما يعدون به موجود هنا لتبقى.

ومع ذلك ، فإن الكتل لا تفعل دائمًا ما نريد أو تبدو بالطريقة التي نحبها. إذا قمت بتصميم وإنشاء مواقع لكسب لقمة العيش ، فأنت تعلم أن عناصر قطع ملفات تعريف الارتباط لا تصل إلا إلى حد بعيد على الويب. في مرحلة ما ، نحتاج إلى تلك "الكتلة" على الصفحة للنظر أو التصرف بطريقة معينة حقًا.

الكتل المخصصة هي الحل هنا! لكن الكتل المخصصة تتطلب ، بالنسبة للعديد من الأشخاص الذين كانوا يتداولون في WordPress لفترة من الوقت ، طريقة مختلفة تمامًا للتطوير.

مختلف؟ نعم!

صعب؟ لا!

سأوضح لك كيف يمكنك بسهولة إنشاء كتلة مخصصة بالكامل. وسيستغرق الأمر حوالي 10 دقائق. بالنسبة لأي عامل مستقل أو طاقم وكالة هنا يرغب في اكتساب المهارات حول محرر الكتلة ، أعتقد أنك ستحب هذا!

الكتلة

لنتخيل أننا نعمل على مشروع وقد قدم لنا المصمم تصميمًا رائعًا لموقع إلكتروني للتجارة الإلكترونية. إنه يستخدم أفضل ما في WordPress + WooCommerce ، ولكن هناك بعض القطع التي لا تعمل على الرف. واحد من هؤلاء هنا:

هولوب ! هذا يبدو مألوفا!

نعم ، سنعيد بناء جدول تسعير الحدافة ككتلة مخصصة. ؟ هناك كتل من جدول تسعير المكونات واللعب حولها ، لكن مجموعتنا هنا فريدة جدًا ، لذلك سنقوم بتدوير مجموعتنا.

وانشاء

بطل هذه القصة هو مكون إضافي يسمى Genesis Custom Blocks. إنه مجاني على wordpress.org ، وهناك إصدار احترافي يقدم بعض الميزات المتقدمة الرائعة ، بما في ذلك:

• تثبيت WordPress جديد - تحيات Local
• Genesis Custom Blocks (free one) مثبتة ونشطة
• موضوع فرعي لموضوع Genesis Block

ملاحظة مهمة: لا تعتمد Genesis Custom Blocks على Genesis Framework أو Genesis Block Theme أعلاه أو أي مكونات إضافية أو سمات أخرى.

تسجيل وتكوين الكتلة

يكمن جمال هذا المكون الإضافي في أننا نقوم بالكثير في إدارة WordPress.

في مدير WordPress ، في القائمة اليمنى ، انتقل إلى Custom Blocks> Add New

الشاشة التي نراها الآن هي Block Builder ، حيث سنقوم بتكوين مجموعة من الأشياء للكتلة الخاصة بنا بما في ذلك إضافة الحقول.

الطريقة التي يعمل بها هذا المكون الإضافي هي أنه يقوم بإنشاء كتل مخصصة حيث يقوم المستخدم ، الذي يعمل في Block Editor ، بإدخال المحتوى والبيانات عبر الحقول في واجهة تشبه النموذج. هذه الواجهة المبسطة / التي لها رأي هي أحد الأشياء التي تعمل على تسريع عملية إنشاء الكتلة المخصصة. لا تحتاج إلى معرفة مدخلات واجهة المستخدم.

تفاصيل الكتلة التي نضيفها هي:

• الاسم: جدول التسعير
• سبيكة: جدول التسعير
• الرمز: جينيسيس بلانيت

الحقول التي نضيفها هي:

تبدو إضافة الحقول إلى الكتلة المخصصة لدينا كما يلي:

بمجرد أن نضيف جميع حقولنا ، هذا ما يبدو عليه الأمر:

عندما نضغط على النشر ، نتلقى مطالبة تحثنا على ما يجب فعله بعد ذلك.

هذا يقودنا إلى الخطوة التالية:

قالب الكتلة

الكتلة مسجلة بالفعل ومتاحة في محرر الكتلة الآن. يمكنك الانتقال إلى منشور / صفحة جديدة وإضافة الكتلة كما تفعل مع أي منشور آخر. ومع ذلك ، فإنه لن يعرض (حتى الآن) أي شيء. هذا هو المكان الذي يأتي فيه القوالب.

تسمح Genesis Custom Blocks لمطوري WordPress بالاستفادة من الكثير من ممارسات القوالب التي صقلناها على مدار العقد الماضي أو نحو ذلك. إنه بسيط للغاية وسيشعر بأنه مألوف للغاية.

في نسق الطفل الخاص بنا ، نضيف عدة مجلدات وملفات جديدة مثل هذا:

/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 بسيطة يتيحها البرنامج الإضافي لنا. هناك مجموعة متاحة ، ولكن من المحتمل أن تقضي معظم وقتك في استخدام هذين الرقمين أدناه. نحن نستخدم الأول حصريًا في هذه الكتلة.

لذلك ، مع هذه الوظائف ، يبدو ملف قالب 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 يحتوي على 29 سطرًا بسيطًا من HTML الأساسي ووظيفة PHP واحدة
3. لقد أسقطنا بعض CSS في block.css .

استخدام كتلة مخصصة لدينا

لذا يمكننا الآن القفز وإنشاء منشور أو صفحة جديدة وإضافة الكتلة. للاحتفاظ بهذا النمط المكون من 4 أعمدة لخيارات التسعير ، نضيف أولاً كتلة أعمدة ثم نقوم بإسقاط كتلة جدول الأسعار المخصصة في كل عمود.

بالنقر فوق الزر "إضافة كتلة" ، يمكنك رؤية كتلة جدول الأسعار لدينا جاهزة للعمل هنا.

يوضح ما يلي كيف حصلت على أربعة أعمدة وقمت بإضافة الكتلة المخصصة أربع مرات. عندما أحدد كتلة فردية ، يمكنك رؤيتها وهي تتحول إلى واجهة المستخدم النموذجية التي تعطينا حقولنا لإسقاط المحتوى. النقر بعيدًا عن عرض النموذج يعطينا المعاينة.

تبدو جميلة في محرر الكتلة وتبدو جيدة في الواجهة الأمامية. نظرًا لأننا نستفيد من كتلة الأعمدة أيضًا ، فإن كل شيء جميل وسريع الاستجابة.

مع تصميماتنا التي صممناها لكي نعمل من كتلة أعمدة Gutenberg سريعة الاستجابة والقدرة على الاعتماد عليها ، كان إجمالي وقت الإنشاء لهذه الكتلة بالنسبة لي أقل من 10 دقائق.

هناك بعض الأشياء التي يمكنك القيام بها لتحسين الكتلة بشكل أكبر:

• هناك عدد قليل من الجمل التي تحتاج إلى الجمع. أي يجب أن يكون "موقع WordPress" هو "مواقع WordPress" للخطط التي يتجاوز حد موقعها واحد. يمكن لبعض المنطق الأساسي في ملف قالب PHP حل هذه المشكلة.
• يمكنك تخطي كتلة الأعمدة واستخدام حقل Repeater (ميزة Pro) بدلاً من ذلك واحتواء جميع الخطط في كتلة واحدة.
• أضف فاصلات إلى أعداد أكبر.
• تعرض أشرطة التقدم القيمة الدقيقة للحد الأقصى من العلاقات. هذا يبدو غريبا بعض الشيء. يمكنك التبديل إلى شيء مفاهيمي أكثر للقيم.

تغليف الأشياء

إذا كنت ترغب في تنزيل هذا الحظر وتثبيته ، يمكنك تنزيل الملفات هنا. يمكن العثور على وثائق حول استيراد الكتل المخصصة هنا.

روابط مهمة أخرى:

• البرنامج المساعد
• موقع المستندات
• مجتمع جينيسيس سلاك

إذا كنت ترغب في رؤية المزيد من Genesis Custom Blocks قيد التشغيل ، ففي جلسة حديثة في DE {CODE} ، قمت ببناء وعرض أربع كتل مخصصة منفصلة (ذات تعقيد متزايد) في حوالي 15 دقيقة. تحقق من التسجيل عند الطلب هنا.

أتمنى أن تكون قد وجدت هذا مفيدًا وفهمت كيف أن الاستفادة من قوة محرر القوالب للتصاميم والبنيات المخصصة أمر سهل للغاية حقًا.

هتافات!

احصل على وصول مجاني إلى سمات StudioPress المبنية من Genesis باستخدام Flywheel!

من المهم أن يقوم موفر الاستضافة الخاص بك بأقصى ما يمكن من أجلك ، وهذا يتجاوز الأداء والأمان! من خلال الوصول إلى أكثر من 35 سمة StudioPress مبنية من Genesis دون أي تكلفة إضافية ، توفر لك Flywheel مكتبة جميلة من السمات حتى تتمكن من إنشاء مواقعك أو إعادة تكوينها بطريقة تناسب أهداف موقع الويب الخاص بك! تعرف على المزيد حول دولاب الموازنة هنا.