إذا كنت تقدم أي برنامج أو نصيحة برمجة ، فستريد بالتأكيد مشاركة مقتطفات التعليمات البرمجية. يمكن أن تساعدهم هذه الطريقة في مشاركة مقتطفات التعليمات البرمجية في إعداد ممارسة بسرعة. ومع ذلك ، فإن مشاركة الكود مع كل التنسيقات الضرورية غير ممكنة بشكل افتراضي. ما أعنيه بالتنسيق هو تمييز بناء الجملة. مع ذلك ، إنه شيء سهل للغاية.
لحسن الحظ، إذا كنت تستخدم divi، فيجب أن تعلم أن هناك طريقة مدمجة للقيام بذلك يدويًا، من أجل إضافة أنماط مخصصة إلى مقتطفات التعليمات البرمجية هذه. بالإضافة إلى ذلك، هناك ملحقات و RESSOURCES تطبيقات الطرف الثالث التي يمكنها تبسيط عملية إنشاء مقتطفات وظيفية وجمالية في Divi.
في هذا البرنامج التعليمي ، سأوضح لك كيفية مشاركة مقتطفات التعليمات البرمجية في Divi (يدويًا). وسأوضح لك أيضًا كيفية تصميم كتل المقتطفات باستخدام Divi Builder ، والتي ستأخذك إلى المستوى التالي.
مسح
فيما يلي نظرة عامة على تصميمات المقتطف الممكنة في هذا البرنامج التعليمي.
تمت إضافة الوضع اليدوي "مربعات مقتطفات التعليمات البرمجية" مع مقتطفات التعليمات البرمجية.
المتطلبات الأساسية للبرنامج التعليمي
في هذا البرنامج التعليمي ، كل ما تحتاجه هو ملف موضوع ديفيومثبت ونشط. سنقوم ببناء مقتطفات التعليمات البرمجية النموذجية من البداية باستخدام Divi Builder في صفحة جديدة.
للبدء ، قم بإنشاء صفحة جديدة ونشر Divi Builder على الواجهة العامة. ثم اختر خيار "البناء من الصفر".
الآن أنت مستعد للذهاب!
تصميم صندوق مخصص لمقتطفات التعليمات البرمجية على Divi
نظرًا لأن مقتطف الشفرة الخاص بنا موجود في وحدة نصية ، يمكننا استخدام divi builder لإضافة عناصر تصميم إلى وحدة النص (وحولها). بالنسبة لهذا التصميم ، سنستخدم وحدة ملخص لتكون بمثابة تسمية للمقتطف. بعد ذلك ، سنقوم بتصميم ووضع المؤشر على يسار وحدة النص. بعد ذلك ، سنقوم بتصميم وحدة النص الخاصة بالمقتطف الخاص بنا.
إنشاء القسم والصف والعمود
يجب أولاً إنشاء قسم جديد مع صف من العمود.
ثم قم بتحديث معلمات الخط كما يلي:
عرض مزراب: 1
الحشوة المخصصة: 0px في الأعلى ، 0px في الأسفل
إضافة وحدة النص
ثم إضافة وحدة نمطية النص إلى السطر.
يمكنك ترك محتويات بشكل افتراضي. سنضيف مقتطفات كود WordPress الخاصة بنا إليها لاحقًا. في الوقت الحالي، لنقم بتصميم وحدة النص عن طريق تحديث معلمات النص التالية:
لون الخلفية: # eff0f1 لون النص: # 000000 هامش مخصص: 60 بكسل مساحة متروكة مخصصة: 3٪ أعلى ، 3٪ أسفل ، 3٪ يسار ، 3٪ يمين
عرض الحد العلوي: 10 بكسل لون الحد العلوي: # 7cda24
إنشاء تسمية المقتطف
لإنشاء تسمية المقتطف ، سنستخدم وحدة دعاية مغالى فيها. سيسمح لك ذلك بإضافة رمز نص دعاية (أو رمز صورة مخصص) بجوار لغة الشفرة المعروضة.
قم بإنشاء وحدة عرض تقديمي واسحبه فوق وحدة النص. ثم قم بتحديث إعدادات العرض التقديمي التالية:
العنوان: محتوى css: [إزالة المحتوى الوهمي] رمز الاستخدام: نعم الرمز: انظر لقطة الشاشة
ثم قم بتحديث معلمات التصميم كما يلي:
لون الخلفية: # 1b2426 لون الرمز: # 7cda24 الصورة / الرمز الموقع: حجم الخط الأيسر: 20 بكسل لون عنوان النص: #ffffff عنوان حجم النص: 16 بكسل
ارتفاع خط العنوان: 1.3em العرض: 100 بكسل هامش مخصص: -44 بكسل أسفل ، -50 بكسل حشوة مخصصة لليسار: 10 بكسل أعلى ، 2 بكسل أسفل ، 15 بكسل يسار ، 15 بكسل يمين
قسم مكرر لإنشاء المزيد من تصميمات مربع المقتطفات
هذا يدعم تصميم صندوق الكود الأول. الآن علينا فقط تكرار القسم الذي يحتوي على تصميم كتلة التعليمات البرمجية وتحديث الملصق والألوان لإنشاء كتلة تعليمات برمجية جديدة للغة ترميز مختلفة. هذا بالطبع اختياري ، ولكن إذا كنت تخطط لإضافة قصاصات مختلفة إلى صفحة ، فمن المفيد أن يكون لديك نظام ألوان مختلف لكل منها.
على سبيل المثال ، قم بتكرار القسم ، وافتح إعدادات وحدة Blurb.
قم بتحديث العنوان إلى "js" لجافا سكريبت.
ثم انقر بزر الماوس الأيمن فوق Image / Icon Color وحدد Find and Replace.
خيارات البحث والاستبدال المحدثة:
في: هذا القسم استبدل بـ: [لون جديد] استبدل الكل: تحقق من استبدل جميع القيم الموجودة
لديك الآن كتلة مقتطفات جديدة لمقتطفات JS.
فيما يلي مثال على مربعات المقتطفات لأنواع الأكواد الشائعة في WordPress.
باستخدام البرنامج المساعد Prettify Code لإضافة تسليط الضوء على بناء الجملة إلى مقتطفات الشفرة اليدوية
حسنًا ، صحيح أنه مع الطريقة اليدوية ، يمكنك لصق النص وتمريره على الفور. ال تجميل البرنامج المساعد رمز سيضيف فورًا رمزًا مميزًا إلى جميع العلامات "المسبقة". جمال هذا البرنامج المساعد هو أنه لا يوجد أي تخصيص مطلوب على الإطلاق. كل ما عليك فعله هو تنزيل البرنامج المساعد وتنشيطه.
فيما يلي مثال على الشكل الذي ستبدو عليه الشفرة مع رمز Active Prettify.
رمز Prettify يأتي جوجل ويستخدم أيضًا لتصميم كل تلك المقتطفات الرائعة stackoverflow.com.
لإتمام
لا يجب أن يكون عرض مقتطفات الكود على Divi أمرًا صعبًا. ستؤدي إضافة المقتطفات يدويًا باستخدام العلامات البرمجية المسبقة وعلامات WordPress التي يوفرها WordPress إلى تنفيذ المهمة لمعظم المقتطفات التي ليست بتنسيق html ، ولكن عليك تشغيل المقتطف من خلال برنامج تشفير أولاً. أتش تي أم أل للتأكد. بالإضافة إلى ذلك ، يمكنك تخصيص نمط نص المقتطف بشكل أكبر باستخدام إعدادات وحدة النص. ولا تنسَ Code Prettify لإضافة تمييز إلى مقتطفاتك اليدوية.
بالنسبة لأولئك منكم الذين يشاركون المقتطفات بانتظام ، فمن المحتمل أن يكون استخدام المكون الإضافي SyntaxHighlighter هو أفضل رهان لك. في كلتا الحالتين ، سيكون لديك دائمًا خيار إضافة المزيد من التصميمات الإبداعية إلى مقتطفاتك باستخدام Divi Builder.
بون فرصة.
