Tối ưu plugin contact form 7

Contact form 7 là một plugin rất nổi tiếng và được cộng đồng WordPress rất tín dụng, hiện tại plugin này đang đứng top số lượt kích hoạt nhiều nhất WordPress.

Plugin contact form 7 khiến website của bạn load chậm đi rất nhiều theo mặc định hiệu suất contact form 7 rất là tệ làm chậm website của bạn đi rất nhiều, chính vì vậy mình chia sẻ bài viết này để hướng dẫn bạn tối ưu lại plugin contact form 7 giúp website của bạn cải thiện tốc độ load website hơn.

Contact form 7 có một số tính năng mà người dùng ít dùng đến nó tác động rất lớn đến tốc độ load website của bạn, có một sự thật rất khó chịu là một số trang không có sử dụng tính năng gì của plugin này nhưng nó vẫn cứ load ở khắp nơi. Mình sẽ hướng dẫn bạn giải quyết được vấn đề đó để tăng tốc load website của bạn.

Sau đây mình sẽ hướng dẫn mọi người cách tối ưu plugin contact form 7.

Tắt tính năng refill

Plugin này tích hợp gọi ajax reset captcha nó tự động gọi file refill.

Refill là một tính năng bảo mật reset lại captcha nếu website của bạn đang sử dụng cache html page.

Nhiều người không sử dụng mã captcha nhưng nó vẫn cứ gọi ajax, nếu không sửa lại plugin này thì đúng là rất lãng phí.

Bước 1: Vào thư mục plugin: /wp-content/plugins/contact-form-7/includes tìm đến file : controller.php

Bước 2: Tìm và xóa dòng này đi để tăng tốc độ website

if ( defined( 'WP_CACHE' ) && WP_CACHE ) {
$wpcf7['cached'] = 1;
}

Dòng này mục đích là để xóa cache recaptcha , nếu không dùng captcha thì hãy xóa nó ngay đi nhé.

Lưu ý khi sửa đoạn này không nên cập nhật plugin, nếu cập nhật nó sẽ bị mất và bạn phải làm lại nhé.

hoặc cách này sẽ tốt hơn.

bạn cho đoạn code này vào file functions.php

function script_init_xoa_refill() {
    echo '<script>
wpcf7.cached = 0;
    </script>';

}

add_action( 'wp_footer', 'script_init_xoa_refill',99999 );

Tải điều kiện file css và javascript plugin contact form 7

add_filter( 'wpcf7_load_js', '__return_false' ); // xoa file javascript cua contact form 7
add_filter( 'wpcf7_load_css', '__return_false' ); // xoa file css cua contact form 7
function contact_form_7_load_file_wp_tang_toc($content){
	global $post;
	$post_content = $post->post_content;
	if ( has_shortcode( $post_content, 'contact-form-7' ) ) {
	if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {wpcf7_enqueue_scripts();} // kich hoat dieu kien lai javascript
	if ( function_exists( 'wpcf7_enqueue_styles' ) ) {wpcf7_enqueue_styles();} // kich hoat dieu kien lai css
	}
	return $content;
}
add_action( 'the_content', 'contact_form_7_load_file_wp_tang_toc',9 );

Bạn chỉ cần cho đoạn code này vào file functions.php

Mục đích đoạn code này là để tải điều kiện chính xác những trang nào bạn có sử dụng from plugin contact from 7 thì mới có thể load file javascript và css, bình thường thì plugin này tải file css và javascript ở khắp nơi trên website của bạn dù bạn có dùng hay không thì nó vẫn cứ load.

Mục đích đoạn code này là để tải điều kiện giúp bạn tăng tốc độ load website.

Bật tắt điều kiện plugin contact form 7 sử dụng mu-plugin

mu-plugin là một kỹ thuật nâng cao và mình thấy rất tuyệt vời.

WordPress có tích hợp sẵn tính năng mu-plugin tuy nhiên những người dùng cơ bản thì vẫn chưa biết và sử dụng được sử mạnh của nó.

Mình sẽ chia sẻ kỹ thuât sử dụng mu-plugin để bật tắt điều kiện plugin.

Contact form 7 dùng kỹ thuật này chỉ dành cho những bạn sử dụng chỉ một hoặc hai trang trên website mà thôi, tuy nhiên contact form 7 thì nó load shortcode php ở khắp mọi nơi kỹ thuật trên mình mới hướng dẫn bạn cách tối ưu css và javascript còn php thì chưa.

Bạn chỉ cần làm kỹ thuật này là những kỹ thuật tối ưu css hay javascript kia bạn sẽ bỏ qua và không cần thiết nữa, chỉ cần làm cái này là tối ưu được ngay.

Giờ chúng ta bắt đầu:

Bước một chúng ta cần tạo một plugin đưa vào thư mục /wp-content/mu-plugins/ten-file.php

Nếu bạn chưa bao giờ sử dụng mu-plugin thì bạn vào thư mục /wp-content/ xong tạo một tên thư mục là mu-plugins là ok ( nhớ gõ chính xác từng ký tự nhé thì mới chạy được).

Giờ chúng ta sử lý tạo một file là ten-file.php bạn thích thay đổi tên là gì, mình chọn file là ten-file.php

Giờ chúng ta một file php, bạn có thể sử dụng bất cứ trình soản thỏa nào cũng được, mình thì thường sử dụng notepad ++

<?php
/**
* Plugin Name: bật tắt điều kiện plugin contact form 7
* Plugin URI: https://wptangtoc.com
* Description: bật tắt điều kiện plugin contact form 7 hướng dẫn
* Version: 1.0
* Author: Gia Tuấn
* Author URI: https://wptangtoc.com
* License: GPLv2 or later
*/

$yeu_cau_url = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );

$is_admin = strpos( $yeu_cau_url, '/wp-admin/' );

if( false === $is_admin ){
	add_filter( 'option_active_plugins', function( $plugins ){

		global $yeu_cau_url;

		$is_dang_ky = strpos( $yeu_cau_url, '/gia-tuan/' );
		$is_lien_he = strpos( $yeu_cau_url, '/lien-he/' );

		$myplugin = "contact-form-7/wp-contact-form-7.php";


		$k = array_search( $myplugin, $plugins );

		if( false !== $k && false === $is_dang_ky && false === $is_lien_he ){
			unset( $plugins[$k] );
		}

		return $plugins;

	} );
}

Mình code ví dụ là sử dụng chỉ chạy trên 2 url là /gia-tuan/ và /lien-he/ bạn hãy thay chính xác url mà bạn muốn tải điều kiện nhé.

Xong rồi xuất một file dạng php rồi đưa vào trong thư mục /wp-content/mu-plugins/

Giả sử mình xuất tên file là ten-file.php rồi đưa vào trong /wp-content/mu-plugins/ten-file.php như vậy là xong.

Ghi chú: bạn sử dụng mu-plugin thì không thể sử dụng được câu lệnh điều kiện php của WordPress như is_shop hay is_checkout… bạn chỉ có thể hàm điều kiện theo từng url, vì mu-plugin nó thứ tự tải ưu tiên sớm hơn plugin và sớm hơn themes functions, kỹ thuật này chỉ dành cho những ai sử dụng contact-form 7 với ít trang thì rất tốt còn sử dụng nhiều muốn tải điều kiện câu lệnh thì rất khó.

Nếu bạn muốn: tìm hiểu về mu-plugin

Nếu bạn muốn đo lường hiệu quả của mu-plugin bạn hãy sử dụng plugin p3 (plugin performance profiler) để kiểm tra xem nó hiệu quả đến cỡ nào.

Nếu bạn sử dụng mu-plugin thành công thì bạn không cần phải sử dụng kỹ tải điều kiện file javascript và css của plugin contact from 7 nữa nhé.

Tuy nhiên nếu website của bạn có nhiều trang sử dụng plugin này thì rất khó để có thể sử dụng mu-plugin như vậy bạn hãy sử dụng kỹ thuật tải điều kiện mình có chia sẻ ở bên trên.

Bạn không nên thiết kế website giao diện của bann đặt các form của plugin contact form 7 ở footer đặt toàn bộ website của bạn như vậy làm cho công việc tối ưu trở lên rất khó khăn.

Chúc bạn thành công và tận hưởng thành quả!!