كيفية إنشاء وحدات شهادة ديناميكية باستخدام Divi & ACF

يعمل Divi بشكل جيد مع المحتوى الديناميكي. يمكن استخدام المحتوى الديناميكي لعرض النص والعناوين وغير ذلك الكثير. يمكن استخدامه حتى في وحدة شهادة Divi من خلال دمجه مع مكون إضافي يسمى الحقول المخصصة المتقدمة. في هذا المنشور ، سنرى كيفية إنشاء وحدات شهادات ديناميكية باستخدام Divi و ACF. يعمل Divi & ACF معًا بشكل جيد حقًا ، وسيساعدك هذا المنشور على فهم كيف!

دعنا نذهب اليها.

إعداد الحقول المخصصة المتقدمة

أولاً ، سنحتاج إلى تثبيت الإصدار المجاني من المكون الإضافي Advanced Custom Fields.

قم بتثبيت Advanced Custom Fields

لتثبيته داخل WordPress ، انتقل إلى الإضافات > إضافة جديد في لوحة معلومات WordPress. ابحث عن الحقول المخصصة المتقدمة وانقر فوق التثبيت الآن .

1. الإضافات
2. اضف جديد
3. بحث
4. تثبيت الآن

بمجرد اكتمال التثبيت ، انقر فوق تنشيط .

1. تفعيل

نحن الآن جاهزون لإعداد الحقول المخصصة لشهادة Divi الخاصة بنا.

قم بإنشاء مجموعة ميدانية جديدة

بعد ذلك ، قم بإنشاء مجموعة الحقول . ستحتوي هذه المجموعة الميدانية على جميع الحقول المطلوبة لشهادة واحدة. يمكننا بعد ذلك استنساخ هذه المجموعة الميدانية لإنشاء العديد من الشهادات كما نريد.

لإنشاء مجموعة الحقول ، انتقل إلى الحقول المخصصة > إضافة جديد في لوحة معلومات WordPress.

1. الحقول المخصصة
2. اضف جديد

إنشاء المجموعة الميدانية للشهادة 1

أولاً ، أضف عنوانًا وانقر فوق إضافة حقل .

1. أضف عنوانا
2. انقر فوق إضافة حقل

هذا يفتح المحرر حيث سننشئ الحقول. سنحتاج إلى إضافة حقل واحد في كل مرة. سيتضمن كل حقل التسمية والاسم ونوع الحقل. يمكن أن يتطابق الاسم والتسمية.

شهادة 1 وصف

أدخل تسمية الحقل واسم الحقل . انقر فوق مربع القائمة المنسدلة " نوع الحقل " لرؤية الخيارات. يستخدم هذا الحقل نوع حقل مختلفًا عن الحقول الثلاثة الأخرى.

• تسمية الحقل: شهادة 1 الوصف
• اسم الحقل: وصف الشهادة 1

حدد منطقة النص من القائمة.

• نوع الحقل: منطقة النص

شهادة 1 الاسم

بعد ذلك ، قم بالتمرير لأسفل وانقر فوق إضافة حقل .

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

• اسم الحقل: شهادة 1 الاسم
• تسمية الحقل: شهادة 1 الاسم

شهادة 1 الوظيفة

بعد ذلك ، انقر على "إضافة حقل " وأدخل وظيفة الشهادة الأولى لاسم الحقل وتسمية الحقل .

• اسم الحقل: شهادة 1 المنصب الوظيفي
• تسمية المجال: شهادة 1 الوظيفة

شهادة 1 شركة

بعد ذلك ، انقر فوق إضافة حقل وأدخل شركة Testimonial 1 لاسم الحقل وتسمية الحقل .

• اسم الحقل: شركة Testimonial 1
• تسمية الحقل: شهادة 1 شركة

موقع

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

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

• الحقل الأول: الصفحة
• الحقل الثاني: اسم صفحتك

انشر مجموعة الحقول الجديدة

أخيرًا ، انقر فوق الزر " نشر " في الزاوية اليمنى العليا من المحرر لنشر مجموعة الحقول الجديدة.

بمجرد نشر مجموعة الحقول ، سترى قائمة الحقول والقواعد.

استنساخ مجموعة الشهادات الميدانية

بعد ذلك ، سنقوم باستنساخ مجموعة مجال الشهادة. سيسمح لنا هذا بإنشاء شهادة أخرى. سنحتاج إلى تكرار هذا لكل شهادة نريد تكوينها. في لوحة معلومات WordPress ، انتقل إلى Custom Field > Field Groups . مرر مؤشر الماوس فوق مجموعة الحقول التي تريد استنساخها وانقر فوق تكرار .

1. الحقول المخصصة
2. المجموعات الميدانية
3. ينسخ

بعد ذلك ، انقر فوق تحرير لفتح مجموعة الحقول الجديدة وتغيير أسماء المجموعة وكل حقل داخل المجموعة.

قم بتغيير العنوان وحدد كل حقل وقم بتغيير 1 إلى 2. انقر فوق تحديث عندما تكون جاهزًا.

بعد ذلك ، اختر الصفحة التي تريد أن تكون هذه الشهادة متاحة فيها.

لديك الآن المجموعة الميدانية لشهادتك الثانية.

أنشئ الشهادة

تظهر حقول الشهادة أسفل محرر الصفحة للصفحة التي حددتها كموقع الشهادة. هذا المثال يحتوي فقط على الحقول الخاصة بشهادة 1. لقد اخترت صفحة مختلفة لموقع Testimonial 2 ، لذا فهي لا تظهر هنا.

املأ الحقول كالمعتاد. بعد ذلك ، ستكون جاهزًا لاستخدام الحقول الموجودة داخل تخطيط Divi لهذه الصفحة.

قم بإنشاء وحدة شهادة Divi الديناميكية

ميزة واحدة له هي أنه يمكن لأي شخص إدخال المعلومات أو تحرير الحقول دون الحاجة إلى فتح وحدات Divi. ستحتاج الحقول إلى تعيينها داخل وحدة شهادة Divi. انقر لاستخدام Divi Builder لهذه الصفحة.

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

أضف قسمًا جديدًا لشهادة Divi وصفًا

أضف قسمًا عاديًا جديدًا ضمن القسم الثاني من التخطيط.

بعد ذلك ، أضف صفًا أحادي العمود .

أضف وحدة شهادة Divi

بعد ذلك ، أضف وحدة شهادة إلى الصف.

قم بإنشاء محتوى الشهادة الديناميكي

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

اسم المؤلف الديناميكي

أولاً ، قم بالتمرير فوق حقل المؤلف وانقر فوق رمز المحتوى الديناميكي .

سترى خيارات ACF في أسفل القائمة. هذه هي التسميات التي قدمناها للحقول عندما أنشأنا المجموعة الميدانية. حدد اسم الشهادة 1 .

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

يعرض حقل المؤلف الآن اسم المحتوى الديناميكي الخاص به. يظهر النص الذي أدخلته في الحقل الآن كاسم المؤلف.

المسمى الوظيفي الديناميكي

بعد ذلك ، مرر مؤشر الماوس فوق الحقل الخاص بـ Job Title وانقر فوق رمز المحتوى الديناميكي.

اختر شهادة 1 الوظيفة الوظيفة من القائمة.

أضف أي نص قبل أو بعد إلى الحقول وحدد علامة الاختيار الخضراء.

اسم الشركة الديناميكي

بعد ذلك ، مرر مؤشر الماوس فوق حقل الشركة وحدد الرمز الديناميكي الخاص به.

اختر شركة Testimonial 1 من القائمة.

أضف النص "قبل وبعد" إذا كنت تريد وانقر فوق علامة الاختيار الخضراء.

وصف ديناميكي

أخيرًا ، مرر مؤشر الماوس فوق منطقة المحتوى الخاصة بـ Body وحدد الرمز الديناميكي.

اختر وصف الشهادة 1 من القائمة.

بعد ذلك ، أضف النص "قبل وبعد" إذا كنت تريد وانقر فوق علامة الاختيار الخضراء. اخرج من الوحدة واحفظ صفحتك.

لدينا الآن وحدة شهادة تستخدم محتوى ديناميكيًا للحقول.

تحرير محتوى الشهادة الديناميكي

يمكن تحديث أي من حقول الشهادة دون الحاجة إلى فتح Divi builder. لتحرير المحتوى الديناميكي ، ما عليك سوى الانتقال إلى محرر الصفحة وتغيير المحتوى في الحقول الموجودة أسفل الصفحة. في هذا المثال ، أضفت اسمي الأخير إلى حقل اسم الشهادة 1.

يتم تحديث الاسم تلقائيًا في الوحدة.

نمط وحدة الشهادة الديناميكية

بعد ذلك ، دعنا نصمم وحدة الشهادة لتتناسب مع قالب الصفحة.

صورة المحتوى

في علامة تبويب المحتوى ، قم بالتمرير لأسفل إلى صورة وإضافة صورة الشخص من مكتبة الوسائط الخاصة بك.

• الصورة: صورة الشخص

رمز الاقتباس

بعد ذلك ، انتقل إلى علامة تبويب التصميم. اختر الأسود للون رمز الاقتباس .

• اللون: # 000000

صورة

بعد ذلك ، قم بالتمرير لأسفل إلى الصورة . اضبط العرض والارتفاع على 150 بكسل. قم بتغيير الزوايا الدائرية إلى 0 بكسل.

• العرض: 150 بكسل
• الارتفاع: 150 بكسل
• الزوايا الدائرية: 0 بكسل

نص أساسي

قم بالتمرير لأسفل إلى Body Text . اختر مونتسيرات للخط. قم بتغيير اللون إلى الأسود.

• الخط: مونتسيرات
• اللون: # 000000

اضبط حجم سطح المكتب على 16 بكسل ، وحجم الهاتف على 14 بكسل ، وارتفاع الخط على 1.8em.

• الحجم: 16 بكسل ، 14 بكسل
• ارتفاع الخط: 1.8em

نص المؤلف

قم بالتمرير لأسفل إلى نص المؤلف . قم بتغيير الخط إلى مونتسيرات وتغيير اللون إلى الأسود. اضبط حجم سطح المكتب على 20 بكسل ، وحجم الجهاز اللوحي على 18 بكسل ، وحجم الهاتف على 16 بكسل.

• الخط: مونتسيرات
• اللون: # 000000
• الحجم: 20 بكسل ، 18 بكسل ، 16 بكسل

نص المركز

بعد ذلك ، قم بالتمرير لأسفل إلى نص الموضع وقم بتغيير الخط إلى مونتسيرات.

• الخط: مونتسيرات

نص الشركة

أخيرًا ، قم بالتمرير لأسفل إلى نص الشركة واضبط الخط على مونتسيرات. أغلق الوحدة واحفظ صفحتك.

• الخط: مونتسيرات

نتيجة وحدة الشهادة الديناميكية

هذا هو المظهر النهائي لوحدة شهادة Divi الديناميكية.

اليك كيف يبدو داخل تخطيط الصفحة.

خواطر ختامية

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

نريد أن نسمع منك. هل تستخدم محتوى الشهادة الديناميكي مع Divi و ACF؟ واسمحوا لنا أن نعرف عن ذلك في التعليقات.