Contact Form 7 Dosyalarını Sadece İlgili Sayfaya Yükleme

Contact Form 7 (CF7), WordPress ekosisteminin en popüler ve en esnek iletişim formu eklentilerinden biridir. Ücretsiz olması, hafif çalışması, özel CSS ile kolayca özelleştirilebilmesi ve kapsamlı dokümantasyon sunması sayesinde milyonlarca site tarafından tercih edilir. Bununla birlikte CF7’nin göz ardı edilmemesi gereken bir performans eksisi bulunmaktadır: Eklenti, ihtiyaç duyulmadığı hâlde tüm JavaScript ve CSS dosyalarını site genelindeki tüm sayfalara otomatik olarak yükler. Bu gereksiz kaynak tüketimi; sayfa boyutunu şişirir, istek sayısını artırır ve site hızını olumsuz etkileyebilir. Bu kılavuzda, İletişim Formu dosyalarını sadece gerekli sayfalara yüklemenin basit bir yolunu göstereceğiz.

CF7 Dosyalarının Tüm Sayfalara Yüklenmesini Engelleme

Contact Form 7 komut dosyalarının yalnızca form içeren sayfaya/sayfalara yüklenmesi için deneyebileceğiniz en iyi yöntem functions.php dosyanıza basit bir kod eklemektir. Aşağıda gerekli tüm adımları ayrıntılı olarak bulabilirsiniz:

• Öncelikle, Contact Form 7 css ve js dosyalarının tüm sayfalardan kaldırılması ve tekrar yüklenmesini önlemek için temanızın functions.php dosyasına aşağıdaki kodu ekleyin (Functions.php’yi WordPress Yönetici alanında Görünüm > Düzenleyici‘ye giderek bulabilirsiniz):

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

• Şimdi, İletişim Formu 7 dosyalarını form içeren belirli sayfalara yükleyeceğiz. Tek yapmamız gereken CF7 eklenti dosyalarının yüklenmesini istediğiniz sayfaları belirleyip aşağıdaki kod üzerinde gerekli düzenlemeyi yapmak.
• Kullandığınız tek form iletişim sayfasındaysa, aşağıdaki kodu daha önce eklediğiniz kodların (yukarıdaki kodlar) hemen altına ekleyin:

add_action('wp_enqueue_scripts', 'load_wpcf7_scripts');
function load_wpcf7_scripts() {
  if ( is_page('iletisim') ) {
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
      wpcf7_enqueue_scripts();
    }
    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
      wpcf7_enqueue_styles();
    }
  }
}

• Turuncu renkle vurgulanan kısım form içeren sayfamız. Yukarıdaki kod parçacığı, WordPress’e, İletişim Formu 7 komut dosyalarını yalnızca iletişim sayfasına yüklemesini söylüyor. Ancak siz formunuzu hangi sayfaya eklediyseniz o sayfanın ismini girmelisiniz.
• Sitenizde birden çok iletişim formunuz varsa, is_page() işleviyle bir dizi kullanarak dosyaları bu sayfalara yükleyebilirsiniz. Yani yukarıdaki is_page('iletisim') ) satırı yerine aşağıdaki satırı ekleyip sayfa isimlerini ihtiyacınıza göre düzenleyin:

is_page( array( 'iletisim', 'hakkimizda', 'teklif-al') );

• Dizi işlevi içinde farklı sayfaları hedeflerken, gönderilerin, sayfaların ve kimliklerin herhangi bir kombinasyonunu kullanabilirsiniz. Örneğin, sayfa isimleri yerine sayfa ID’sini ve hatta iletişim formu eklediğiniz bir yazının ID numarasını da ekleyebilirsiniz.
• İşiniz bittiğinde değişiklikleri kaydetmeyi unutmayın.
• Yukarıdaki işlemin ardından, web siteniz artık yalnızca gerekli sayfalarda Contact Form 7 dosyalarını yükleyecek ve siteniz biraz daha hızlanmış olacak.

Shortcode Kontrolü ile Dinamik Yöntem

Eğer iletişim formunu kullandığınız sayfalar zamanla değişebiliyorsa, sayfa içeriğinde form olup olmadığını kontrol etmek çok daha verimli olur. Bunun için sayfa içinde contact-form-7 shortcode’u geçiyorsa, ilgili stil ve JavaScript dosyalarının yüklenmesini sağlayan basit bir kod kullanabiliriz:

function load_cf7_only_if_shortcode_exists() {
    global $post;
    if (is_singular() && has_shortcode($post->post_content, 'contact-form-7')) {
        wp_enqueue_script('contact-form-7');
        wp_enqueue_style('contact-form-7');
    }
}
add_action('wp_enqueue_scripts', 'load_cf7_only_if_shortcode_exists');

• Bu fonksiyon sayesinde, içerikte gerçekten bir contact-form-7 shortcode’u varsa Contact Form 7’nin stil ve script dosyaları yalnızca o zaman yüklenir. Yani form içermeyen sayfalarda bu dosyalar boşuna çağrılmaz. Böylece form sayfalarını tek tek belirtmek yerine, bu fonksiyonla işlemi otomatikleştirebiliriz. Bu yöntem, özellikle çok sayfalı sitelerde önemli bir performans katkısı sağlar.

NOT: Tema dosyalarını direkt düzenlemek yerine, bir alt tema (child theme) veya code snippets gibi bir eklenti kullanmanızı öneririz. Aksi durumda, temanızı güncellediğinizde eklediğiniz tüm kodlar ve yaptığınız değişiklikler silinebilir. Ayrıca bkz: WordPress Siteye İletişim Formu Nasıl Eklenir?