24. Sử dụng WordPress Template Tags toàn tập

Template Tags là tập hợp các hàm trong WordPress đã được xây dựng sẵn để người dùng sử dụng trong việc thiết kế template hay còn được gọi với cái tên thân mật là Themes. Nó là một thành phần khá quan trọng và là nền tảng kiến thức bắt buộc bạn phải biết , nếu muốn trờ thành một Developer WordPress chuyên nghiệp. Ở bài Sử dụng WordPress The Loop thì tôi cũng đã giới thiệu đến bạn một số các phương thức hỗ trợ trong Template Tags. Phần này có rất là nhiều phương thức nên tôi chỉ hướng dẫn bạn một số phương thức thông dụng chứ không thể nào trình bày toàn bộ hết các phương thức ở trong document được, bạn có thể tự lên đó để tìm hiểu thêm. Nội dung trong bài Sử dụng WordPress Template Tags toàn tập thì sẽ bao gồm giới thiệu tính năng của một số phương thức, và các phương thức đó được sử dụng tốt ở các file nào trên hệ thống WordPress.

1/ Các phương thức Template Tags thông dụng

Đầu tiên bạn cần phải đọc document của nó trước để xem một danh sách dài các phương thức, lúc đầu tôi mới nhìn vào cũng muốn chóng mặt luôn.

Bạn truy cập vào đường dẫn https://codex.wordpress.org/Template_Tags, như tôi đã nói ở các bài trước thì phần cấu trúc themes của WordPress có một quy tắc riêng và chúng ta khi thiết kế hoặc đụng chạm tới phần themes thì phải tuân thủ theo quy tắc đó.

Sử dụng WordPress Template Tags toàn tập

cau-truc-file-ho-tro-template-tags

Các file dùng để bố cục và xử lý cấu trúc themes cũng như kết hợp với các phương thức của Template Tags nằm trong folder wp-includes, và các phương thức chỉ hoạt động tốt khi được nạp vào đúng file mà nó có thể hỗ trợ.

Đầu tiên tôi sẽ giới thiệu bạn 3 phương thức chính bắt buộc phải có trong mỗi themes là.

· get_header() : Phương thức sẽ thực thi hành động includes file header.php vào trong file index.php và các file con còn lại như là page.php…vv.

· get_footer(): Phương thức này tương tự với get_header(), chỉ khác là nó includes file footer.phpmà thôi.

· get_sidebar(): Phương thức này sẽ includes file sidebar.php vào file index.php , nó chính là phần hiển thị các Widget nằm bên tay phải trên website của bạn.

Kế tiếp tôi sẽ ví dụ tính năng của một số phương thức vào trong file index.php của themes Twenty Ten.

<?php
/**
 * Main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
get_header ();
?>
<style>
#info {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>
<div id="container">
  <div id="content" role="main">
    <div id="info">
      <ul>
        <li>get_search_form():
          <?php get_search_form(); ?>
        </li>
        <li>wp_loginout():
          <?php echo wp_loginout(); ?>
        </li>
        <li>wp_logout_url():
          <?php echo wp_logout_url(); ?>
        </li>
        <li>wp_login_url():
          <?php echo wp_login_url(); ?>
        </li>
        <li>wp_login_form():
          <?php wp_login_form(); ?>
        </li>
        <li>wp_lostpassword_url():
          <?php echo wp_lostpassword_url(); ?>
        </li>
        <li>bloginfo():
          <?php bloginfo('name'); ?>
        </li>
        <li>bloginfo():
          <?php bloginfo('admin_email'); ?>
        </li>
      </ul>
    </div>
    <?php
    	get_template_part ( 'loop', 'index' );
    ?>
  </div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

F5 lại trình duyệt, và tôi có kết quả như hình.

Sử dụng WordPress Template Tags toàn tập

show-content-method-template-tags

Đây chỉ là một số ít phương thức hay được sử dụng thường xuyên, tôi sẽ chú thích tính năng của từng phương thức để bạn hiểu rõ vấn đề hơn.

Tôi đặt một thẻ div và gán cho nó id= info, và thực hiện đoạn bọc đường viền cho phần CSS căn bản, các phương thức sẽ được bao bọc bằng cặp thẻ <ul, <li.

· get_search_form(): Phương thức này sẽ includes file search.php vào.

· wp_loginout(): Phương thức này tạo ra một đường dẫn để thực hiện hành động đăng xuất khi bạn đang đăng nhập và sẽ thể hiện đường dẫn đăng nhập khi bạn chưa đăng nhập vào hệ thống, để sử dụng được nó bạn cần phải dùng kèm với hàm echo().

· wp_logout_url(): Phương thức này in ra đường dẫn đăng xuất và nó dùng kèm với hàm echo(). Bạn lưu ý các phương thức mà có tiền tố _url thì sẽ phải dùng hàm echo() mới in lấy ra được đường dẫn của nó.

· wp_login_url(): Thể hiện đường đẫn thực thi hành động đăng nhập.

· wp_login_form(): Phương thức này gọi ra phần login-form.

· wp_lostpassword_url(): Phương thức sẽ show ra đường dẫn lấy lại mật khẩu nếu bạn lỡ quên mật khẩu.

· bloginfo(‘name’): Phương thức lấy ra tiêu đề website mà bạn đã khai báo ở vùng admin trong trang setting.

· bloginfo(‘admin_email’): Lấy ra email của admin.

Toàn bộ các phương thức mà tôi vừa trình bày đều nằm trong file wp-includes/general-template.php. Tôi không thể nào trình bày hết toàn bộ phương thức nằm trong 9 file ở trên hình đâu nhé.

Các phương thức thuộc file wp-includes/author-template.php:

Các phương thức nằm trong file này chỉ được hỗ trợ khi nó được nạp vào file author.php, vậy tôi sẽ có đoạn code như sau.

File author.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

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

93

94

95

96

97

98

99

<?php

/**

* Template for displaying Author Archive pages

*

* @package WordPress

* @subpackage Twenty_Ten

* @since Twenty Ten 1.0

*/

get_header ();

?>

<style>

#info {

border: solid 1px #ccc;

padding: 10px;

}

</style>

<div id="container">

<div id="content" role="main">

<div id="info">

<ul>

<li>the_author() : <?php the_author();?></li>

<li>get_the_author() : <?php echo get_the_author();?></li>

<li>the_author_link() : <?php the_author_link();?></li>

<li>get_the_author_link() : <?php echo get_the_author_link();?></li>

<li>the_author_meta() : <?php the_author_meta()?></li>

<li>the_author_posts() : <?php the_author_posts();?></li>

<li>the_author_posts_link() : <?php the_author_posts_link()?></li>

<li>wp_dropdown_users() : <?php wp_dropdown_users();?></li>

<li>wp_list_authors() : <?php wp_list_authors()?></li>

<li>get_author_posts_url() : <?php echo get_author_posts_url(3);?></li>

</ul>

</div>

<?php

/*

* Queue the first post, that way we know who

* the author is when we try to get their name,

* URL, description, avatar, etc.

*

* We reset this later so we can run the loop

* properly with a call to rewind_posts().

*/

if (have_posts ())

the_post ();

?>

<h1 class="page-title author"><?php printf( __( 'Author Archives: %s', 'twentyten' ), "<span class='vcard'><a class='url fn n' href='" . get_author_posts_url( get_the_author_meta( 'ID' ) ) . "' title='" . esc_attr( get_the_author() ) . "' rel='me'>" . get_the_author() . "</a></span>" ); ?></h1>

<?php

// If a user has filled out their description, show a bio on their entries.

if (get_the_author_meta ( 'description' )) :

?>

<div id="entry-author-info">

<div id="author-avatar">

<?php

/**

* Filter the Twenty Ten author bio avatar size.

*

* @since Twenty Ten 1.0

*

* @param

* int The height and width avatar dimensions in pixels. Default 60.

*/

echo get_avatar ( get_the_author_meta ( 'user_email' ), apply_filters ( 'twentyten_author_bio_avatar_size', 60 ) );

?>

</div>

<!-- #author-avatar -->

<div id="author-description">

<h2><?php printf( __( 'About %s', 'twentyten' ), get_the_author() ); ?></h2>

<?php the_author_meta( 'description' ); ?>

</div>

<!-- #author-description -->

</div>

<!-- #entry-author-info -->

<?php endif; ?>

<?php

/*

* Since we called the_post() above, we need to

* rewind the loop back to the beginning that way

* we can run the loop properly, in full.

*/

rewind_posts ();

/*

* Run the loop for the author archive page to output the authors posts

* If you want to overload this in a child theme then include a file

* called loop-author.php and that will be used instead.

*/

get_template_part ( 'loop', 'author' );

?>

</div>

<!-- #content -->

</div>

<!-- #container -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Bạn cần click vào link trỏ tới author như hình thì mới xem được kết quả nha.

Sử dụng WordPress Template Tags toàn tập

template-tags-author-template

Đây là tất cả các phương thức nằm trong file author-template.php, tôi sẽ không chú thích nửa vì nhìn vào bạn sẽ hiểu được các phương thức sẽ thực hiện các hành động gì.

Các phương thức thuộc file wp-includes/category-template.php:

Tương tự như phần author, các phương thức cũng chỉ hỗ trợ khi bạn đang ở trong một category nào đó, và tôi sẽ xử lý code ở file category.php như 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

53

<?php

/**

* Template for displaying Category Archive pages

*

* @package WordPress

* @subpackage Twenty_Ten

* @since Twenty Ten 1.0

*/

get_header ();

?>

<style>

#info {

border: solid 1px #ccc;

padding: 10px;

}

</style>

<div id="container">

<div id="content" role="main">

<div id="info">

<ul>

<li>category_description() : <?php echo category_description(9);?></li>

<li>single_cat_title() : <?php single_cat_title('Kenshin - ',true);?></li>

<li>the_category() : <?php the_category(' - ');?></li>

<li>the_category_rss() : <?php the_category_rss();?></li>

<li>wp_dropdown_categories() : <?php wp_dropdown_categories()?></li>

<li>wp_list_categories() : <?php wp_list_categories();?></li>

</ul>

</div>

<h1 class="page-title"><?php

printf ( __ ( 'Category Archives: %s', 'twentyten' ), '<span>' . single_cat_title ( '', false ) . '</span>' );

?></h1>

<?php

$category_description = category_description ();

if (! empty ( $category_description ))

echo '<div class="archive-meta">' . $category_description . '</div>';

/*

* Run the loop for the category page to output the posts.

* If you want to overload this in a child theme then include a file

* called loop-category.php and that will be used instead.

*/

get_template_part ( 'loop', 'category' );

?>

</div>

<!-- #content -->

</div>

<!-- #container -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Bạn cần phải truy cập vào đường dẫn trỏ tới category bất kì nào đó thì mới thấy kết quả nha, vì nó chỉ hiển thị trong phần xử lý category mà thôi.

Sử dụng WordPress Template Tags toàn tập

category-template-tags

Tôi chỉ chú thích một số phương thức trong phần này mà thôi, vì có 1 số phương thức tôi cũng chưa hiểu nó là gì, tôi sẽ bổ sung ngay sau khi tôi hiểu về nó.

· single_cat_title(): Phương thức này có hai tham số, và tham số đầu tiên là tên tiền tố bạn truyền vào, tham số thứ 2 nếu bằng true sẽ hiện ra, còn bằng false nó biến mất luôn.

· the_category(): Lấy ra chính xác tên category mà bạn đang truy cập vào.

· wp_dropdown_categories(): Đưa toàn bộ category vào selectbox.

· wp_list_categories(): Lấy ra toàn bộ danh sách category và thể hiện theo phân cấp cha con.

2/Lời kết

Như vậy tôi chỉ có thể hướng dẫn bạn các phương thức nằm trong ở một số file xử lý template của Template Tags mà thôi, ngoài ra còn post tags, link tags, comment tags, thì bạn tự tìm hiểu lấy nhé, các tags này có quá nhiều phương thức mà tôi không thể nào trình bày hết được. Trong bài Sử dụng WordPress Template Tags toàn tập thì tôi đã cố gắng giới thiệu đến bạn các phương thức được sử dụng xuyên xuốt trong quá trình thiết kế themes cho WordPress, tuy chỉ là một số ít trong hàng trăm phương thức mà Template Tags cung cấp cho chúng ta, thì tôi muốn nhắn nhủ với bạn rằng, nếu bạn không thạo nó thì đừng mơ tới việc làm themes cho WordPress.

Series Navigation<< Sử dụng WordPress Shortcode APIHướng dẫn xây dựng WordPress Widget Support >>

Nguồn: laptrinhweb.org

Last updated