Contact Form 7: Statik JS ve CSS Dosyalarını Kaldırma Yöntemleri

Takayuki Miyoshi tarafından geliştirilen Contact Form 7 eklentisinin, 5 milyondan fazla WordPress web sitesinde kullanıldığını biliyor muydunuz? Yıllardır WordPress’teki iletişim formu eklentileri içinde en çok tercih edilen seçenek olmuştur. Birçok özellikle donatılmıştır ve kullanımı oldukça kolaydır. Ancak hız konusunda büyük bir sorun var. Contact Form 7, her sayfada iletişim formu olmasa bile web sitenizin her sayfasına kendi CSS ve JavaScript dosyalarını ekler. Bu dosyalar büyük olmasa da sitenizi yavaşlatırlar. Bu, özellikle herkesin web sitelerini hızlandırmaya çalıştığı bir dönemde önemli bir konu.

Tamam, sorunu belirledik. Şimdi çözümlerden bahsedelim. İletişim formu olmayan sayfalardan bu dosyaları kaldırmak için iki seçenek şunlardır:

Seçenek 1: Özel PHP Kodu

Tema dosyanızın `functions.php` dosyasına özel bazı PHP kodları ekleyebilirsiniz. Bu kod, WordPress’e iletişim formu bulunmayan sayfalarda Contact Form 7 dosyalarını yüklememesini söyleyecektir.

Ancak dikkat edin! Eğer daha sonra güncellenebilecek bir tema üzerinde değişiklik yapıyorsanız, bir alt tema (child theme) kullanmak en iyisidir. Bu şekilde, ana tema güncellendiğinde değişiklikleriniz kaybolmaz.

Bunu yapmanın iki yolu vardır:

Seçenek 1 – A. Sayfanın tam bilgilerini kullanın

Eğer iletişim formu bulunan sayfanın ID’sini biliyorsanız, bu kodu kullanabilirsiniz. Bu kod, WordPress’e belirtilen ID’ye sahip sayfada Contact Form 7 dosyalarını yüklememesi gerektiğini söyler.

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

65 ve 99 ID’lerine sahip birden fazla sayfada iletişim formunuz varsa:

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

Sayfanın ID’si yerine URL kısa ismini (slug) kullanmak isterseniz.

Copied!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' ); 
    } 
}
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' ); 
    } 
}

Seçenek 1 – B. Sayfanın içeriğini iletişim formunun kısa kodu için taramak:

Bu kod, bir sayfanın içeriğinde Contact Form 7’nin kısa kodunun olup olmadığını kontrol eder. Eğer kısa kodu bulamazsa, o sayfada CSS ve JavaScript dosyalarının yüklenmesini durdurur.

Copied!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' );
     }
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' );
     }

Seçenek 2: Rufo WordPress Eklentisi

Kodla uğraşmak istemiyor musunuz? Sorun değil! Alternatif olarak, Rufo WordPress eklentisini kullanabilirsiniz. Bu kullanışlı araç, iletişim formu olmayan sayfaları otomatik olarak tespit eder ve gereksiz CSS ve JavaScript dosyalarını kaldırır. Bu, özel kod yazmaya kıyasla daha basit ve kullanıcı dostu bir çözümdür.

Yukarıdaki ikinci yöntemle aynı işlemi gerçekleştirir. İletişim formu olmayan sayfalardan CSS ve JavaScript dosyalarını otomatik olarak kaldırır.

Bunun için neden sadece kod kullanmak yerine bir eklenti yaptık? Bu eklentiyi, özellikle teknoloji bilgisi az olanlar için işleri kolaylaştırmak amacıyla yaptık.

Ve eğer MVC mimarisini kullanarak kendi WordPress eklentilerinizi yapmakla ilgileniyorsanız, bunun için yardımcı olabilecek ATA adında başka bir eklentimiz var. Ama bu başka bir blog konusu!