Hướng dẫn thủ thuật sử dụng biến PHP trong Javascript với hàm wp_localize_script

files html  css  php  js Hướng dẫn thủ thuật sử dụng biến PHP trong Javascript với hàm wp localize script

Đợt này mình có làm một theme WordPress và có gặp một trường hợp này: làm thế nào để sử dụng các biến 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:

<?php wp_localize_script( $handle, $object_name, $l10n ); ?>

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
 } );

2013 07 03 092223 Hướng dẫn thủ thuật sử dụng biến PHP trong Javascript với hàm wp localize script                              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

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 !

Nguồn: thuthuatwordpress.org

Cùng Danh Mục

Liên Quan Khác

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>