تشغيل رمز قصير متعدد المرات في صفحة واحدة

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

تحديات استخدام الأكواد القصيرة المتكررة

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

كيفية استخدام كود عد تنازلي متعدد

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

// Countdown Short Function
function countdown_simple($atts) {
    $attributes = shortcode_atts(array(
        'date' => '', 
    ), $atts);
    if (empty($attributes['date'])) {
        return __('Error: Please provide a valid date.');
    }
    $target_date = new DateTime($attributes['date']);
    $target_timestamp = $target_date->getTimestamp();
    return '<div id="countdown_' . uniqid() . '" data-timestamp="' . $target_timestamp . '"></div>
            <script>
                (function() {
                    var countdownContainer = document.getElementById("countdown_' . uniqid() . '");
                    var targetTime = countdownContainer.getAttribute("data-timestamp") * 1000;
                    function updateCountdown() {
                        var now = new Date().getTime();
                        var distance = targetTime - now;
                        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                        countdownContainer.innerHTML = days + " أيام " + hours + " ساعات " + minutes + " دقائق " + seconds + " ثوانٍ ";
                        if (distance < 0) {
                            clearInterval(x);
                            countdownContainer.innerHTML = "انتهت المدة";
                        }
                    }
                    var x = setInterval(updateCountdown, 1000);
                })();
            </script>';
}
// Register the shortcode for simple countdown
add_shortcode('cdown_short', 'countdown_simple');

شرح الكود الجديد

• إنشاء معرّف فريد: لقد أدخلنا uniqid() لإنشاء معرّف فريد لكل عنصر عد تنازلي، مما يضمن عدم وجود تداخل بين العناصر المختلفة.
• تحديث العداد: أضفنا برمجة جافا سكريبت لتحديث العد التنازلي بشكل ديناميكي، مما يسمح للعداد بالتفاعل مع الوقت الحالي.

كيفية الاستخدام في المحتوى

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

[cdown_short date="2025-10-01 12:00:00"]
[cdown_short date="2025-11-01 15:00:00"]

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

الخلاصة

باستخدام الكود المعدل، يمكنك الآن استخدام كود العد التنازلي عدة مرات في الصفحة بدون أية مشاكل. هذه الطريقة تحقق الهدف من جعل "Make same shortcode run multiple times on one page" واقعًا حقيقيًا. بالتالي، تستطيع إدارة الأحداث أو العروض بكفاءة، من خلال تقديم معلومات واضحة ودقيقة للمستخدمين. سواء كان لديك حدث قادم أو عرض مميز، يمكنك أن تضمن أن كل عد تنازلي يظهر بوضوح ودقة.