سرعة هذه الصفحة TTFB … LCP …
Uncategorized

تسريع Contact Form 7

Selim Koç قراءة في 1 دقائق

مفتوح المصدر · Rufo

Contact Form 7.
فقط حيث يلزم.

يزيل Rufo تلقائيًا ملفات CSS وJavaScript غير المستخدمة الخاصة بـ Contact Form 7 من كل صفحة لا تحتوي على نموذج. مجاني على WordPress.org.

المشكلة

5 ملايين موقع.
وكل صفحة فيها أبطأ.

هل تعلم أن إضافة Contact Form 7، التي ابتكرها Takayuki Miyoshi، تُستخدم في أكثر من 5 ملايين موقع WordPress؟ فهي الخيار الأول لنماذج التواصل على WordPress منذ سنوات، غنية بالميزات وسهلة الاستخدام للغاية. لكن ثمة مشكلة كبيرة حين يتعلق الأمر بالسرعة: تضيف Contact Form 7 ملفات CSS وJavaScript الخاصة بها إلى كل صفحة في موقعك، حتى لو لم يكن فيها نموذج تواصل. ورغم أن هذه الملفات ليست ضخمة، فإنها تُبطئ موقعك. وهذا أمر مهم، لا سيما والجميع يسعى إلى تسريع مواقعه.

ما يفعله Rufo

الملفات فقط حيث توجد النماذج.

/contactتحتوي على نموذج Contact Form 7
تُحمَّل ملفات CF7
/blog, /about, /shop …لا يوجد نموذج في الصفحة
أُزيلت

تلقائي. لا شيء لضبطه.

التثبيت

جاهز للعمل خلال دقيقة.

  1. سجّل الدخول إلى لوحة تحكم WordPress.
  2. افتح الإضافات من القائمة الجانبية.
  3. انقر على أضف إضافة جديدة.
  4. ابحث عن «Rufo».
  5. ثبّتها وفعّلها. هذا كل شيء.

لإلغاء التثبيت، عطّلها ثم احذفها. لا يستخدم Rufo أي قاعدة بيانات أو موارد أخرى في موقعك.

الدليل

تفضّل الكود؟ إليك طريقة العمل.

طريقتان لمنع Contact Form 7 من تحميل ملفاتها في الصفحات التي لا تحتوي على نموذج.

حسنًا، حدّدنا المشكلة. فلننتقل الآن إلى الحلول. إليك خيارين لإزالة تلك الملفات من الصفحات التي لا تحتوي على نماذج تواصل:

الخيار 1: كود PHP مخصّص

يمكنك كتابة كود PHP مخصّص وإضافته إلى ملف functions.php في قالبك. يطلب هذا الكود من WordPress عدم تحميل ملفات Contact Form 7 في الصفحات التي لا تحتوي على نماذج تواصل.

لكن مهلًا! إذا كنت تُجري تعديلات على قالب قد يُحدَّث لاحقًا، فالأفضل استخدام قالب فرعي (child theme)، حتى لا تضيع تعديلاتك عند تحديث القالب الرئيسي.

وهناك طريقتان للقيام بذلك:

الخيار 1، أ. استخدام بيانات الصفحة بدقة

إذا كنت تعرف معرّف (ID) الصفحة التي تحتوي على نموذج التواصل، فيمكنك استخدام هذا الكود. فهو يطلب من WordPress عدم تحميل ملفات Contact Form 7 إلا في الصفحة ذات المعرّف المحدد.

if ( !is_singular() && get_the_ID() != 65 ) {
        add_filter( 'wpcf7_load_js', '__return_false' ); 
        add_filter( 'wpcf7_load_css', '__return_false' );
}

إذا كانت لديك نماذج تواصل في عدة صفحات معرّفاتها 65 و99:

if ( !is_singular() && !in_array(get_the_ID(), [65,99]) ) {
        add_filter( 'wpcf7_load_js', '__return_false' ); 
        add_filter( 'wpcf7_load_css', '__return_false' );
}

إذا أردت استخدام الرابط المختصر (slug) للصفحة بدلًا من المعرّف.

if ( !is_singular() ) { 

    $page_slug = get_post_field( 'post_name', get_queried_object_id() );
    $excluded_slugs = ['example-page-slug-1', 'example-page-slug-2']; 
    
    // Add your excluded slugs here 
    if ( !in_array($page_slug, $excluded_slugs) ) { 
          add_filter( 'wpcf7_load_js', '__return_false' ); 
          add_filter( 'wpcf7_load_css', '__return_false' ); 
    } 
}

الخيار 1، ب. فحص محتوى الصفحة بحثًا عن الرمز المختصر (shortcode) لنموذج التواصل:

يتحقق هذا الكود مما إذا كان محتوى الصفحة يتضمن الرمز المختصر الخاص بـ Contact Form 7. وإن لم يجده، يمنع تحميل ملفات CSS وJavaScript في تلك الصفحة.

function globaliser_page_has_contact_form() 
     {

        global $post;

        if ( is_singular() ) 
        {
           $content = $post->post_content;   
           if ( has_shortcode( $content, 'contact-form-7' ) ) 
           {
             return true;
           }
        }
        return false;
     }


     if ( !globaliser_page_has_contact_form() ) 
     {
         add_filter( 'wpcf7_load_js', '__return_false' ); 
         add_filter( 'wpcf7_load_css', '__return_false' );
     }

الخيار 2: إضافة Rufo لـ WordPress

لا تريد التعامل مع الكود؟ لا مشكلة! يمكنك بدلًا من ذلك استخدام إضافة Rufo لـ WordPress. هذه الأداة العملية تكتشف تلقائيًا الصفحات الخالية من نماذج التواصل وتزيل منها ملفات CSS وJavaScript غير الضرورية. إنه حل أبسط وأسهل استخدامًا من كتابة كود مخصّص.

وهي تؤدي ما تؤديه الطريقة الثانية أعلاه: تزيل تلقائيًا ملفات CSS وJavaScript من الصفحات التي لا تحتوي على نماذج تواصل.

لماذا أنشأنا إضافة لهذا الغرض بدلًا من الاكتفاء بالكود؟ قد يقترح البعض تعديل إضافة Contact Form 7 مباشرة، لكن هذه ليست فكرة جيدة في عالم WordPress.

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

وإن كنت مهتمًا ببناء إضافات WordPress خاصة بك باستخدام بنية أنيقة تُعرف بـ MVC، فلدينا إضافة أخرى اسمها ATA تساعدك في ذلك. لكن تلك حكاية أخرى!

قد تكون قصة نجاحك التالية.

لديك أسئلة؟ نحن هنا لمساعدتك على اتخاذ الخطوة الصحيحة.

قصة النجاح القادمة قد تكون قصتك.

لديك أسئلة؟ نحن هنا لنساعدك على اتخاذ القرار الصحيح.