Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Tăng tốc độ WordPress
    • Tối ưu website WordPress
    • Thiết kế website WordPress
    • Viết plugin WordPress
    • Sửa lỗi nâng cấp website
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Programming » PHP » Mẹo lấy kích thước trình duyệt bằng PHP

Mẹo lấy kích thước trình duyệt bằng PHP

Thứ Hai, 29/09/2014 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Trong khi bạn đang thiết kế giao diện web yêu cầu hiển thị phù hợp với nhiều kích thước màn hình khác nhau. Cách đầu tiên chúng ta nghĩ tới là thiết kế CSS theo hình thức responsive, sử dụng kiến thức về CSS3.

Tuy nhiên nếu bạn muốn viết thêm một đoạn code làm sao để phát hiện và lấy thông tin kích thước của trình duyệt bằng ngôn ngữ PHP thì phải làm thế nào?
Bạn không thể hoàn toàn sử dụng PHP, vì đây là ngôn ngữ chạy trên server và trả kết quả về cho trình duyệt. Để lấy kích thước browser với javascript ta có đối tượng screen.

//chiều rộng tối đa trình duyệt tương ứng với kích thước width của màn hình
screen.width;
//chiều cao tối đa trình duyệt tương ứng với kích thước height của màn hình
screen.height;

Sử dụng tính năng chuyển hướng redirect, chúng ta dễ dàng truyền tham số chứa kích thước trình duyệt bằng lệnh javascript và bắt giá trị tham số ở mã PHP. Ví dụ:

<?php
if(!isset($_GET['r']))     
{     
echo "<script language=\"JavaScript\">     
<!--      
document.location=\"$PHP_SELF?r=1&width=\"+screen.width+\"&Height=\"+screen.height;     
//-->     
</script>";     
}
else{
 
     if(isset($_GET['width']) && isset($_GET['Height'])) {     
               // Resolution  detected     
     }     
     else {     
               // Resolution not detected     
     }     
}     

?>

Sau khi lấy tham số, Các bạn có thể lưu lại vào biến SESSION để ghi nhớ cho lần sau tránh redirect nhiều lần làm nặng số lần tải trang. Lần đầu tiên xác định kích thước browser, URL của bạn có dạng:
php-save-browser-size

Phát hiện kích thước trình duyệt trong wordpress

Tích hợp đoạn code trên vào wordpress, rất đơn giản chúng ta sử dụng 2 hook init và template_redirect. Chèn mã javascript giúp chuyển hướng URL document.location vào hook template_redirect như sau:

add_action( 'template_redirect', 'custom_template_redirect' );
function custom_template_redirect(){
	//redirect
	if((!isset($_SESSION['scr_size']) || !$_SESSION['scr_size']) && other_template_tag..){
		echo "<script language=\"JavaScript\">     
	<!--      
	document.location=\"$PHP_SELF?r=1&width=\"+screen.width+\"&height=\"+screen.height;
	//-->     
	</script>"; 
	}
}

Chú ý: Các hàm template tags không hoạt động ở action hook init, mọi hàm sử lý bên template hoạt động sau hook này, ví dụ template_redirect, wp_head,..Chúng ta có thể lấy dữ liệu tham số tại hook template_redirect. Thêm đoạn code lưu tham số width, height vào biến SESSION.

add_action('init','myinit');
function myinit(){
	...
	if(isset($_GET['width']) && isset($_GET['height']) && isset($_GET['r'])){
		$_SESSION['scr_size_width']=$_GET['width'];
		$_SESSION['scr_size_height']=$_GET['height'];
	}
}

Thêm một lưu ý nữa, bạn không sử dụng trùng tham số URL có trong wordpress. Ví dụ tránh sử dụng các tên tham số như : name, page,w,h…
Khi page trả về template 404 bạn phải xem lại các tham số sử dụng. Loại bỏ từng tham số để biết tham số nào bị xung đột, bằng cách nhập trực tiếp trên trình duyệt tại trang website của bạn.

Ứng dụng

Chúng ta cần chỉnh số lượng bài viết hiển thị với từng kích thước trình duyệt đảm bảo kín hết chỗ trống trước khi chuyển pagination mới. Hình dưới đây còn thiếu 1 sản phẩm.
dynamic-posts-per-page-wp

Sử dụng hook pre_get_posts để điều chỉnh lại thuộc tính posts_per_page. Ví dụ:

function _pre_get_posts($query) {
	if (is_home() || is_category()) {
		$w=$_SESSION['scr_size_width'];
		if($w<=1280) $num=29;else $num=24;
        $query->set('posts_per_page',$num);
    }
	return $query;
}

add_filter('pre_get_posts','_pre_get_posts');

Chúc bạn thành công!

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài viết liên quan:

  1. Hướng dẫn cài đặt và sử dụng xampp – webserver
  2. Tạo và sử dụng hàm trong PHP từ A-Z
  3. [Encode/Decode] Mã hóa chuỗi unicode trong PHP
  4. Xử lý ngày giờ trong PHP
  5. Tạo game Sudoku bằng PHP
  6. Lấy URL hiện tại trong trang PHP
  7. Thư viện Mysql PHP Wrapper – ADOdb
  8. Composer – Trình quản lý thư viện cho ứng dụng web PHP
  9. Truyền dữ liệu trong node.js sử dụng php
  10. Cẩm nang PHP Script Lập trình web động với PHP/MySQL

Chuyên mục: PHP Tìm kiếm: php, wordpress Templates

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

SẢN PHẨM

  • Plugin Auto-Sync Google Shopping cho WooCommerce
  • Phần mềm chặn click ảo
  • WP2Speed.com – Tăng tốc WordPress

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2021 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.