هل سمعت يومًا عن مصطلح الكود القصير في ووردبريس؟ إذا كنت تعمل على إدارة موقع ويب باستخدام هذه المنصة الشهيرة، فمن المؤكد أن هذه الأداة القوية قد مرت عليك. الكود القصير، أو Shortcode، هو ميزة فريدة في ووردبريس تسمح لك بإدراج وظائف ديناميكية ومعقدة بسهولة وفعالية داخل المحتوى دون الحاجة إلى كتابة أي كود برمجي معقد. ببساطة، يمكن للكود القصير تحويل نص بسيط إلى عنصر تفاعلي أو تصميم متقدم داخل موقعك بضغطة زر. في هذه المقالة، سنتناول بالتفصيل ما هو الكود القصير في ووردبريس، وكيف يمكنك استخدامه بشكل فعال لتحقيق أقصى استفادة من موقعك، مع نصائح وأمثلة عملية لمساعدتك على بدء رحلتك مع هذه الأداة الرائعة.
جدول المحتويات:
ماهو الكود القصير (Shortcodes) في ووردبريس؟
الكود القصير أو "Shortcode" هو ميزة قوية ومرنة تم إدخالها في ووردبريس منذ الإصدار 2.5. يتيح الكود القصير للمستخدمين إدراج وظائف ديناميكية ومعقدة في المحتوى بسهولة باستخدام نص بسيط محاط بأقواس مربعة. بفضل هذه الأداة، يمكن لأي شخص حتى بدون معرفة برمجية تنفيذ مهام معقدة، مثل إدراج المعارض أو الفيديوهات أو إنشاء تخطيطات متعددة الأعمدة، وذلك باستخدام شيفرة مختصرة بسيطة بدلًا من كتابة أكواد برمجية مطولة.
كيفية عمل الكود القصير
عندما يقوم المستخدم بإدراج كود قصير داخل المحتوى، يعمل ووردبريس على تفسير هذا الكود واستبداله بوظيفة أو مكون معين. يتم ذلك عبر آلية داخلية تقوم بتحليل النص المحتوي على الكودات القصيرة، وتحويلها إلى محتوى ديناميكي قبل عرض الصفحة النهائية. على سبيل المثال، عند إدخال الكود القصير ، يقوم ووردبريس بتحويله إلى معرض صور مكون من الصور المحددة في قاعدة البيانات، وكل ذلك دون تدخل يدوي من المستخدم.
أنواع الكودات القصيرة
هناك نوعان رئيسيان من الكودات القصيرة التي يمكنك استخدامها في ووردبريس:
الكودات القصيرة المدمجة في ووردبريس:
هذه الكودات تأتي مثبتة مسبقًا مع ووردبريس، وتغطي مجموعة واسعة من الوظائف. من الأمثلة الشائعة:
[gallery]يعرض معرض صور.
[audio]يقوم بتضمين ملف صوتي.
[video]يقوم بتضمين ملف فيديو.
[embed]يسمح بتضمين محتوى من مواقع أخرى مثل YouTube أو Twitter.
الكودات القصيرة الخاصة بالإضافات:
هناك العديد من الإضافات (plugins) في ووردبريس التي تعتمد بشكل كبير على الأكواد القصيرة لتوفير ميزات متقدمة وسهلة الاستخدام. إليك بعض الأمثلة الشهيرة:
1. Contact Form 7
- وصف: إضافة لإنشاء نماذج الاتصال بسهولة.
- الكود القصير: بعد إنشاء نموذج اتصال، توفر لك الإضافة كودًا قصيرًا لإدراج النموذج في أي صفحة أو مقالة. مثال:
[contact-form-7 id="1234" title="Contact form 1"]2. WooCommerce
- وصف: إضافة قوية لتحويل موقع ووردبريس إلى متجر إلكتروني كامل.
- الأكواد القصيرة الشائعة:
[products]لعرض المنتجات على صفحة معينة.
[add_to_cart id="123"]لإظهار زر "أضف إلى السلة" لمنتج معين.
[woocommerce_cart]لعرض سلة التسوق.
[woocommerce_checkout]لعرض صفحة الدفع.
3. Slider Revolution
- وصف: إضافة لإنشاء عروض شرائح متقدمة وتفاعلية.
- الكود القصير: بعد تصميم شريحة عرض، يمكنك إدراجها في أي صفحة باستخدام كود قصير مثل
[rev_slider alias="slider1"]4. WPBakery Page Builder (Visual Composer)
- وصف: أداة بناء صفحات تعتمد على واجهة السحب والإفلات.
- الأكواد القصيرة: كل عنصر يتم إضافته إلى الصفحة باستخدام واجهة السحب والإفلات يمكن إدراجه أيضًا باستخدام أكواد قصيرة، مثل
[vc_row]لإنشاء صف جديد أو
[vc_column]لإنشاء عمود جديد.
5. Shortcodes Ultimate
- وصف: إضافة توفر مجموعة ضخمة من الأكواد القصيرة الجاهزة للاستخدام، مثل الأزرار، الأعمدة، والأيقونات.
- الأكواد القصيرة الشائعة:
[button]لإنشاء أزرار قابلة للنقر.
[accordion]لإضافة عناصر أكورديون تفاعلية.
[tabs]لإنشاء تبويبات متعددة.
6. TablePress
- وصف: إضافة لإنشاء وإدارة الجداول بسهولة.
- الكود القصير: بعد إنشاء جدول، يمكنك إدراجه في أي مقالة أو صفحة باستخدام كود قصير مثل
[table id=1 /]7. Envira Gallery
- وصف: إضافة لإنشاء معارض صور تفاعلية وجميلة.
- الكود القصير: بعد تصميم معرض الصور، يمكنك عرضه في أي صفحة أو مقالة باستخدام كود مثل
[envira-gallery id="123"]8. bbPress
- وصف: إضافة لإنشاء منتدى تفاعلي داخل موقع ووردبريس.
- الأكواد القصيرة الشائعة:
[bbp-forum-index]لعرض فهرس المنتدى.
[bbp-topic-index]لعرض قائمة بالمواضيع الأخيرة.
[bbp-single-topic id=$topic_id]لعرض موضوع معين.
9. MailPoet
- وصف: إضافة لإدارة حملات البريد الإلكتروني وإنشاء قوائم اشتراك.
- الكود القصير: يمكنك إدراج نموذج اشتراك في النشرة البريدية باستخدام كود قصير مثل
[mailpoet_form id="1"]10. NextGEN Gallery
- وصف: إضافة لإنشاء معارض صور متقدمة.
- الأكواد القصيرة: يمكنك استخدام أكواد قصيرة لعرض معارض الصور في أي مكان على الموقع مثل
[ngg_images gallery_ids="1"]كيفية استخدام الكود القصير
استخدام الكود القصير في ووردبريس سهل للغاية. يمكن إضافته داخل محتوى المقالات، الصفحات، وحتى في الأدوات النصية. إليك كيفية استخدام الكود القصير في ووردبريس:
إدراج الكود القصير في مقال أو صفحة:
يمكنك ببساطة كتابة الكود القصير مباشرةً في المحرر الكلاسيكي للمقالات أو الصفحات أو عبر استخدام مكون "كود قصير" في محرر Gutenberg.
إدراج الكود القصير في الشريط الجانبي:
لإدراج كود قصير (Shortcode) في الشريط الجانبي (Sidebar) لموقع ووردبريس، يمكنك استخدام ويدجت كود قصير.
- انتقل إلى لوحة تحكم ووردبريس.
- من القائمة الجانبية، اذهب إلى "المظهر" > "ودجات" (Appearance > Widgets).
- اختر الشريط الجانبي (Sidebar) الذي تريد إضافة الكود القصير فيه. هذا قد يكون "Sidebar" الافتراضي أو أي شريط جانبي آخر يعتمد على تصميم موقعك.
- ابحث عن ودجت "كود قصير"، ثم قم بسحبه إلى منطقة الشريط الجانبي.
- اكتب أو ألصق الكود القصير الذي تريد استخدامه.
- بعد إدراج الكود القصير، اضغط على زر "حفظ" (Save).
إدراج الكود القصير في ملفات القالب:
إدراج الكود القصير في ملفات القالب في ووردبريس يمكن أن يكون مفيدًا عندما ترغب في استخدام كود قصير داخل ملفات القالب (مثل header.php، footer.php، أو page.php) بدلًا من إدراجه في المحتوى عبر المحرر المرئي أو النصي. للقيام بذلك، عليك استخدام دالة do_shortcode في ملفات القالب.
- انتقل إلى لوحة تحكم ووردبريس.
- اذهب إلى "المظهر" > "محرر القوالب" (Editor) أو استخدم محرر ملفات خارجية.
- اختر الملف الذي تريد إدراج الكود القصير فيه (مثل header.php أو single.php).
- استخدم دالة do_shortcode لتضمين الكود القصير في الملف. هذه الدالة تقوم بتنفيذ الكود القصير وإظهار النتيجة مباشرة في الموقع.
مثال: إذا كان لديك كود قصير مثل [current_year] لعرض العام الحالي، يمكنك إدراجه كالتالي:
<?php echo do_shortcode('[current_year]'); ?>
مثال آخر: إذا كنت تستخدم إضافة مثل Contact Form 7، وأردت إدراج نموذج الاتصال في ملف القالب، يمكنك فعل ذلك بهذه الطريقة:
<?php echo do_shortcode('[contact-form-7 id="1234" title="Contact form 1"]'); ?>تخصيص الكود القصير باستخدام المعلمات:
يمكن تخصيص الكود القصير باستخدام المعلمات (Attributes) لتحديد خيارات إضافية. على سبيل المثال، لتخصيص حجم الصور في معرض الصور:
[gallery ids="1,2,3,4" size="medium"]هنا، يتم تحديد حجم الصور ليكون "متوسط".
إنشاء كود قصير خاص بك
للمستخدمين المتقدمين أو المطورين، يمكن إنشاء كودات قصيرة مخصصة باستخدام PHP. يمكن كتابة كود قصير مخصص في ملف functions.php الخاص بالقالب. إليك مثالًا على كيفية إنشاء كود قصير يعرض رسالة ترحيبية مخصصة:
function welcome_message_shortcode($atts) {
$atts = shortcode_atts(
array(
'name' => 'ضيف',
),
$atts,
'welcome_message'
);
return "<h2>مرحبًا بك، " . esc_html($atts['name']) . "!</h2>";
}
add_shortcode('welcome_message', 'welcome_message_shortcode');بمجرد إضافة هذا الكود، يمكنك استخدام الكود القصير التالي:
[welcome_message name="أحمد"]في أي مكان على موقعك لعرض رسالة الترحيب "مرحبًا بك، أحمد!".
أفضل الممارسات لاستخدام الكود القصير بشكل فعال
لضمان أن موقعك يعمل بسلاسة ويظل سهل الصيانة، هنا بعض أفضل الممارسات التي يجب اتباعها عند استخدام الكودات القصيرة:
- استخدام الكودات القصيرة بحذر:
تجنب الإفراط في استخدام الكودات القصيرة في صفحة واحدة لأن ذلك قد يؤثر على أداء الصفحة ويبطئ من سرعة تحميلها. - تحسين الأداء:
تأكد من أن الكودات القصيرة التي تستخدمها لا تؤدي إلى تحميل إضافي غير ضروري على الخادم. يمكنك استخدام أدوات مثل Query Monitor لتحليل أداء الكودات القصيرة واكتشاف المشكلات المحتملة. - التحقق من التوافق:
مع كل تحديث لووردبريس أو الإضافات، تحقق من أن الكودات القصيرة تعمل بشكل صحيح ولا تسبب تعارضات. - توثيق الكودات القصيرة:
إذا كنت تستخدم كودات قصيرة مخصصة، قم بتوثيقها جيدًا حتى يتمكن الآخرون من فهم كيفية استخدامها أو تعديلها إذا لزم الأمر.
أمثلة عملية على استخدام الكود القصير
إليك بعض الأمثلة العملية على كيفية استخدام الكود القصير لتحقيق وظائف شائعة في ووردبريس:
- طباعة العام الحالي:
لإنشاء كود قصير في ووردبريس يقوم بطباعة العام الحالي، يمكنك إضافة الكود التالي إلى ملف functions.php الخاص بقالبك:
function current_year_shortcode() {
return date('Y');
}
add_shortcode('current_year', 'current_year_shortcode');بعد إضافة هذا الكود إلى ملف functions.php، يمكنك استخدام الكود القصير
[current_year]في أي مكان داخل مقالاتك أو صفحاتك، وسيتم استبداله تلقائيًا بالعام الحالي. على سبيل المثال، إذا كنت تستخدمه في عام 2024، فسيظهر النص "2024" في المكان الذي وضعت فيه الكود القصير.
- إضافة زر قابل للنقر:
لإنشاء زر قابل للنقر يمكن إدراجه في المحتوى، يمكنك إضافة الكود التالي إلى ملف functions.php الخاص بقالبك:
function custom_button_shortcode($atts) {
$atts = shortcode_atts(
array(
'url' => '#',
'text' => 'اضغط هنا',
'color' => 'blue',
),
$atts,
'button'
);
return '<a href="' . esc_url($atts['url']) . '" style="color:' . esc_attr($atts['color']) . ';">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('button', 'custom_button_shortcode');يمكنك استخدام الكود القصير
[button url="https://example.com" text="تعرف أكثر" color="green"]لإنشاء زر أخضر يحمل نص "تعرف أكثر".
- تضمين فيديو من YouTube:
يمكنك استخدام الكود القصير لتضمين فيديو من YouTube مباشرة في الصفحة أو المقالة:
[embed]https://www.youtube.com/watch?v=XXXXXXX[/embed]هذا الكود القصير سيسمح لك بتضمين الفيديو بطريقة نظيفة ودون الحاجة إلى نسخ كود التضمين المعقد من YouTube.
خاتمة
الكود القصير هو أداة لا غنى عنها في ووردبريس، إذ يتيح لك تحقيق وظائف متقدمة بسرعة وسهولة. سواء كنت مطورًا محترفًا أو مستخدمًا مبتدئًا، يمكنك الاستفادة من الكودات القصيرة لتحسين تجربة المستخدم وتبسيط عملية إدارة المحتوى. تذكر دائمًا أن تتبع أفضل الممارسات للحفاظ على أداء موقعك وفعالية الكودات القصيرة التي تستخدمها. إذا كان لديك أي استفسار، لا تتردد في التواصل معنا وطلب المساعدة.
