Phần 3: Coding Admin page

Chào các bạn,

Ở 2 phần trước chúng ta đã xây dựng xong cấu trúc 1 theme, nhưng hiện tại với theme này thì chúng ta chỉ được có 1 website tĩnh. Ở bài này chúng ta sẽ code để chúng hoạt động.

Link các phần khác :

Phần 1: Cấu trúc theme WordPress

Phần 2: Xây dựng cấu trúc theme

Trong phần này chúng ta sẽ làm các việc sau đây:

– Tạo trang theme options.

– Tạo posty type cho sản phẩm, danh mục sản phẩm và nhà sản xuất.

– Tạo custom field cho sản phẩm.

Theme options menu

Khi cài các theme down được trên mạng đôi khi các bạn sẽ thấy trong menu có thêm phần tùy chỉnh 1 vài thứ cho theme, lúc trước mình cũng tự hỏi sao mà hay quá ta. Nhưng thực ra chúng ta có thể tự làm 1 trang như thế 1 cách dễ dàng.

Chúng ta tạo thư mục includes để chứa các hàm xử lý và sẽ include chúng vào trong file functions.php

Tạo file theme_options.php trong thư mục includes.

Trong file functions.php copy đoạn code sau:

1
include (TEMPLATEPATH . '/inc/theme_options.php' );

Copy đoạn code sau vào file theme_options.php

1
<!--?php add_action('admin_menu', 'create_theme_option');   function create_theme_option()   {     add_theme_page("Tùy chỉnh", "Tùy chỉnh", 'edit_themes', basename(__FILE__), 'my_theme_options');   } ?-->

Hàm add_action(); có tác dụng như một trigger, sẽ chạy hàm create_theme_option khi sự kiện admin_menu được gọi. Bạn search hàm add_action() trên codex để tìm hiểu thêm về các sự kiện.

Hàm add_theme_page(), sẽ add 1 page vào mục theme. Bạn search trên codex để xem thêm. Chỉ có đối số cuối cùng my_them_options là 1 hàm bạn sẽ gọi để hiển thị nội dung của page mới này.

Bạn copy tiếp đoạn code sau vào

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!--?php function my_theme_options()   {     ?--></pre>
<div class="wrap"><!--?php screen_icon(); ?-->
<h2>Tùy chỉnh</h2>
 <!-- Cập nhật nick yahoo -->
 <!--?php               if ( !empty($_POST) && wp_verify_nonce($_POST['yahoo_online'],'yahoo_online') )               {                      update_option( 'yahoo_kinh_doanh',($_POST['yahoo_kinh_doanh']));                    update_option( 'yahoo_ky_thuat',($_POST['yahoo_ky_thuat']) );             ?-->
<div id="index_message" class="updated">Cập nhật thành công!</div>
 <!--?php               }             ?-->
 <!-- Cập nhật banner và logo -->
 <!--?php               if ( !empty($_POST) && wp_verify_nonce($_POST['theme_option'],'theme_option') )               {                      update_option( 'theme_logo',($_POST['theme_logo']));                    update_option( 'theme_banner',($_POST['theme_banner']) );             ?-->
<div id="index_message" class="updated">Cập nhật thành công!</div>
 <!--?php               }             ?-->
 <!-- Cập nhật thông tin liên hệ -->
 <!--?php               if ( !empty($_POST) && wp_verify_nonce($_POST['contact_option'],'contact_option') )               {                      update_option( 'contact_company',($_POST['contact_company']));                      update_option( 'contact_address',($_POST['contact_address']));                      update_option( 'contact_phone',($_POST['contact_phone']));                      update_option( 'contact_fax',($_POST['contact_fax']));                      update_option( 'contact_email',($_POST['contact_email']));             ?-->
<div id="index_message" class="updated">Cập nhật thành công!</div>
 <!--?php               }             ?-->
 <!-- Cập nhật SEO -->
 <!--?php             if ( !empty($_POST) && wp_verify_nonce($_POST['seo_index'],'seo_index_update') )               {                       update_option( 'seo_title',($_POST['seo_title']));                     update_option( 'google_analytics',($_POST['google_analytics'])  );                       update_option( 'seo_description',($_POST['seo_description']) );                     update_option( 'seo_keywords',($_POST['seo_keywords'])  );                      ?-->
<div id="index_message" class="updated">Cập nhật thành công!</div>
 <!--?php               }             ?-->
<div id="index_page" style="border-style: outset; border-width: 1px; padding: 0px 20px 10px 20px; margin-top: 10px;">
<h3>Thông tin liên hệ</h3>
<form id="theme_option" action="" method="post"><label for="contact_company">Công ty</label>
 <input style="border-style: inset; border-width: 2px; color: #6666ff; background-color: #ccccff;" type="text" name="contact_company" value="<?php echo esc_attr( get_option('contact_company') ); ?>" size="65" />
 <label for="contact_address">Địa chỉ</label>
 <input style="border-style: inset; border-width: 2px; color: #6666ff; background-color: #ccccff;" type="text" name="contact_address" value="<?php echo esc_attr( get_option('contact_address') ); ?>" size="65" />
 <label for="contact_phone">Điện thoại</label>
 <input style="border-style: inset; border-width: 2px; color: #6666ff; background-color: #ccccff;" type="text" name="contact_phone" value="<?php echo esc_attr( get_option('contact_phone') ); ?>" size="30" />
 <label for="contact_fax">Fax</label>
 <input style="border-style: inset; border-width: 2px; color: #6666ff; background-color: #ccccff;" type="text" name="contact_fax" value="<?php echo esc_attr( get_option('contact_fax') ); ?>" size="30" />
 <label for="contact_email">Email</label>
 <input style="border-style: inset; border-width: 2px; color: #6666ff; background-color: #ccccff;" type="text" name="contact_email" value="<?php echo esc_attr( get_option('contact_email') ); ?>" size="65" />
 <input style="border-style: outset; border-width: 2px; font-weight: bold;" type="submit" name="contact_submit" value="Cập nhật" />
 <!--?php wp_nonce_field('contact_option','contact_option'); ?--></form></div>
<div id="index_page" style="border-style: outset; border-width: 1px; padding: 0px 20px 10px 20px;">
<h3>Yahoo Online</h3>
<form id="yahoo_online" action="" method="post"><label for="yahoo_kinh_doanh">Kinh doanh (ngăn cách giữa các nick bằng dấu phẩy)</label>
 <input style="border-style: inset; border-width: 2px; color: #6666ff; background-color: #ccccff;" type="text" name="yahoo_kinh_doanh" value="<?php echo esc_attr( get_option('yahoo_kinh_doanh') ); ?>" size="120" />
 <label for="yahoo_ky_thuat">Kỹ thuật (ngăn cách giữa các nick bằng dấu phẩy)</label>
 <input style="border-style: inset; border-width: 2px; color: #6666ff; background-color: #ccccff;" type="text" name="yahoo_ky_thuat" value="<?php echo esc_attr( get_option('yahoo_ky_thuat') ); ?>" size="120" />
 <input style="border-style: outset; border-width: 2px; font-weight: bold;" type="submit" name="yahoo_online_submit" value="Cập nhật" />
 <!--?php wp_nonce_field('yahoo_online','yahoo_online'); ?--></form></div>
<div id="index_page" style="border-style: outset; border-width: 1px; padding: 0px 20px 10px 20px; margin-top: 10px;">
<h3>Thay đổi logo và banner</h3>
<form id="theme_option" action="" method="post"><label for="theme_logo">Đường dẫn Logo (Image Url) </label>
 <input style="border-style: inset; border-width: 2px; color: #6666ff; background-color: #ccccff;" type="text" name="theme_logo" value="<?php echo esc_attr( get_option('theme_logo') ); ?>" size="65" />
 <label for="theme_banner">Đường dẫn Hot Line (Điện thoại) tập tin hình (Image Url) </label>
 <input style="border-style: inset; border-width: 2px; color: #6666ff; background-color: #ccccff;" type="text" name="theme_banner" value="<?php echo esc_attr( get_option('theme_banner') ); ?>" size="65" />
 <input style="border-style: outset; border-width: 2px; font-weight: bold;" type="submit" name="theme_option_submit" value="Cập nhật" />
 <!--?php wp_nonce_field('theme_option','theme_option'); ?--></form></div>
 <!-- Cập nhật tùy chỉnh trang SEO -->
<div id="index_page" style="border-style: outset; border-width: 1px; padding: 0px 20px 10px 20px; margin-top: 10px;">
<h3>Thiết lập SEO</h3>
<form id="seo_index_page" action="" method="post"><label for="seo_title"><strong>Title</strong><em>(Tối đa 70 ký tự)</em></label>
 <input style="border-style: inset; border-width: 2px; color: #6666ff; background-color: #ccccff;" type="text" name="seo_title" value="<?php echo esc_attr( get_option('seo_title') ); ?>" size="65" />&nbsp; &nbsp; &nbsp;
 <label for="google_analytics"><strong>Google Analytics Code:</strong></label>
 <input style="border-style: inset; border-width: 2px; color: #6666ff; background-color: #ccccff;" type="text" name="google_analytics" value="<?php echo esc_attr( get_option('google_analytics') ); ?>" size="15" />
 <label for="seo_description"><strong>Description</strong><em>(Tối đa 160 ký tự)</em></label>
<textarea style="with: 100%; border-style: inset; border-width: 2px; color: #6666ff; background-color: #ccccff;" name="seo_description" rows="1" cols="100"><?php echo esc_attr( get_option('seo_description') ); ?></textarea>
 <label for="seo_keywords"><strong>Keywords</strong><em>(Tối đa 250 ký tự)</em></label>
<textarea style="with: 100%; border-style: inset; border-width: 2px; color: #6666ff; background-color: #ccccff;" name="seo_keywords" rows="2" cols="100"><?php echo esc_attr( get_option('seo_keywords') ); ?></textarea>
 <input style="border-style: outset; border-width: 2px; font-weight: bold;" type="submit" name="seo_submit" value="Cập nhật" />
 <!--?php wp_nonce_field('seo_index_update','seo_index'); ?--></form></div>
</div>
<pre>
    <!--?php   }?-->

Vậy là bạn đã xong trang quản lý theme, Bạn có thể chỉnh sửa tùy thích.

Trong đoạn code trên bạn sẽ thấy hàm wp_nonce_field() đặt trong form. Hàm này có tác dụng sẽ tạo ra các hidden field cho phép gửi request chứa các giá trị của các input trong form đó, hàm bắt buộc phải có 2 đối số.

wp_nonce_field('submit','update');

Trong đó submit là action của field và update là field name.

Nếu bạn muốn xử lý dữ liệu từ form thì bạn sử dụng hàm wp_verify_nonce() để nhận request. Bạn có thể nhận được request từ bất kỳ file nào trong wordpress.

1
2
3
if(wp_verify_nonce('update','submit')){
    //Your code go here
}

Hàm update_option(‘title’,”Khoa’s Blog”) sẽ tạo 1 field trong table wp_options với option_name là “title” và option_value là “Khoa’s Blog”.

Để hiển thị dùng hàm get_option(‘title’); truyền vào option_name muốn lấy, kết quả trả về sẽ ở dạng mảng nên bạn có thể dễ dàng truyền vào trong 1 field nhiều giá trị, ví dụ danh sách các nick yahoo hay số đt hỗ trợ khách hàng chẳng hạn.

Bây giờ bạn có thể tùy chỉnh mọi thứ cho theme của mình 1 cách vô cùng “pro” với 1 giao diện quản lý đẹp mắt mà không cần phải “bơi” trong đống code.

Tạo posty type cho sản phẩm, danh mục sản phẩm và nhà sản xuất

Vì trang web của chúng ta là web bán hàng nên tất nhiên chúng ta sẽ phải có danh sách sản phẩm và để tiện quản lý, thì nó phải tách biệt với bài post thông thường ở dạng tin tức. Để làm được vậy ta phải tạo 1 post_type khác.

Tương tự như trên ta sẽ tạo file custom_post.php trong thư mục includes để chứa các hàm và trong file functions.php sẽ include nó vào.

Bạn copy đoạn code sau vào file custom_post.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!--?php add_action( 'init', 'register_product_post' ); // call function register_product_post function register_product_post() {     register_post_type(        'san-pham',         array(          'public' =--> true,
            'label'  => 'Sản phẩm',
            'labels' => array(
            'name' => 'Sản phẩm',
            'singular_name' => 'Sản phẩm',
            'add_new' => _x( 'Đăng sản phẩm', 'add' ),
            'add_new_item' => __( 'Đăng sản phẩm' ),
            'edit_item' => __( 'Sửa thông tin' ),
            'new_item' => __( 'Đăng mới' ),
            'view_item' => __( 'Xem' ),
            'search_items' => __( 'Tìm sản phẩm' ),
            'not_found' =>  __( 'Không tìm thấy sản phẩm' ),
            'not_found_in_trash' => __( 'Không tìm thấy trong thùng rác' )
            ),
            'show_ui' => true,
            'capability_type' => 'post',
            'hierarchical' => false,
            'rewrite' => array('slug' => 'san-pham'),
            'query_var' => true,
            'supports' => array('title','editor','thumbnail'),
            'menu_position' =>5,
            'taxonomies' =>array('nhom-hang')
    ) );
}
?>

Không có gì phức tạp phải không nào? Hàm add_action() thì mình đã giới thiệu bên trên. Còn hàm register_post_type() thì bạn lên codex để tìm hiểu cú pháp và cách khai báo các label của hắn. Nếu bạn muốn tạo thêm 1 post_type mới thì cứ việc tạo trong file này, mỗi 1 post_type bạn phải add_action 1 lần.

Tiếp theo chúng ta sẽ tạo danh mục sản phẩm và nhà sản phẩm. 2 cái này sẽ được gọi là taxonomy, taxonomy bạn có thể hiểu nó giống như là category vậy đó mình cũng không biết nó khác category chỗ nào ^^, anh em nào biết chỉ mình với.

Chúng ta sẽ tạo chúng trong file custom_taxonomy.php, tất nhiên là phải trong thư mục includes và phải được include trong file functions.php.

Bạn dùng code sau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!--?php  add_action("init", "build_taxonomies_products",false);  add_action("init", "build_taxonomies_Manufacturer",false);  function build_taxonomies_products()  {    $labels = array(     'name' =--> 'Danh mục sản phẩm',
    'singular_name' => 'Danh mục',
    'search_items' =>  __( 'Thêm sản phẩm' ),
    'all_items' => __( 'Tất cả' ),
    'parent_item' => __( 'Sản phẩm cha' ),
    'parent_item_colon' => __( 'Sản phẩm cha:' ),
    'edit_item' => __( 'Cập nhật' ),
    'update_item' => __( 'Cập nhật' ),
    'add_new_item' => __( 'Thêm mới' ),
    'new_item_name' => __( 'Thêm sản phẩm mới' ),
    'menu_name' => __( 'Danh mục sản phẩm' ),
  );
   register_taxonomy
        (
            "nhom-hang", "san-pham",
            array(
                        'hierarchical' => true,
                        'labels' => $labels,
                        'query_var' => true,
                        'rewrite' => true,
                        'show_ui' => true
        ));
  }
function build_taxonomies_Manufacturer()
 {
   $labels = array(
    'name' => 'Nhà sản xuất',
    'singular_name' => 'Nhà sản xuất',
    'search_items' =>  __( 'Tìm nhà sản xuất' ),
    'all_items' => __( 'Tất cả' ),
    'parent_item' => __( 'Nhà sản xuất cha' ),
    'parent_item_colon' => __( 'Nhà sản xuất cha:' ),
    'edit_item' => __( 'Cập nhật' ),
    'update_item' => __( 'Cập nhật' ),
    'add_new_item' => __( 'Thêm mới' ),
    'new_item_name' => __( 'Thêm nhà sản xuất mới' ),
    'menu_name' => __( 'Nhà sản xuất' ),
  );
   register_taxonomy
        (
            "manufacturers", "san-pham",
            array(
                        'hierarchical' => true,
                        'labels' => $labels,
                        'query_var' => true,
                        'rewrite' => true,
                        'show_ui' => true
        ));
  }
?>

Cũng vẫn tương tự như bạn tạo custom post_type thôi. Để qui định 2 cái taxonomy này thuộc post_type bạn tạo thì chúng ràng buộc với nhau bởi slug. slug của post_type bạn tạo ở trên là san-pham thì ở taxonomy phải ghi như thế và … xem thêm trong codex ^^ hehe.

Tạo custom field cho sản phẩm

Các field là các thông tin của 1 post ví dụ như với 1 post thông thuờng thì sẽ có title, content, tags,…

Còn đối với sản phẩm chúng ta thì sẽ cần các thông tin khác ví dụ như: giá, discount, hình minh họa, sản phẩm hot,…

Để làm được vậy thì ta phải tạo các custom field cho post_type sản phẩm. Vì đoạn code này khá dài nên mình không show code lên, các bạn xem code file custom_field.php trong source ở cuối bài nhé. Trong code nếu có đoạn nào khó hiểu thì các bạn cứ comment trong bài nhé.

Vậy là xong phần 3 rồi,nếu rãnh thì các bạn cố gắng nhập 1 vài dữ liệu mẫu để ở phần tiếp theo chúng ta sẽ code hiển thị từng phần cho front-end

Và đây là source của phần này và hãy cũng mình đi tiếp các phần sau nhé.