Sử dụng JavaScript trong widget WordPress

Widget sẽ giúp bạn hiển thị nội dung linh hoạt hơn trên blog WordPress, viết widget cho WordPress cũng không phải là quá khó, tuy nhiên trong quá trình viết widget thì bạn nên lưu ý tới một vài vấn đề nhỏ để widget được hoạt động tốt hơn.

Viết code JavaScript cho WordPress

Trong bài viết trước mình đã hướng dẫn cho các bạn cách tạo một widget đơn giản cho WordPress, nếu widget của bạn chỉ sử dụng HTML, PHP và CSS không thôi thì nội dung bài viết này có thể sẽ không hữu ích đối với bạn, ngược lại nếu trên widget của bạn có sử dụng JavaScript thì rất có thể bài này sẽ rất tuyệt vời đối với bạn.

Mình không đi chuyên sâu viết hướng dẫn sử dụng JavaScript như thế nào, bài viết này mình chỉ tập trung đến các hàm bạn có thể sử dụng để cập nhật lại code JavaScript mỗi khi widget được kéo thả vào sidebar hoặc cập nhật widget, hoặc di chuyển sắp xếp vị trí các widget trên sidebar.

// Su kien khi widget duoc luu lai
$(document).on('widget-updated', function(event, widget) {
	var widget_id = widget[0].id; // Lay ID cua widget
	// Kiem tra xem co phai ID la widget cua ban hay khong
	if(widget_id && widget_id.match('hocwp')) {
		var $widget = $(this);
		if(widget_id.match('hocwp_widget_banner')) {
			// Thuc hien code neu widget id base la hocwp_widget_banner
		} else if(widget_id.match('hocwp_widget_post')) {
			// Thuc hien code neu widget id base la hocwp_widget_post
		}
	}
});

Sự kiện widget-updated sẽ được gọi khi widget được cập nhật. Trong hàm bên trên bạn sẽ kiểm tra xem widget id có phải là widget của bạn hay không, nếu là widget của bạn thì kiểm tra xem nó là widget nào, sau cùng là thực thi code cho widget đó.

$('div.widgets-sortables').bind('sortreceive', function(event, ui) {
	var widget_id = $(ui.item).attr('id');
	if(widget_id && widget_id.match('hocwp')) {
		var $widget = $(ui.item);
		if(widget_id.match('hocwp_widget_banner')) {
			
		} else if(widget_id.match('hocwp_widget_post')) {
			
		}
	}
});

Sự kiện sortreceive sẽ được gọi khi widget được kéo từ ngoài và thả vào bên trong sidebar, chỉ áp dụng cho widget mới (chưa tồn tại trên sidebar) kéo thả vào sidebar của bạn, cách thức kiểm tra cũng tương tự như sự kiện widget-updated.

$('div.widgets-sortables').bind('sortstop', function(event, ui) {
	var widget_id = $(ui.item).attr('id');
	if(widget_id && widget_id.match('hocwp')) {
		var $widget = $(ui.item);
		if(widget_id.match('hocwp_widget_post')) {
			
		}
	}
});

Sự kiện sortstop sẽ được gọi khi bạn di chuyển một widget bất kỳ, không quan trọng là bạn kéo widget vào sidebar hay kéo thả widget từ sidebar ra ngoài, thậm chí khi bạn kéo di chuyển các widget hoặc kéo lên đặt xuộng thì sự kiện này cũng được gọi. Sự kiện sortstop khác với sortreceive, sự kiện sortstop là áp dụng cho mọi hành động kéo thả widget, còn sự kiện sortreceive là bạn chỉ sử dụng được cho widget mới được kéo từ ngoài vào sidebar.

$(document).ajaxSuccess(function(e, xhr, settings) {
	if(settings.data.search('action=save-widget') != -1) {
		if(settings.data.search('hocwp') != -1) {
			var id_base = hocwp.getParamByName(settings.data, 'id_base'),
				$widget = $(this);
			if('hocwp_widget_post' == id_base) {
				
			}
		}
	}
});

Một hàm nữa cũng rất là quan trọng khi bạn viết widget cho WordPress có sử dụng JavaScript, đó chính là hàm ajaxSuccess. Hầu hết các thứ bạn quản lý trong admin WordPress đều thông qua xử lý AJAX, đối với widget cũng không phải là ngoại lệ.

Tự tạo widget đơn giản cho WordPress

Hàm ajaxSuccess sẽ được thực thi khi AJAX được gọi thành công, bạn để ý sau khi bạn kéo và thả widget vào sidebar, hệ thống sẽ thực thi lệnh tạo và lưu thông tin thông qua AJAX, sau đó bạn mới bắt đầu điền thông tin tùy chỉnh và lưu lại các giá trị. Bạn sẽ gọi các code JavaScript chỗ này để thực thi một lệnh nào đó nếu tất các các phương thức bên trên đều không hoạt động.

Qua bài viết hướng dẫn sử dụng JavaScript trong khâu viết widget cho WordPress này, mình hy vọng rằng nó có thể giúp ích được cho các bạn. Hy vọng rằng bạn sẽ tạo ra được những widget hay và ý nghĩa, chúc bạn thành công.