Error message

Notice: Undefined offset: 1 in nice_menus_block_view() (line 306 of /home/mamast08nv/public_html/sites/all/modules/nice_menus/nice_menus.module).

Làm thế nào để sử dụng các biến PHP trong Javascript ? Bình thường ta 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ó thể tham khảo thêm ở : http://codex.wordpress.org/Function_Reference/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ụ: 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 $portfolio_effect.masonry( {

2 itemSelector: '.portfolio-item',

3      columnWidth : function ( containerWidth )

4      {

5         return containerWidth / 4;

6      },

7     isAnimated : true

8 } );
Để 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'

 

Setting layout trong theme

Trong script portfolio-effect.js có 1 đoạn js cần sử lý:

1 $portfolio_effect.masonry( { itemSelector: '.portfolio-item',

2      columnWidth : function ( containerWidth )

3      {

4         return containerWidth / 4;

5      },

6     isAnimated : true  

7} );

 

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 $fitbus = array(  

2'portfolio_columns' => $portfolio_column

3 );

4 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

1 $portfolio_effect.masonry( {

2   itemSelector: '.portfolio-item',

3   columnWidth : function ( containerWidth )

4   {

5   return containerWidth / fitbus.portfolio_columns;

6   },

7   isAnimated : true

8 } );

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.

Xem thêm tài liệu php ở mục chia sẻ

Đào tạo lập trình chúc các bạn thành công

Tin tức khác:

 + Khóa học lập trình web php

 + Khóa học thiết kế web

 + Khóa đào tạo quản trị web