كيفية الحصول على قيم التحكم المتجاوب في Elementor دون ‘selectors’

تعتبر واجهة Elementor من أشهر أدوات بناء الصفحات في WordPress، حيث توفر مجموعة واسعة من العناصر القابلة للتخصيص. ومع ذلك، قد يواجه المطورون بعض التحديات عندما يتعلق الأمر بضبط القيم المعتمدة على الاستجابة، خاصة في السيناريوهات التي يتعذر فيها استخدام طريقة ‘selectors’ => [] لضبط القيم المختلفة.

كيفية الحصول على قيم التحكم المستجيب في Elementor

عند العمل على تطوير عناصر واجهة مستخدم مخصصة في Elementor، غالبًا ما تحتاج إلى ضبط خصائص مثل وزن الخط وحجم البصرية بطريقة تستجيب لأجهزة مختلفة مثل سطح المكتب والأجهزة اللوحية والهواتف المحمولة. لكن، من المتعارف عليه أن بعض الصفات، مثل font-variation-settings، تحتاج إلى معالجة دقيقة حيث لا يمكن استخدام خصائص مثل font-weight وoptical-size بشكل مستقل.

استخدام التحكم المستجيب لضبط القيم

لإنشاء عناصر واجهة مستخدم تستجيب بشكل مثالي، يمكنك استخدام التحكّم المستجيب في Elementor. على سبيل المثال، يمكنك إضافة تحكمات مثل وزن الخط (weight) وحجم البصرية (optical size) باستخدام الأكواد التالية:

$this->add_responsive_control(
    'weight',
    [
        'type' => \Elementor\Controls_Manager::SLIDER,
        'label' => esc_html__('Weight', 'textdomain'),
        'size_units' => ['px', '%', 'em', 'rem'],
        'range' => [
            'px' => [
                'min' => 100,
                'max' => 700,
                'step' => 100,
            ],
        ],
        'devices' => ['desktop', 'tablet', 'mobile'],
        'default' => [
            'size' => 400,
            'unit' => 'px',
        ],
    ]
);

$this->add_responsive_control(
    'optical_size',
    [
        'type' => \Elementor\Controls_Manager::SLIDER,
        'label' => esc_html__('Optical Size', 'textdomain'),
        'size_units' => ['px', '%', 'em', 'rem'],
        'range' => [
            'px' => [
                'min' => 10,
                'max' => 100,
                'step' => 10,
            ],
        ],
        'devices' => ['desktop', 'tablet', 'mobile'],
        'default' => [
            'size' => 16,
            'unit' => 'px',
        ],
    ]
);

استخدام القيم لتقديم المحتوى بشكل صحيح

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

protected function render() {
    $settings = $this->get_settings_for_display();
    $weight = $settings['weight']['size'];
    $optical_size = $settings['optical_size']['size'];
    echo 'Sample Text';
}

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

الحلول الممكنة

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

خلاصة

إذا كنت تتساءل عن كيفية الحصول على قيم التحكم المستجيب في Elementor، حيث لا يمكن استخدام طريقة ‘selectors’ => []، فإن الاعتماد على التحكم المستجيب وتعديل الإعدادات بشكل مناسب يمكن أن يكون الحل المناسب. رغم أن هذه الممارسات قد تَحتاج إلى بعض التجارب والتعديلات، توخي الحذر والاهتمام بالتفاصيل سيؤديان إلى نتائج مبهرة في نهاية المطاف.

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