Hồ Bảo Huy - Chuyên Gia SEO - Chuyên Gia Marketing » wordpress api http://www.hobaohuy.com www.hobaohuy.com Wed, 01 Oct 2014 07:44:56 +0000 en-US hourly 1 Làm sao để sử dụng đúng cách AJAX trong WordPress http://www.hobaohuy.com/lam-sao-de-su-dung-dung-cach-ajax-trong-wordpress.html http://www.hobaohuy.com/lam-sao-de-su-dung-dung-cach-ajax-trong-wordpress.html#comments Tue, 30 Sep 2014 05:34:28 +0000 http://www.hobaohuy.com/?p=114 Chào các bạn, trong việc phát triển Theme và Plugin thì chắc hẳn ít nhiều các bạn cũng có sử dụng thêm AJAX. Cách thường dùng là chúng ta sẽ tạo ra các file php để xử lý request từ AJAX. Cách này khá mất công khi chúng ta vừa phải tạo mới file, vừa phải include các file cần thiết để có thể tương tác và sử dụng được hàm WordPress. Cách này tuy vẫn đáp ứng được nhưng không khuyến khích dùng. Vì thế trong bài viết này mình sẽ hướng dẫn các bạn cách sử dụng AJAX trong WordPress đúng cách hơn.

ajax trong wordpress Làm sao để sử dụng đúng cách AJAX trong WordPress

Việc sử dụng AJAX trong WordPress rất đơn giản. Các bạn không cần phải tạo ra bất kỳ file nào để xử lý request từ AJAX mà sử dụng chính file admin-AJAX.php trong thư mục wp-admin để xử lý thông qua 2 hook mà WordPress đã cung cấp sẵn: wp_AJAX_{action} và wp_AJAX_nopriv_{action}.

Xem thêm: Action & Filter trong WordPress

Hook wp_AJAX_{action} áp dụng khi người dùng đã đăng nhập và hook wp_AJAX_nopriv_{action} áp dụng khi người dùng không đăng nhập.

Để hiểu được cách sử dụng, các bạn làm theo ví dụ này của mình. Thêm đoạn code sau vào file functions.php:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
    add_action( 'wp_footer', 'dvd_action_javascript' );
    function dvd_action_javascript() {
        ?><script>// <![CDATA[
        jQuery(document).ready(function($) {
            $.AJAX({
                type : 'POST',
                data : {'action' : 'dvd_action', 'data' : 'du lieu gui len server'},
                url : '<?php echo admin_url( "admin-AJAX.php" ); ?>',
                success : function (resp){
                    console.log(resp);
                }
            });
        });
// ]]></script><!--?php
    }

Đoạn code trên đơn giản là sử dụng hàm AJAX để gửi request đến file xử lý (/wp-admin/admin-AJAX.php). Đoạn script trên sẽ được thêm vào footer của theme thông qua hook wp_footer. Các bạn có thể sử dụng bất kỳ hàm AJAX nào khác như post, get … của Jquery.

Các bạn lưu ý chỗ dữ liệu gửi đi, với action thì bắt buộc phải có để có thể sử dụng được 2 hook ở trên. Giá trị của action thì có để đặt tùy ý và giá trị này sẽ được thay vào {action} của 2 hook bên trên. Thêm tiếp đoạn code sau:

1
2
3
4
5
6
add_action('wp_AJAX_dvd_action', 'dvd_action');
add_action('wp_AJAX_nopriv_dvd_action', 'dvd_action');
function dvd_action() {
    echo $_POST['data'];
    die();
}

Các bạn để ý tên 2 hook bên trên. Với hook wp_AJAX_{action}, {action} là dvd_action. Tương tự với hook wp_AJAX_nopriv_{action}, {action} cũng là dvd_action do bên trên dữ liệu gửi đi mình đã khai báo với action là dvd_action. Các bạn thấy đấy, dựa vào action để nó có thể xác định được đúng request và xử lý chúng.

Trong hàm xử lý mình sẽ echo ra dữ liệu gửi lên từ AJAX và khi người dùng đăng nhập hay không đăng nhập thì hàm xử lý này vẫn sẽ hoạt động. Nếu muốn giới hạn thì các bạn có thể chọn 1 trong 2 hook trên cho phù hợp. Lưu ý: để nhận đúng kết quả trả về thì nên kết thúc hàm bằng hàm die(); hoặc exit();

Thử chạy và f12 lên xem kết quả nhé:

ket qua tra ve Làm sao để sử dụng đúng cách AJAX trong WordPress

Trong trường hợp các bạn muốn sử dụng đoạn script trên thông qua 1 file js thì cần phải đăng ký 1 biến global lưu đường dẫn tới file xử lý thông qua hàm sau:

1
wp_localize_script( $handle, $name, $data );

Trong đó:

– $handle là tên script đã đăng ký

– $name là tên biến sẽ chứa dữ liệu

– $data là mảng chứa dữ liệu cho biến $name

Cụ thể hơn các bạn làm tiếp ví dụ sau sẽ hiểu:

Đoạn code xử lý AJAX ở trên vẫn giữ nguyên, mình sẽ thay đổi lại đoạn script thay vì dùng thông qua hook thì mình sẽ dùng thông qua 1 file js. Ở đây mình đặt tên là my_js.js và nó nằm trong thư mục js của theme. Trước hết mình đăng ký file my_js.js và 1 đối tượng lưu đường dẫn tới file xử lý:

1
2
3
4
5
6
add_action('init', 'dvd_enqueue_script');
function dvd_enqueue_script(){
    wp_register_script('dvd_js', get_template_directory_uri() . '/js/my_js.js', array('jquery'), null, false);
    wp_localize_script('dvd_js', 'AJAX', array('url' => admin_url('admin-AJAX.php')));
    wp_enqueue_script('dvd_js');
}

Sau khi đã đăng ký xong mình có thể lấy đường dẫn tới file xử lý trong my_js.js bằng cách sử dụng: AJAX.url:

01
02
03
04
05
06
07
08
09
10
jQuery(document).ready(function($) {
    $.AJAX({
        type : 'POST',
        data : {'action' : 'dvd_action', 'data' : 'du lieu gui len server'},
        url : AJAX.url,
        success : function (resp){
            console.log(resp);
        }
    });
});

Các bạn chạy lại và xem kết quả nhé. Vẫn y hệt kết quả như trước phải không nào?

Trường hợp các bạn sử dụng AJAX trong trang quản lý (dashboard) thì không cần phải khai báo đường dẫn tới file xử lý (admin-AJAX.php) nữa. Bởi vì WordPress đã cung cấp sẵn 1 biến global có tên AJAXurl lưu đường dẫn tới file xử lý rồi. Việc của chúng ta là lấy ra mà dùng thôi.

Thử luôn ví dụ cho các bạn dễ hiểu.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
    add_action( 'admin_footer', 'dvd_action_javascript' );
    function dvd_action_javascript() {
        ?><script>// <![CDATA[
        jQuery(document).ready(function($) {
            $.AJAX({
                type : 'POST',
                data : {'action' : 'dvd_action', 'data' : 'du lieu gui len server'},
                url : AJAXurl,
                success : function (resp){
                    console.log(resp);
                }
            });
        });
// ]]></script><?php }

Mình dùng hook admin_footer để thêm 1 đoạn script vào footer của trang quản lý, các bạn có thể sử dụng file js riêng đều được. Nội dung đoạn code tương tự ví dụ trên chỉ khác chỗ option url thôi. Phần xử lý AJAX thông qua 2 hook bên trên các bạn vẫn giữ nguyên. Vào trang quản lý, f12 và kiểm tra kết quả nhé.

Lời kết

Mình đã hướng dẫn xong cách sử dụng AJAX trong WordPress. Hy vọng qua bài viết này các bạn có thể hiểu và biết cách vận dụng AJAX tốt hơn trong WordPress. Mọi vướng mắc các bạn có thể comment bên dưới để được sự hỗ trợ từ mọi người.

]]> http://www.hobaohuy.com/lam-sao-de-su-dung-dung-cach-ajax-trong-wordpress.html/feed 0 WordPress Loop (Vòng lặp trong WordPress) – Các tham số đặc biệt cần nhớ http://www.hobaohuy.com/wordpress-loop-vong-lap-trong-wordpress-cac-tham-so-dac-biet-can-nho.html http://www.hobaohuy.com/wordpress-loop-vong-lap-trong-wordpress-cac-tham-so-dac-biet-can-nho.html#comments Tue, 30 Sep 2014 05:33:17 +0000 http://www.hobaohuy.com/?p=113 Như bạn đã biết thì trước đây mình đã có một bài cực kỳ chi tiết về WordPress Loop (Vòng lặp của WordPress) để bạn hiểu thêm về cách mà chúng ta sẽ cho hiển thị bài viết trong theme là như thế nào. Cũng từ bài đó, mình đã nhận được một số câu hỏi liên quan về cách sử dụng các tham số như thế nào cho đúng và các tham số nào nên nhớ vì trong một Query nó có rất nhiều tham số khiến bạn phải choáng ngợp.WordPress loop WordPress Loop (Vòng lặp trong WordPress) – Các tham số đặc biệt cần nhớ

Vậy thì ở trong bài này, mình sẽ giải thích kỹ hơn về các tham số quan trọng nhất mà bạn cần phải nhớ khi sử dụng WordPress Loop nhằm có thể “lôi” bài viết từ database ra theo đúng ý của mình.

Về cách viết tham số

Bạn có thể viết tham số theo dạng thế này nếu như chỉ dùng 1 hoặc 2 tham số.

1
$new_loop = new WP_Query('posts_per_page=5&s=wordpress');

Trong đó, dấu & sẽ ngăn cách giữa các tham số với nhau.

Nhưng nếu bạn có nhiều tham số thì tốt nhất nên viết thành dạng thế này cho dễ quản lý:

1
2
3
4
5
$args = array(
        'posts_per_page' => '5',
        's' => 'wordpress'
);
$new_loop = new WP_Query($args);

Tức là ta sẽ khai báo nó vào một biến để sử dụng. Có một cách mình rất hay xài là tạo các biến này trong file nào đó rồi include vào file functions.php để dễ quản lý nếu theme có nhiều Query khác nhau.

Các tham số thông dụng của WordPress Query

1. Tham số tùy chỉnh số lượng bài viết cần lấy

Tham số này tên là posts_per_page. Giá trị của nó sẽ là một số tự nhiên và số này chỉnh là số bài viết cần hiển thị ra.

1
$new_loop = new WP_Query( 'posts_per_page=5' );

2. Tham số lấy bài viết từ một post type chỉ định

Tham số này sẽ dùng nhiều nhất khi bạn sử dụng Custom Post Type để Loop nó có thể lấy các bài viết ra từ một post type nào đó. Có thể lấy ra từ nhiều post type khác nhau.

1
$new_loop = new WP_Query( 'post_type=sanpham' );

Nếu muốn lấy bài từ nhiều post type một lúc thì bạn sẽ viết thế này:

1
2
3
$new_loop = new WP_Query( array(
        'post_type' => array( 'post', 'page', 'sanpham' )
) );

3. Tham số bỏ qua các bài đăng sau nó

Tham số này rất hữu dụng cho các bạn muốn làm trang tin tức khi sử dụng liên tiếp 2 loop với nhau, đó là bỏ qua các bài đăng sau nó bằng tham số offset.

1
$new_loop = new WP_Query( 'offset=3&posts_per_page=4' );

Đoạn trên nghĩa là nó sẽ hiển thị 4 bài nhưng loại trừ 3 bài mới nhất.

4. Tham số bỏ qua Sticky Post

Khi website bạn có gắn Sticky Post thì mặc định nó đều gọi ra trong Loop trong mọi trường hợp. Nếu bạn không muốn hiển thị sticky post ở một loop nào đó thì có thể sử dụng tham số ignore_sticky_posts.

1
$new_loop = new WP_Query( 'ignore_sticky_posts=1&cat=4&posts_per_page=-1' );

Đoạn trên nghĩa là lấy toàn bộ bài viết (-1) trong category mang ID là 4 nhưng loại trừ sticky post trong category đó.

5. Tham số lấy bài từ Category và Tag

1
$new_loop = WP_Query( 'tag=wordpress-co-ban&cat=5' );

Đoạn trên nghĩa là sẽ lấy các bài viết trong category mang ID là 5 có gắn tag là wordpress cơ bản (viết dưới dạng slug).

Ngoài ra, một số tham số liên quan tới tag là:

  • tag (string) – Sử dụng slug của tag.
  • tag_id (int) – Sử dụng với định dạng ID.
  • tag__and (array) – Lấy bài từ nhiều tag nhưng các bài đó sử dụng chung nhiều tag, sử dụng ID.
  • tag__in (array) – Lấy bài từ nhiều tag khác nhau, sử dụng ID.
  • tag__not_in (array) – Không lấy bài từ tag chỉ định, dùng ID.
  • tag_slug__and (array) – Tương tự với tag__and nhưng dùng slug.
  • tag_slug__in (array) – Tương tự với tag__in nhưng dùng slug.

Tương tự với tag, category cũng có các tham số tương tự như vậy, tham khảo tại đây.

6. Lấy bài theo ngày tháng

Phần ngày tháng này là một trong những tham số khá quan trọng vì nó sẽ có thể giúp ích được cho bạn để giải quyết nhiều vấn đề. Chẳng hạn như bạn muốn lấy bài theo tháng, ngày, giờ, cuối tuần, mùa,…..Hoàn toàn có thể làm được trong tham số này.

1
$new_query = new WP_Query( 'year=2014&monthnum=06&day=12' );

Ở đoạn trên là ta sẽ lấy bài trong ngày 12 tháng 6 năm 2014.

Nếu bạn cần lấy bài của ngày hôm nay ra thì có thể viết ở dạng như sau:

1
2
$today = getdate();
$new_query = new WP_Query( 'year=' . $today["year"] . '&monthnum=' . $today["mon"] . '&day=' . $today["mday"] );

Hoặc lấy toàn bộ bài trong tuần này:

1
2
3
$week = date('W');
$year = date('Y');
$new_query = new WP_Query( 'year=' . $year . '&w=' . $week );

Hoặc bạn cũng có thể lấy chi tiết bài trong thời gian nhất định của những ngày hành chính. Tức là từ 8h đến 17h từ thứ hai đến thứ sáu.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
$args = array(
        'date_query' => array(
                array(
                        'hour'      => 9,
                        'compare'   => '>=',
                ),
                array(
                        'hour'      => 17,
                        'compare'   => '<=',
                ),
                array(
                        'dayofweek' => array( 2, 6 ),
                        'compare'   => 'BETWEEN',
                ),
        ),
        'posts_per_page' => -1,
);
$new_query = new WP_Query( $args );

Tham khảo thêm tại đây.

Lời kết

Ở bài trên chúng ta đã làm quen qua 6 tham số chính khá quan trọng trong việc sử dụng Query trong WordPress để lấy bài theo ý muốn. Thực tế sức mạnh của WordPress Query còn lớn hơn nhiều nếu bạn có khả năng sáng tạo tốt và áp dụng hết toàn bộ tinh hoa của WordPress.

]]> http://www.hobaohuy.com/wordpress-loop-vong-lap-trong-wordpress-cac-tham-so-dac-biet-can-nho.html/feed 0 Tăng cường tối đa tính bảo mật trong WordPress bằng Nonce http://www.hobaohuy.com/tang-cuong-toi-da-tinh-bao-mat-trong-wordpress-bang-nonce.html http://www.hobaohuy.com/tang-cuong-toi-da-tinh-bao-mat-trong-wordpress-bang-nonce.html#comments Tue, 30 Sep 2014 05:31:46 +0000 http://www.hobaohuy.com/?p=112 Trong khi xây dựng 1 website thì vấn đề quan trọng không thể thiếu đó là bảo mật. Có rất nhiều cách để tăng cường tính bảo mật trong WordPress. Bạn Thạch cũng đã có bài viết về một số cách bảo mật trong WordPress. Các bạn có thể xem lại tại đây. Trong bài viết này mình sẽ hướng dẫn thêm cho các bạn cách bảo mật với Nonce, một cách hiệu quả để hạn chế việc tấn công theo kỹ thuật Cross Site Request Forgery (CSRF).

nonce trong wordpress Tăng cường tối đa tính bảo mật trong WordPress bằng Nonce

1. Nonce là gì?

Hiểu đơn giản nó là 1 chuỗi duy nhất được tạo ra bởi WordPress cho mỗi người dùng. Nó giúp bảo vệ website khỏi những request tự tạo với mục đích xấu.

Ví dụ như thế này cho các bạn dễ hiểu. Giả sử mình có 1 link dùng để xóa bài viết như thế này:

1
<a href="http://domain/?action=delete&id=1">Xóa</a>

Khi mình click vào link thì bài viết sẽ được xóa bình thường. Ok, không vấn đề gì. Nhưng vấn đề xảy ra nếu người dùng có dụng ý xấu. Họ sử dụng 1số thủ thuật nào đó để thông qua quyền của mình và thực hiện việc chạy lại đường link trên với 1 id khác thì sao? Bài viết khác có thể bị xóa cho dù mình không click vào nút xóa. Bây giờ các bạn đã thấy vấn đề rồi chứ. Ngoài ra thì khi dùng form để submit dữ liệu cũng vẫn bị vấn đề trên.

Vậy làm sao để xác định được chính xác 1 request do người dùng thực hiện thông qua click link hay submit form ?

Việc cần làm là chúng ta phải tạo ra thêm 1 nonce cho request và trang xử lý phải xác nhận cái nonce này. Nếu nonce không hợp lệ thì không xử lý request. Làm như vậy thì chúng ta mới xác định được chính xác thao tác đấy(click link, submit form) là thực sự của người dùng tạo ra.

2. Các sử dụng

Như đã nói ở trên nonce là 1 chuỗi vậy chuỗi này được tạo ra như thế nào? Mở file wp_config.php lên và tìm đến 2 hằng NONCE_KEY và AUTH_SALT. Các bạn thấy chưa ạ? Một dãy các ký tự đúng không nào? WordPress đã sử dụng dụng 2 hằng này và hash cùng với một số thông số khác sau như action, user id … sau đó cắt ra 1 đoạn để tạo ra nonce đấy.

Cách đơn giản và linh động nhất là các bạn sử dụng hàm wp_create_nonce($action) để tạo nonce và dùng hàm wp_verify_nonce($nonce, $action) để xác nhận.

Giả sử với link xóa bài như bên trên, mình cần tạo ra 1 nonce, đưa nonce này vào query string, bên trang xử lý sẽ xác nhận nonce thông qua query string.

1
2
3
$nonce = wp_create_nonce(' delete_1'); //tạo nonce
echo '<a href="http://domain/?action=delete&id=1&_nonce='.$nonce.'">Xóa</a>';

Các bạn thấy đấy, mình đã tạo thêm 1 nonce với $action truyền vào là delete_1. Và mình đã đưa nó vào query string để verify bên trang xử lý. Tên _nonce các bạn có thể đổi lại tùy ý. Lưu ý: với $action các bạn đặt như thế nào thì trang xử lý các bạn phải verify lại như thế đó.

Bên trang xử lý các bạn chỉ cần xác nhận cái nonce này trước khi xử lý. Không hợp lệ thì ngưng xử lý:

1
2
3
if(!wp_verify_nonce($_GET['_nonce'], 'delete_'.$_GET['id'])) exit();
//code xử lý ở đây ....

Bên trang xử lý chúng ta verify nonce thông qua hàm wp_verify_nonce. Với $nonce là $_GET[‘_nonce’], và $action là ‘delete_’.$_GET[‘id’]. Vì ở trên nonce được tạo từ ‘delete_1′ nên trang xử lý cần verify đúng $action đó theo dạng delete_{id}.

Thực chất hàm này sẽ tạo ra 1 nonce khác theo $action và so sánh nó với nonce get được.

Đơn giản thế thôi, ngoài cách sử dụng trên wordpress còn cung cấp các hàm để tạo và kiểm tra nonce khác để áp dụng vào từng trường hợp cụ thể.

Để tạo nonce cho url, ngoài cách trên ra chúng ta có thể sử dụng thêm hàm wp_nonce_url( $actionurl, $action, $name ) hàm này sẽ trả về cho chúng ta 1 đường dẫn đầy đủ chứa nonce.

Tham số:

  • $actionurl chính là đường dẫn để add nonce vào.
  • $action tương tự trên.
  • $name là tên của nonce, mặc định là _wpnonce

Cũng với ví dụ trên mình sử dùng hàm wp_nonce_url() để tạo:

1
2
3
$nonce_url = wp_nonce_url('http://domain/?action=delete&id=1', 'delete_1');
echo '<a href="'. $nonce_url.' ">Xóa</a>';

Khi xem thì các bạn thấy đường dẫn nó cũng tương tự cách trên, _wpnonce chính là tham số $name mặc định, các bạn muốn đổi thành tên khác thì tùy chỉnh tại tham số này.

1
http://domain/?action=delete&id=1&_wpnonce=e73a52569c

Tiếp tục để tạo nonce cho 1 form các bạn có thể dùng thêm hàm wp_nonce_field( $action, $name, $referer, $echo ). Các tham số như $action và $name thì tương tự trên. Tham số $referer sẽ nhận giá trị true hoặc false, quyết định hiển thị thêm 1 field ẩn chứa đường dẫn hiện tại. $echo cũng nhận giá trị true hoặc false, quyết định hàm wp_nonce_field() sẽ hiển thị hay trả về kết quả.

Khi sử dụng hàm này với $referer là true các bạn sẽ thấy trong form có thêm 2 trường dạng như thế này:

1
2
3
<input type="hidden" id="_nonce" name="_nonce" value="43bc8cf75e" />
<input type="hidden" name="_wp_http_referer" value="/phanmem/ " />

Về cách verify nonce thì WordPress cung cấp thêm cho chúng ta 2 hàm nữa khác là check_admin_referer() và check_ajax_referer().

Hàm check_admin_referer() sẽ dùng để verify nonce trong trang quản lý. Hàm này nhận 2 tham số là $action và $query_arg với $action thì tương tự, $query_arg chính là $name của nonce. Hàm này sẽ trả về true nếu nonce hợp lệ và ngược lại là false.

Giả sử có 1 form dạng như thế này:

1
2
3
4
5
6
7
<form method="post">
    //.......
   <?php wp_nonce_field( 'myaction','mynonce' ); ?>
</form>

Thì khi verify các bạn làm như sau:

1
2
3
if(!check_admin_referer('myaction', 'mynonce')) die();
 

Hàm check_ajax_referer() sẽ verify nonce thông qua Ajax. Hàm này nhận 3 tham số, 2 tham số đầu là $action và $query_arg tương tự hàm trên, với tham số thứ 3 là $die, nếu nonce không hợp lệ, và tham số này set true thì sẽ ngưng xử lý, nếu false thì bỏ qua. Mặc định là true.

Thời gian sống mặc định của 1 nonce là 24 giờ. Các bạn vẫn có thể chỉnh sửa lại thông qua hook nonce_life.

1
add_filter( 'nonce_life', function () { return 4 * HOUR_IN_SECONDS; } );

Hằng HOUR_IN_SECONDS sẽ trả về số giây trên giờ (3600).

3. Lời kết

Mình đã hướng dẫn xong cho các bạn cách bảo mật WordPress với Nonce để hạn chế việc tấn công theo kỹ thuật CSRF trong khi phát triển theme và plugin. Hy vọng với những kiến thức này có thể giúp các bạn bảo vệ website của mình tốt hơn.

]]> http://www.hobaohuy.com/tang-cuong-toi-da-tinh-bao-mat-trong-wordpress-bang-nonce.html/feed 0