Chắc hẳn các bạn cũng đã biết.về lập trình Javascript là cội nguồn của PHP, Jquery,..,: làm thế nào để sử dụng các biến PHP trong Javascript ? Bình thường mình có thể sử dụng các biến đó khi viết Javascript trên thẻ. Tuy nhiên khi làm việc với WP thì mình biết được 1 hàm nó có thể sử lý điều này rất tốt đó là hàm: wp_localize_script.
Cú Pháp:
Hàm wp_localize_script cho bạn khả năng để viết một đối tượng JavaScript với nhiều biến được định nghĩa. Một điểm lưu ý là hàm này phải được gọi sau khi mã javascript của bạn đã được enqueued.
Để biết chi tiết về các các tham số các bạn có thể vào đây: wp_localize_script
Ví dụ:
Để cho trực quan thì mình lấy luôn trường hợp mà mình gặp phải trước khi đụng tới hàm wp_localize_script này.
Bài Toán ban đầu:
Đây là đoạn script đã được enqueued lúc đầu
1
| wp_enqueue_script( 'portfolio-effect-js', CHILD_URL . 'js/portfolio-effect.js', array( 'jquery' ), '1.5.0' ); |
Trong script portfolio-effect.js có 1 đoạn js cần sử lý:
1
2
3
4
5
6
7
8
| $portfolio_effect.masonry( {itemSelector: '.portfolio-item', columnWidth : function ( containerWidth ) { return containerWidth / 4; }, isAnimated : true } ); |
Setting layout trong theme
Làm Thế nào để khi người dùng click vào layout với các thành phần 1 cột, 2 cột, 3 cột thì hiệu ứng Javascript sẽ nhận số cột đó để chia kích thước chiều rộng với số cột tương ứng thay vì fix số lượng cột là 4 như trên ( Việc này có nhiều cách xử lý đơn giản hơn nhưng vì liên quan tới vấn đề đưa php vào trong JS nên mình đưa ra cách giải quyết này )
Bài toán xử lý:
1
2
3
4
| $fitbus = array( 'portfolio_columns' => $portfolio_column ); wp_localize_script( 'portfolio-effect-js', 'fitbus', $fitbus ); |
+ Chúng ta cần khai báo 1 mảng, với mảng bao gồm các biến cần xử lý. Ở đây biến $portfolio_column là biến được xử lý để lấy giá trị số cột khi người dùng lựa chọn trong setting, Chúng ta cần đưa biến đó vào trong Js ở trên
+ Trong hàm wp_localize_script thì
- portfolio-effect-js: Tên của Js đã enqueued phần trên
- fitbus: Tên đối tượng Js sẽ chứa dữ liệu
- $fitbus: mảng chứa các biến được khai báo ở trên
Công việc cuối cùng là chúng ta sẽ quay trở lại Js: portfolio-effect.js
Thay con số 4 ở trên bằng biến mà chúng ta đã khai báo trong mảng, cụ thể như sau
Thay con số 4 ở trên bằng biến mà chúng ta đã khai báo trong mảng, cụ thể như sau
1
2
3
4
5
6
7
8
| $portfolio_effect.masonry( { itemSelector: '.portfolio-item', columnWidth : function ( containerWidth ) { return containerWidth / fitbus.portfolio_columns; }, isAnimated : true } ); |
Như vậy là sau khi người dùng setting số cột thì lập tức biến đó sẽ được truyền vào trong Js và Js này thực hiện tính chiều dài của cột tương ứng với setting.
Có thể cách trình bày của mình chưa thực sự tốt lắm, nếu bạn nào k hiểu thì có thể comment ở dưới, mình sẽ giải đáp cụ thể hơn . Cảm ơn !
Có thể cách trình bày của mình chưa thực sự tốt lắm, nếu bạn nào k hiểu thì có thể comment ở dưới, mình sẽ giải đáp cụ thể hơn . Cảm ơn !
0 nhận xét:
Đăng nhận xét