كيفية إضافة كود قصير في WordPress (دليل المبتدئين)

هل تريد إضافة كود قصير في WordPress ولكنك لا تعرف كيف تبدأ؟

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

في هذه المقالة ، سنوضح لك كيفية إضافة كود قصير بسهولة في WordPress. سنوضح لك أيضا كيفية إنشاء الرموز القصيرة المخصصة الخاصة بك في WordPress.

ما هي الأكواد القصيرة؟

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

[مثال شورت كود]

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

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

ولكن ماذا لو كنت ترغب في تشغيل بعض التعليمات البرمجية المخصصة داخل مشاركاتك لعرض المنشورات ذات الصلة ، وإعلانات البانر ، وقوالب الاتصال ، والمعارض ، وما إلى ذلك؟

هذا هو المكان الذي تأتي فيه واجهة برمجة تطبيقات الكود القصير.

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

عندما يعثر WordPress على الكود القصير ، سيقوم تلقائيا بتشغيل الكود المرتبط به.

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

إضافة الكود قصير في منشورات وصفحات WordPress

أولا ، تحتاج إلى تحرير المنشور والصفحة حيث تريد إضافة الكود القصير.

بعد ذلك ، تحتاج إلى النقر فوق الزر “إضافة كتلة” لإدراج كتلة الكود قصير.

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

سيتم توفير الكود القصير من خلال العديد من اضافات WordPress  التي قد تستخدمها مثل WPForms لقوالب الاتصال ، و OptinMonster لقوالب التسويق عبر البريد الإلكتروني ، وزر WP Call لإدخال زر النقر للاتصال ، وما إلى ذلك.

يمكنك الآن حفظ منشورك أو صفحتك ومعاينة التغييرات لرؤية الكود القصير قيد التنفيذ.

إضافة الكود قصير في أدوات الشريط الجانبي ل WordPress

يمكنك أيضا استخدام الرموز القصيرة في أدوات الشريط الجانبي ل WordPress.

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

يمكنك الآن لصق الكود القصير الخاص بك داخل منطقة النص في الأداة.

لا تنس النقر فوق الزر “تحديث” لتخزين إعدادات عنصر واجهة المستخدم الخاص بك.

بعد ذلك ، يمكنك زيارة موقع WordPress الخاص بك لمشاهدة المعاينة المباشرة الكود القصير في أداة الشريط الجانبي.

إضافة الكود قصير في محرر WordPress الكلاسيكي القديم

إذا كنت لا تزال تستخدم المحرر الكلاسيكي القديم في WordPress ، فإليك كيفية إضافة رموز قصيرة إلى منشورات وصفحات WordPress الخاصة بك.

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

إضافة رمز قصير إلى المحرر الكلاسيكي

لا تنس حفظ التغييرات. بعد ذلك ، يمكنك معاينة منشورك وصفحتك لرؤية الكود القصير أثناء العمل.

كيفية إضافة الكود قصير في ملفات قالب وورد

من المفترض استخدام الرموز القصيرة داخل منشورات WordPress والصفحات والأدوات. ومع ذلك ، في بعض الأحيان قد ترغب في استخدام الكود قصير داخل ملف قالب WordPress.

يجعل WordPress من السهل القيام بذلك ، لكنك ستحتاج إلى تحرير ملفات قالب WordPress الخاصة بك.

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

1
<?php echo do_shortcode("[your_shortcode]"); ?>

سيبحث WordPress الآن عن الكود القصير ويعرض مخرجاته في قالب المظهر الخاص بك.

كيفية إنشاء الكود القصير المخصص الخاص بك في WordPress

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

إذا كنت مرتاحا لكتابة كود PHP ، فإليك نموذج الكود يمكنك استخدامه كقالب.

1
2
3
4
5
6
7
8
9
10
11
// function that runs when shortcode is called
function wpb_demo_shortcode() {
 
// Things that you want to do.
$message = 'Hello world!';
 
// Output needs to be return
return $message;
}
// register shortcode
add_shortcode('greeting', 'wpb_demo_shortcode');

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

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

[تحية]

سيتم تشغيل الوظيفة التي قمت بإنشائها وإظهار الإخراج المطلوب.

الآن دعونا نلقي نظرة على استخدام أكثر عملية الكود القصير. في هذا المثال ، سنعرض بانر Google AdSense داخل الكود قصير.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// The shortcode function
function wpb_demo_shortcode_2() {
 
// Advertisement code pasted inside a variable
$string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-0123456789101112"
     data-ad-slot="9876543210"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>';
 
// Ad code returned
return $string;
 
}
// Register shortcode
add_shortcode('my_ad_code', 'wpb_demo_shortcode_2');

لا تنس استبدال شفرة الإعلان بشفرة الإعلان الخاصة بك.

يمكنك الآن استخدام الكود القصير [my_ad_code] داخل منشورات WordPress والصفحات وأدوات الشريط الجانبي. سيقوم ووردبريس تلقائيا بتشغيل الوظيفة المرتبطة بالكود القصير وعرض الكود الإعلان.

الرموز القصيرة مقابل كتل غوتنبرغ

غالبا ما يسألنا المستخدمون عن الاختلافات بين الكود القصير مقابل كتل Gutenberg.

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

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

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

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

اترك تعليقاً