29. Hiển thị WordPress Meta boxes ngoài trang chủ.docx
Previous28+. CÁCH TỰ TẠO MỘT META BOX ĐƠN GIẢN TOÀN TẬP (ok)Next30. Tương tác database với WordPress Meta boxes
Last updated
Was this helpful?
Last updated
Was this helpful?
Như vậy ở hai bài trước thì tôi đã hướng dẫn bạn xây dựng Book Metaboxes và cũng chỉ hướng tối ưu & bảo mật Metaboxes khá chi tiết và đầy đủ, Hôm nay tôi sẽ hướng dẫn bạn cách hiển thị phần Metaboxes đó ra ngoài trang chủ của một giao diện bất kì mà bạn thích. Tuy nhiên chúng ta sẽ không sửa code trong các themes đó mà sẽ kế thừa lại themes gốc và chỉ override lên nó một số thứ mà thôi, giang hồ hay gọi vấn đề này với tên thân mật là Child Themes. Nội dung trong bàiHiển thị WordPress Metaboxes ngoài trang chủ sẽ trình bày hai vấn đề cốt lõi như sau.
· Cách tạo và sử dụng Child Themes
· Đưa Book Metaboxes ra ngoài trang chủ trong một Themes bất kì
Ok, bây giờ tôi sẽ bớt luyên thuyên và sẽ tập trung vào chủ đề của bài hơn.
1/ Cách tạo và sử dụng Child Themes
Có vô vàn hướng dẫn cách tạo Child Themes trên google nhưng tài liệu quan trọng và thiết thực nhất vẫn chính là từ trang chủ của WordPress, bạn vào đường dẫn https://codex.wordpress.org/Child_Themes, nó có đầy đủ mọi thứ mà bạn cần để tìm hiểu về vấn đề này.
Tuy nhiên để hiểu được nó thì bạn phải dùng tới Google Translate thần thánh, bản thân tôi cũng hay sử dụng khi đọc tài liệu tiếng anh, bởi vì ngoại ngữ của tôi khá kém. Để tiết kiệm thời gian tìm hiểu cho bạn thì tôi sẽ hướng dẫn bạn cách tạo Child Themes và sử dụng nó một cách chi tiết như sau.
Tôi quyết định chọn Themes Twenty ten là themes cha, và tôi sẽ kế thừa toàn bộ tính năng Themes này hỗ trợ cũng như hoàn toàn có thể Override để thêm bớt một số tính năng khác mà không sợ khi hệ thống WordPress Update Themes này thì website của bạn sẽ bị lỗi.
Thật ra việc tạo Child Themes nó khá là đơn giản, chỉ cần 2 thao tác là bạn thực hiện xong việc đó ngay. Đừng tưởng tôi nói đùa nhé, đầu tiên thì bạn sẽ copy đoạn text này từ document mà tôi đã đưa đường dẫn ở phía trên.
Đoạn code tạo ra Child Themes
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */
Lúc này bạn vào folder wp-content/themes và tạo ra folder twentyten-child, đây là yếu tố bắt buộc nếu bạn muốn kế thừa mọi thứ từ themes cha. Sau khi tạo xong thì bạn tạo file style.css nằm trong folder twentyten-child và nó có nội dung như sau.
1
2
3
4
5
6
7
8
9
10
11
12
13
/*
Theme Name: My Themes Child
Theme URI: http://laptrinhweb.org
Description: Child Themes - Twenty Ten
Author: Kenshin
Author URI: http://laptrinhweb.org
Template: twentyten
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-ten-child
*/@import url('../twentyten/style.css');
Các thông số bên trong file style.css thì bạn chỉ cần quan tâm các giá trị như là Theme Name, Theme URI, Description và giá trị quan trọng nhất chính là Template, bạn phải đưa vào đó chính xác tên folder themes mà bạn đang kế thừa. Và cuối cùng nếu bạn muốn sử dụng và Override các thuộc tính CSS của themes cha thì nên thêm dòng import vào nhé.
Nếu bạn muốn có cái hình đại diện cho themes hoặc bạn sử dụng lại hình đại diện từ themes cha cũng được, copy file screenshot.png qua là xong ngay thôi.
child-themes-twenty-ten
Để kiểm tra thì bạn truy cập vào http://localhost/wordpress/wp-admin/themes.php khu vực quản lý Themes và xem kết quả có đúng ý bạn không.
active-child-themes-twentyten
Lúc này tôi chỉ việc active Child Themes lên và hưởng thụ thành quả thôi, quá đơn giản đúng không bạn ? tôi đâu gạt bạn đâu. hehe.
Lúc này bạn chỉ việc sử dụng Themes này bình thường, vì mọi tính năng của nó y chang themes cha mà thôi.
2/ Hiển thị Book Metaboxes ngoài trang chủ
Trước khi thực hiện điều này thì đầu tiên bạn cần phải xóa đi hết các giá trị cũ mà bạn đã nhập liệu bằng cách truy cập vào phpmyadmin vào table wp_postmeta, vào tab SQL ở phía trên đầu.
Ở filed meta_key bạn copy giá trị _ks_mb_data_ , đây chính là phần tử key mà bạn đã khai báo trong code, bạn thay đổi cho đúng với key mà bạn đã khai báo và không nhất thiết là phải giống tôi đâu nha.
Gõ vào tab SQL đoạn mã
1
SELECT * FROM `wp_postmeta` WHERE `meta_key` LIKE '%_ks_mb_data_%'
Sau đó bấm Go thì trình duyệt sẽ chuyển bạn sang 1 trang và trong đó thể hiện toàn bộ nội dung có liên quan tới key mà bạn vừa tìm kiếm, bạn chọn checkAll và sau đó delete toàn bộ dữ liệu đó đi.
Lúc này bạn sang themes cha copy file loop-single.php, do chúng ta sẽ hiển thị phần Book Metaboxes khi click vào xem chi tiết một bài viết nào đó, và ở bài Template Tags, thì tôi cũng để giải thích vấn đề này rồi, bạn nên xem lại nếu như không hiểu mục đích file loop-single.php làm gì.
Nội dung file loop-single.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
<?php
/**
* The loop that displays a single post
*
* The loop displays the posts and the post content. See
* http://codex.wordpress.org/The_Loop to understand it and
* http://codex.wordpress.org/Template_Tags to understand
* the tags used in it.
*
* This can be overridden in child themes with loop-single.php.
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.2
*/
?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="nav-above" class="navigation">
<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '→', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>
</div><!-- #nav-above -->
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="entry-meta">
<?php twentyten_posted_on(); ?>
</div><!-- .entry-meta -->
<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php if ( get_the_author_meta( 'description' ) ) : // If a user has filled out their description, show a bio on their entries ?>
<div id="entry-author-info">
<div id="author-avatar">
<?php
/** This filter is documented in author.php */
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 id="author-link">
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" rel="author">
<?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'twentyten' ), get_the_author() ); ?>
</a>
</div><!-- #author-link -->
</div><!-- #author-description -->
</div><!-- #entry-author-info -->
<?php endif; ?>
<div class="entry-utility">
<?php twentyten_posted_in(); ?>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-utility -->
</div><!-- #post-## -->
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '→', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>
</div><!-- #nav-below -->
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
Tôi sẽ hiển thị phần box đó ở phía dưới phần hiển thi tiêu đề bài viết. Đầu tiên tôi sẽ tạo ra một mảng chứa tên của các key đã nhập liệu vào database. do chúng ta gọi ra nó nên cần xác định 9 xác tên của key để lấy ra đúng dữ liệu mà bạn cần.
Để lấy ra được các dữ liệu từ database thì tôi sẽ sử dụng lại phương thức get_post_meta() mà tôi đã hướng dẫn bạn cách dùng ở bài trước. Tôi cũng tạo ra một cặp thẻ <div và lát nửa tôi sẽ cho phần Book Metaboxes hiển thị ở trong vùng này.
Đậy là đoạn code xử lý mảng chứa key của các textbox trong form.
1
2
3
4
5
6
7
// Mảng chứa key
$args = array(
'title' => '_ks_mb_data_title',
'price' => '_ks_mb_data_price',
'author' => '_ks_mb_data_author',
'info' => '_ks_mb_data_info'
);
Kế tiếp tôi sẽ tạo ra các biến để hứng giá trị mà get_post_meta() trả về, và sau đó cuối cùng là echo các biến đó ra để hiển thị phần box.
Để lấy được ID của bài viết trong vùng đang sử dụng The Loop thì bạn sẽ phải dùng tới phương thức get_the_ID().
1
2
3
4
5
6
7
8
9
10
11
12
$title = get_post_meta(get_the_ID(), $args['title'], true);
if (! empty($title))
$title = "<li>Title: {$title}</li>";
$price = get_post_meta(get_the_ID(), $args['price'], true);
if (! empty($price))
$price = "<li>Price: {$price}</li>";
$author = get_post_meta(get_the_ID(), $args['author'], true);
if (! empty($author))
$author = "<li>Author: {$author}</li>";
$info = get_post_meta(get_the_ID(), $args['info'], true);
if (! empty($info))
$info = "<li>Info: {$info}</li>";
Và tôi sẽ kiểm tra nếu các biến khác rỗng tức là biến có giá trị thì mới hiển thị dữ liệu ra, còn không thì nó sẽ chẳng hiện gì hết, điều này sẽ giúp cho các bạn viết không sử dụng Metaboxes sẽ không bị lỗi.
Lúc này tôi sẽ tiến hành viết css để trang trí cho phần box bắt mắt và dễ nhìn hơn, nhưng câu hỏi đặt ra là nếu tôi đang làm việc trên plugin thì quá đơn giản chỉ cần tạo ra một phương thức sau đó nhúng nhúng nó vào Hook wp_head hoặc Hook wp_enqueue_style.
Nhưng khi bạn đang làm việc trong themes thì hạn chế sử dụng cách này nhé, tôi sẽ hướng dẫn bạn một cách khác nhanh gọn và lẹ hơn như sau.
Để lấy được đường dẫn trong Child Theme thì bạn sử dụng phương thức get_stylesheet_directory_uri(), bạn có thể google thêm để biết nó làm gì hen.
Tôi tạo thêm folder css và file book-meta.css.
1
2
3
4
5
6
7
@CHARSET "ISO-8859-1";
.book-metaboxes{
border: 1px solid #ccc;
padding: 3px;
margin: 3px;
background: #f2f7fc;
}
Do bạn sử dụng CSS nên khi click vào các bài viết khác không sử dụng Metaboxes thì nó sẽ hiện cái background rỗng ra nhìn mất thẩm mỹ vô cùng, vì vậy bạn cần kiểm tra nếu các biến khác rỗng thì mới hiển thị dữ liệu ra.
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
100
101
102
<?php
/**
* The loop that displays a single post
*
* The loop displays the posts and the post content. See
* http://codex.wordpress.org/The_Loop to understand it and
* http://codex.wordpress.org/Template_Tags to understand
* the tags used in it.
*
* This can be overridden in child themes with loop-single.php.
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.2
*/
?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="nav-above" class="navigation">
<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '→', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>
</div><!-- #nav-above -->
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php
// Mảng chứa key
$args = array(
'title' => '_ks_mb_data_title',
'price' => '_ks_mb_data_price',
'author' => '_ks_mb_data_author',
'info' => '_ks_mb_data_info'
);
$title = get_post_meta(get_the_ID(), $args['title'], true);
if (!empty($title)) $title = "<li>Title: {$title}</li>";
$price = get_post_meta(get_the_ID(), $args['price'], true);
if (!empty($price)) $price = "<li>Price: {$price}</li>";
$author = get_post_meta(get_the_ID(), $args['author'], true);
if (!empty($author)) $author = "<li>Author: {$author}</li>";
$info = get_post_meta(get_the_ID(), $args['info'], true);
if (!empty($info)) $info = "<li>Info: {$info}</li>";
if(!empty($title) || !empty($price) || !empty($author) || !empty($info)):
$cssUrl = get_stylesheet_directory_uri() . '/css/book-meta.css';
?>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo $cssUrl; ?>">
<div class="book-metaboxes">
<ul>
<?php
echo $title . ' ' . $price . ' ' . $author . ' ' .$info;
?>
</ul>
</div>
<?php endif; ?>
<div class="entry-meta">
<?php twentyten_posted_on(); ?>
</div><!-- .entry-meta -->
<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php if ( get_the_author_meta( 'description' ) ) : // If a user has filled out their description, show a bio on their entries ?>
<div id="entry-author-info">
<div id="author-avatar">
<?php
/** This filter is documented in author.php */
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 id="author-link">
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" rel="author">
<?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'twentyten' ), get_the_author() ); ?>
</a>
</div><!-- #author-link -->
</div><!-- #author-description -->
</div><!-- #entry-author-info -->
<?php endif; ?>
<div class="entry-utility">
<?php twentyten_posted_in(); ?>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-utility -->
</div><!-- #post-## -->
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '→', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>
</div><!-- #nav-below -->
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
Và đây là kết quả cuối cùng mà tôi đang mong đợi.
show-book-metaboxes-in-homepage-with-child-theme
3/ Lời kết
Tôi vừa hướng dẫn bạn Hiển thị WordPress Metaboxes ngoài trang chủ bằng cách tạo mới và sử dụng một Child Theme, sử dụng một số phương thức hỗ trợ khác, chỉ với 4 bài viết thì bạn đã biết quy trình tạo mới một Metaboxes đơn giản như thế nào, tương tác , bảo mật và tối ưu nó một cách toàn diện.
Series Navigation<< Bảo mật và tối ưu WordPress Meta boxesSử dụng WordPress Custom Post Type nâng cao >>
Nguồn: laptrinhweb.org
