كيفية إنشاء مكتبة من قصاصات النشر لاستخدامها في منشوراتك وصفحاتك

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

بدلاً من الاضطرار إلى إدخال مقتطفات التعليمات البرمجية يدويًا في كل مرة تحتاج إليها ، فمن المنطقي تنظيمها وحفظها باستخدام المكونات الإضافية. في هذه المقالة ، سنتحدث عن فوائد الحفاظ على تنظيم مقتطفات التعليمات البرمجية ، ثم نوضح لك كيفية القيام بذلك باستخدام المكون الإضافي Code Snippets Extended في خطوتين. هيا بنا إلى العمل!

لماذا يجب عليك تنظيم مقتطفات التعليمات البرمجية الخاصة بك

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

يضيف الكثير من مستخدمي WordPress مقتطفات شفرة مخصصة إلى منشوراتهم وصفحاتهم. بغض النظر عن مكانتك وحجمك ، هناك الكثير من المواقف التي ستحتاج فيها إلى إضافة القليل من التعليمات البرمجية إلى موقعك. خذ Google Adsense أو Facebook Pixel ، على سبيل المثال ، حيث يتطلب كلاهما إضافة بضعة أسطر من JavaScript إلى موقع الويب الخاص بك قبل أن يتمكنوا من العمل. تتطلب الكثير من مكونات WordPress الإضافية أيضًا استخدام الرموز القصيرة ، وبالتالي فإن فرص إضافة رمز مخصص إلى موقع الويب الخاص بك عالية.

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

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

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

تقديم البرنامج المساعد الموسع مقتطفات التعليمات البرمجية

البرنامج المساعد Code Snippets Extended هو أداة مثيرة للاهتمام تمكنك من إعداد مكتبة أكواد بسيطة داخل WordPress. يتيح لك حفظ رمز مخصص ، وتحديده باستخدام أي اسم تريده ، ثم إضافته إلى أي من منشوراتك وصفحاتك ببضع نقرات.

بالإضافة إلى ذلك ، يمكّنك المكون الإضافي أيضًا من معاينة تأثيرات مقتطفات التعليمات البرمجية ، طالما أنها بسيطة JavaScript أو CSS. كما أنه يدعم لغة PHP ، لكن هذه المقتطفات لا تُعرض عادةً باستخدام وظيفة معاينة الأداة.

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

دلائل الميزات:

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

السعر: مجاني | معلومات اكثر

كيفية إنشاء مكتبة من مقتطفات المنشورات لاستخدامها في منشوراتك وصفحاتك (في خطوتين)

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

الخطوة # 1: أضف مقتطفات جديدة إلى مكتبتك

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

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

عند الانتقال ، سترى أيضًا محررًا تكتب فيه كود CSS و JavaScript و PHP و jQuery. ومع ذلك ، يجب تغليفها بعلامات محددة لكل لغة. فيما يلي بعض الأمثلة السريعة للرجوع إليها:

<style>CSS goes between these tags.</style>

<?php PHP tags, on the other hand, are different, so keep that in mind. ?>
<script type="text/javascript"> Same goes for JavaScript, which uses this tag type. </script>
<script type="text/javascript"> jQuery(function($) {
$(document).ready(function(){
// jQuery uses the most complex tags – they need to be set up exactly as shown, and any code should go within this section.
});
});
</script>

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

بمجرد الانتهاء من كتابة التعليمات البرمجية أو لصقها ، استخدم الزر Save Snippet في أسفل الصفحة ، وسيظهر في علامة التبويب Snippets> Snippets في لوحة معلومات WordPress الخاصة بك:

الآن ، كل ما تبقى هو اختبار مقتطفك الجديد باستخدام محرر WordPress و Divi Builder.

الخطوة # 2: أدخل مقتطفاتك في منشورات وصفحات Divi

إذا كنت لا تستخدم Divi Builder ، فيمكنك فقط فتح أي من منشوراتك أو صفحاتك باستخدام محرر WordPress العادي. في الجزء العلوي ، سترى زر إدراج مقتطف جديد:

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

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

بمجرد دخولك ، الصق الرمز المختصر الخاص بك في حقل المحتوى واحفظ التغييرات:

الآن ، سيعمل مقتطفك كالمعتاد. يضيف استخدام Divi Builder خطوة واحدة إلى العملية ، ولكن لا يزال بإمكانك تخزين جميع مقتطفات التعليمات البرمجية الخاصة بك في مكتبة داخلية يسهل الوصول إليها.

استنتاج

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

يمكّنك المكون الإضافي Code Snippets Extended من القيام بذلك. ما عليك سوى تثبيته واتباع الخطوتين التاليتين:

1. أضف مقتطفات جديدة إلى مكتبتك.
2. أدخل مقتطفاتك في منشورات وصفحات Divi الخاصة بك.

هل لديك أي أسئلة حول كيفية إضافة مقتطفات التعليمات البرمجية إلى موقع Divi الخاص بك؟ اسأل بعيدا في قسم التعليقات أدناه!

الصورة المصغرة للمادة أندريه Bezvershenko / shutterstock.com.