كيفية إضافة مقتطفات تعليمات برمجية مخصصة في WordPress (أسهل طريقة)

هل تبحث عن طريقة سهلة ومباشرة لإضافة مقتطفات كود WordPress إلى موقع الويب الخاص بك؟

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

هذا التخصيص المثالي الذي تبحث عنه؟ يمكن تحقيق ذلك باستخدام الكود الصحيح، ولكن المشكلة هي أنه حتى أصغر خطأ يمكن أن يؤدي إلى تعطيل موقع الويب الخاص بك.

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

ما هي مقتطفات التعليمات البرمجية في وورد؟

أسفل واجهة WordPress سهلة الاستخدام، يوجد عالم من التعليمات البرمجية التي تدعم كل خطوة.

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

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

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

كيفية إضافة مقتطفات التعليمات البرمجية المخصصة في ووردبريس

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

1. قم بتثبيت وتفعيل البرنامج المساعد WPCode

يعد WPCode أفضل طريقة لمستخدمي WordPress لإضافة مقتطفات تعليمات برمجية مخصصة إلى مواقعهم دون الحاجة إلى العبث بملف functions.php أو القلق بشأن تعطيل الموقع من خلال أدنى خطأ.

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

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

2. قم بإنشاء التعليمات البرمجية المخصصة (PHP، CSS، HTML)

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

في هذا الدليل، سنقوم بإنشاء رمز مخصص يمنع تعارضات السمات التي تتسبب في عدم عرض قيم Radio وCheckbox بشكل صحيح في WPForms.

.wpforms-container input[type=radio] {
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
	appearance: radio !important;
}

.wpforms-container input[type=checkbox] {
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	appearance: checkbox !important;
}

.wpforms-container input[type=radio]:checked:before,
.wpforms-container input[type=radio]:before,
.wpforms-container input[type=checkbox]:checked:before,
.wpforms-container input[type=checkbox]:before,
.wpforms-container input[type=radio]:checked:after,
.wpforms-container input[type=radio]:after,
.wpforms-container input[type=checkbox]:checked:after,
.wpforms-container input[type=checkbox]:after {
	display: none !important;
}

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

3. أضف الرمز المخصص الخاص بك (مقتطف جديد)

من شريط قائمة مسؤول WordPress الخاص بك، انقر فوق خيار Code Snippets ثم الزر Add New . نظرًا لأنك قمت للتو بتثبيت البرنامج المساعد، فستكون قائمتك فارغة.

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

انقر فوق الزر Use Snippet بجوار خيار Add Your Custom Code (New Snippet) لإدراج الرمز الجديد.

الآن، كل ما عليك فعله هو إعطاء اسم للمقتطف ونسخ ولصق الكود المخصص الذي قمت بإنشائه في مساحة Code Preview في المكون الإضافي WPCode.

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

بعد ذلك، قم بالتمرير لأسفل إلى علامة التبويب "الإدراج" . الآن، حدد Auto-Insert، ومن القائمة المنسدلة Location ، اختر خيار Site Wide Header .

اعتمادًا على نوع الكود الذي تقوم بإنشائه، يمكنك أيضًا اختيار إضافته كرمز قصير [/] إلى صفحاتك/منشوراتك.

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

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

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

أخيرًا، كل ما عليك فعله هو تحديد الخيار Active والضغط على زر Save Snippet قبل الانتقال بعيدًا عن المكون الإضافي!

4. معالجة الأخطاء في التعليمات البرمجية المخصصة

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

سيظهر خطأ في بناء الجملة أو 500 خطأ داخلي في الخادم على موقعك. ستحتاج إلى استخدام عميل FTP لعكس التغييرات يدويًا.

الميزة الفريدة للمكون الإضافي WPCode هي أنه سيحدد ويعطل تلقائيًا أي حالات أخطاء في بناء الجملة في الكود.

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

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

5. إدارة مقتطفات التعليمات البرمجية المخصصة الخاصة بك

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

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

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

لديك أيضًا خيار تصدير مقتطفات تعليمات برمجية معينة أو تصديرها جميعًا بشكل مجمّع. ما عليك سوى الانتقال إلى Code Snippets »Tools وتحديد خيار التصدير .

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

الأسئلة الشائعة حول مقتطفات التعليمات البرمجية المخصصة

تعد إضافة مقتطفات تعليمات برمجية مخصصة موضوعًا شائعًا لسهولة الاستخدام بين قرائنا. فيما يلي بعض الإجابات السريعة لبعض الأسئلة الأكثر شيوعًا:

ما هو أفضل مدير مقتطفات التعليمات البرمجية لـ WordPress؟

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

كيف أقوم بإضافة CSS إلى مقتطف التعليمات البرمجية في WordPress؟

ضمن WPCode، ما عليك سوى الانتقال إلى القسم + إضافة جديد ، وإدخال CSS المطلوب، والتأكد من تحديد نوع CSS قبل الحفظ والتنشيط.

كيف أقوم بإضافة كود مخصص إلى WordPress بدون مكونات إضافية؟

يمكنك إدخال تعليمات برمجية مخصصة مباشرةً في ملف functions.php الخاص بموضوعك. ومع ذلك، فإن أداة مخصصة مثل WPCode تضمن إدارة أكثر أمانًا وتنظيمًا للمقتطفات.

كيف أقوم بإضافة كود php مخصص إلى WordPress؟

بالنسبة إلى PHP، توجه إلى واجهة WPCode، واختر + Add New ، والصق كود PHP الخاص بك، ثم احفظه. تأكد دائمًا من اختباره على موقع موضوع فرعي مرحلي أولاً.

بعد ذلك، تعرف على كيفية طلب عنوان بريد إلكتروني لتنزيلات الملفات

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

أنشئ نموذج WordPress الخاص بك الآن

على استعداد لبناء النموذج الخاص بك؟ ابدأ اليوم مع أسهل مكون إضافي لإنشاء النماذج في WordPress. يتضمن WPForms Pro الكثير من القوالب المجانية ويقدم ضمان استعادة الأموال لمدة 14 يومًا.

إذا ساعدتك هذه المقالة، فيرجى متابعتنا على Facebook وTwitter للحصول على المزيد من البرامج التعليمية والأدلة المجانية الخاصة بـ WordPress.