Contact Form 7 Optimize

WPCİNEklentiler, İpuçları, Wordpress Hızlandırma11 Yorum

En çok kullanılan ücretsiz iletişim formu eklentilerinden biridir Contact Form 7. Bu makaleyi yazdığımız tarihte, 66 milyondan fazla dosya indirilmiş ve 5 milyondan fazla aktif kullanıcısı mevcuttur. En popüler iletişim eklentisi olarak görmek yanlış olmaz.

Eğer bu eklenti yerine kullanılacak diğer tercihleri incelemek isterseniz, WordPress iletişim formu eklentileri konumuza göz atabilirsiniz.

Bu geniş bir kitleyle, Contact Form 7’nin kullanımını optimize etmek, önemli sayıda WordPress kullanıcısının websitesini optimize etmek gibi gözüküyor. Daha önceden bilmiyorsanız söyleyelim, bu eklenti CSS ve JavaScript dosyalarını sitenizin her bir sayfasında içerir. Bu gereksiz yüklenme hakkında konuşacağız.

Contact Form 7 Sitenizi Neden Yavaşlatır?

Her sayfada fazladan bir CSS veya JavaScript dosyası yüklenmesi sunucuya fazladan yük bindirir. İki tane ekstra  HTTP istek oluşması, sitenizin yükleme süresini olumsuz olarak etkileyebilir.

Bu CSS ve JavaScript dosyalarını yalnızca bir Form oluşturmak için Contact Form 7 eklentisini kullandığınız sayfalara yüklemek isteyebilirsiniz. Sitenizi her sayfada fazladan dosya yüklemesinden kurtaracaktır, bunun yerine bu dosyalar sadece iletişim formları olan sayfalara yüklenecektir.

Contact Form 7’yi Optimize Etme

1. Adım: CSS Dosyalarını Belirli Bir Sayfa İçin Çalıştırmak

Öncelikle, hangi sayfaların iletişim formlarına sahip olduğunu kontrol etmemiz gerekiyor. Sonra tüm diğer sayfalar için Contact Form 7 eklentisi tarafından üretilen CSS dosyasını iptal ettirmeliyiz.

Sayfanızın URL Uzantısını Bulun (örn: İletişim Sayfası)

Önce iletişim eklentisini çalıştırmak istediğiniz sayfanızın kısa ismini belirlemelisiniz. Yönetici panelinden Sayfalar sekmesine tıklayın. Daha sonra Hızlı Düzenle bağlantısına tıklayarak url uzantısını tespit edebilirsiniz.

İletişim Sayfası

Yukarıda ki örnekte olduğu gibi sayfa kısa adı iletisimTemanızın  functions.phpdosyanızın sonuna aşağıdaki kodu ekleyin.

Bu kod ile eklenti style dosyasını sadece iletişim sayfasında çağırıyoruz.

2. Adım: JavaScript Dosyalarını Belirli Bir Sayfa İçin Çalıştırmak

Aynı şekilde, JavaScript kaynağını, iletişim formları bulunan sayfalar dışındaki tüm sayfalar için iptal edeceğiz.

Temanızın  functions.phpdosyasına aşağıdaki kodu ekleyin:

Bu kod ile eklentinin js dosyasını sadece iletişim sayfasında çalışmasını sağlar. Böylece contact form 7 eklentisini optimize etmiş oluyoruz.

Birden Fazla Sayfada İletişim Formu Varsa

Bu yöntem için  is_page() fonksiyonunu kullanacağız. WordPress Codex’te daha fazla ayrıntıya ulaşabilirsiniz. Bir dizi sayfa ekleyebilirsiniz. Parametre değerini Sayfa ID, Sayfa Başlığı veya Sayfa Kısa Yazısı olarak alabilir.

Örnek kullanım: 

WP-Config Dosyasında Değişiklik Yapmak

Contact form 7 eklentisini css ve js dosyalarının yüklenmesini geciktirmek için eklenti sahipleri tarafından verilen bir ipucu. Aşağıdaki kodu wp-config.php dosyanıza eklemelisiniz. Örnek kullanımı aşağıdaki gibidir:

İlginizi Çekecek Benzer Yazılar

WordPress Arama Özelliğini Kapatma yada Sınırlandırma Bazı Wordpress siteleri tek sayfalık olurlar ya da bir kaç sayfadan olulabilirler (anasayfa, iletişim). Bu durumda web site sahipleri arama özelliğine...
WordPress Web Siteyi İnternetten Kalıcı Olarak Silmek WordPress kurulumunuzu kaldırmak, sizin internet'ten tamamen silmez. Geçmişinizi ortadan kaldırmak isteyebilirsiniz. Bu yazıda İnternet'ten bir WordPr...
WordPress Yorum Uzunluğu Sınırlandırma Wordpress yorum uzunluğu sınırlandırılabilir. WordPress yorumları, yazınıza renk katar. Bununla birlikte, belirli bir uzunluğun altındaki veya belirli...
WordPress Hızlandırma Yolları Site açılış hızını arttırma için çeşitli optimizasyon yöntemleri kullanmak gerekir. WordPress çok hafif bir sistem, ancak doğru şekilde optimize edilm...
11 Yorum “Contact Form 7 İletişim Eklentisini Hızlandırma”
  1. Oldukça muhteşem bir rehber olmuş. İlk iki kodu temanın işlev dosyasına ekledim. Sadece tek sayfada iletişim formum var peki son verdiğiniz 4 satırlık kodu da eklememiz gerekiyor mu ?

  2. Merhaba ben verdiğiniz kodları functions.php dosyasının en sonuna ekleyip kaydettim. Sayfamı ziyaret ettiğimde sitenin en üst kısmında eklediğim kodlar metin halinde görünüyordu. Nerede yanlış yapmış olabilirim?

    1. Merhaba Ömer,

      Boşluksuz yazabilirsin. Kod belli olsun diye bu şekilde kullanmıştık. Son kodu config.php içerisinde aşağıda verdiğim örnekteki alana eklerseniz daha iyi olur.

      define(‘WP_DEBUG’, false);

      SON KOD BURAYA GELECEK

      /* That’s all, stop editing! Happy blogging. */

      /** Absolute path to the WordPress directory. */
      if ( !defined(‘ABSPATH’) )
      define(‘ABSPATH’, dirname(__FILE__) . ‘/’);

      /** Sets up WordPress vars and included files. */
      require_once(ABSPATH . ‘wp-settings.php’);

  3. hocam kolay kolay yorum yazan birisi değilimdir ama bu anlatım hayat kurtardı diyebilirim es geçemiyeceğim çok teşekkür ederim 🙂

  4. hocam yazı güzel olmuş. Benim bir tavsiyem daha var jotform ile iletişim formu oluşturmak. ilgilenen arkadaşlara belki faydalı olabilir.

  5. Merhaba,

    Öncelikle anlatım için teşekkürler. Dediğiniz kodları harfiyen uyguladım.
    Fakat sormak istediğim bir şey var. Bu kodları gerekli dosyalara uygulamadan önce ” iletisim ” sayfamdan birisi bana mesaj gönderdiği zaman contact form 7 eklentisinin, mesaj gönderildi uyarısı yeşil renkte görünüyordu. Şimdi siyah yazı şeklinde görülüyor.

    Eklentinin ayarlarından değiştirmemi, güvenlik açığı oluşturabileceğinden dolayı önermiyor. Ama bu tarz değişiklikleri css veya ftp den yapabilirsiniz diye yazıyor. Nasıl başarılı mesajını tekrar yeşil renkte ve kalın olarak çevirebilirim?

    Yardımcı olursanız çok sevinirim, saygılar..

    1. Normalde böyle bir durum oluşmaması lazım. Sonuçta CSS dosyalarında bir değişiklik yapmıyoruz. Sadece bu eklentinin CSS dosyasını belirlediğiniz sayfada çalıştırıyoruz.

      Bunun yanında, renk değişikliği için CSS dosyasını kullanmanız ve FTP aracılığı göndermeniz gerekiyor. Önce “mesaj gönderildi” yazısının CSS elementini öğrenin. (Chrome’da yazıya sağ tıkladığınızda incele seçeneğinden görebilirsiniz.) Diyelim ki div değeri “.wpcf7 sending-message” olsun. Css dosyanıza gelip “.wpcf7 sending-message {color:#vermekistediginizrenk !important}” yazabilirsiniz.

      Umarız yardımcı olmuşumdur.

  6. Çok teşekkür ederim ilginiz için. Henüz başlangıç aşamasında olduğum için kodlamadan pek fazla anlamıyorum. Yanlış aklımda kalmış, ” Mesaj gönderildi ” yazısının rengi yeşil değil de çerçevesi yeşilmiş. O çerçeve kaybolmuştu ama dediğiniz kodları aynen bırakıp sadece wp-config ‘e eklediğim kodu kaldırmayı denedim eski haline tekrar geri döndü. Zaten önemli olanları sanırım functions.php deki düzenlemelerimiz.. wp-config daha az etkili çok önemli olmaz umarım wp-config ‘deki düzenlemeleri silmem..

    Tekrardan ilginiz için teşekkür ederim…

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir