Làm trang shop đơn giản với WordPress – 07 [NEW]

Chào mừng bạn đến với phần cuối cùng của loạt bài về cách tạo một cửa hàng đơn giản trên mã nguồn WordPress bằng cách áp dụng kiến ​​thức của bạn về các loại bài đăng tùy chỉnh, phân loại tùy chỉnh và hộp meta. Trong phần này, chúng ta sẽ thực hiện một việc cuối cùng đó là tạo mẫu hiển thị trang danh sách sản phẩm (hay còn gọi là trang lưu trữ của loại bài đăng tùy chỉnh) và mẫu hiển thị trang nội dung danh mục sản phẩm (hay còn gọi là trang lưu trữ để phân loại ).

Trang lưu trữ sản phẩm

Trên trang này, chúng tôi sẽ hiển thị tất cả dữ liệu trong loại bài đăng tùy chỉnh sanpham mà chúng tôi đã tạo. Theo cấu trúc mẫu WordPress, chúng tôi sẽ sử dụng tệp archive-sanpham.php để hiển thị. Nhưng hiện tại file này chưa tồn tại nên chúng ta sẽ copy nó từ file archive.php trong theme để đảm bảo tuân thủ cấu trúc của theme.

[alert color=”orange” type=”alert-message-background” title=”Lưu ý” size=”small”]Để trang lưu trữ sản phẩm hoạt động, mã tạo loại bài đăng tùy chỉnh phải có tham số has_archive với giá trị true.[/alert]

Bây giờ sao chép tệp /sparkling/archive.php sang trọng /sparkling-child/archive-sanpham.php.

Sau đó, tìm đoạn này và xóa nó đi vì nó không cần thiết để hiển thị:

<header class="page-header">
<h1 class="page-title">
<?php
if ( is_category() ) :
single_cat_title();

elseif ( is_tag() ) :
single_tag_title();

elseif ( is_author() ) :
printf( esc_html__( ‘Author: %s’, ‘sparkling’ ), ‘<span class="vcard">’ . get_the_author() . ‘</span>’ );

elseif ( is_day() ) :
printf( esc_html__( ‘Day: %s’, ‘sparkling’ ), ‘<span>’ . get_the_date() . ‘</span>’ );

elseif ( is_month() ) :
printf( esc_html__( ‘Month: %s’, ‘sparkling’ ), ‘<span>’ . get_the_date( _x( ‘F Y’, ‘monthly archives date format’, ‘sparkling’ ) ) . ‘</span>’ );

elseif ( is_year() ) :
printf( esc_html__( ‘Year: %s’, ‘sparkling’ ), ‘<span>’ . get_the_date( _x( ‘Y’, ‘yearly archives date format’, ‘sparkling’ ) ) . ‘</span>’ );

elseif ( is_tax( ‘post_format’, ‘post-format-aside’ ) ) :
esc_html_e( ‘Asides’, ‘sparkling’ );

elseif ( is_tax( ‘post_format’, ‘post-format-gallery’ ) ) :
esc_html_e( ‘Galleries’, ‘sparkling’);

elseif ( is_tax( ‘post_format’, ‘post-format-image’ ) ) :
esc_html_e( ‘Images’, ‘sparkling’);

elseif ( is_tax( ‘post_format’, ‘post-format-video’ ) ) :
esc_html_e( ‘Videos’, ‘sparkling’ );

elseif ( is_tax( ‘post_format’, ‘post-format-quote’ ) ) :
esc_html_e( ‘Quotes’, ‘sparkling’ );

elseif ( is_tax( ‘post_format’, ‘post-format-link’ ) ) :
esc_html_e( ‘Links’, ‘sparkling’ );

elseif ( is_tax( ‘post_format’, ‘post-format-status’ ) ) :
esc_html_e( ‘Statuses’, ‘sparkling’ );

elseif ( is_tax( ‘post_format’, ‘post-format-audio’ ) ) :
esc_html_e( ‘Audios’, ‘sparkling’ );

elseif ( is_tax( ‘post_format’, ‘post-format-chat’ ) ) :
esc_html_e( ‘Chats’, ‘sparkling’ );

else :
esc_html_e( ‘Archives’, ‘sparkling’ );

endif;
?>
</h1>
<?php
// Show an optional term description.
$term_description = term_description();
if ( ! empty( $term_description ) ) :
printf( ‘<div class="taxonomy-description">%s</div>’, $term_description );
endif;
?>
</header><!– .page-header –>

Tiếp tục tìm kiếm:

get_template_part( ‘content’, get_post_format() );

Thay thế nó bằng phần sau để nó gọi tệp content-archive-sanpham.php hiển thị nào, lý do tôi cung cấp tệp riêng để hiển thị là trang hiển thị sản phẩm sẽ có cấu trúc khác với các trang lưu trữ khác.

get_template_part( ‘content’, ‘archive-sanpham’ );

Sau đó, tạo tệp /sparkling-child/content-archive-sanpham.php với nội dung sau:

<?php
/**
* @package sparkling
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(array(‘sanpham_cat’)); ?>>
<div class="blog-item-wrap">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail( ‘sanpham_thumb’, array( ‘class’ => ‘sanpham_thumb’ )); ?>
</a>
<div class="post-inner-content">
<header class="entry-header page-header">

<h3 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="entry-price">Giá: <?php echo get_post_meta( $post->ID, ‘sanpham_price’, true ); ?></div>

</header><!– .entry-header –>

</div>
</div>
</article><!– #post-## –>

Và trong trang lưu trữ sản phẩm, chúng tôi muốn hiển thị các sản phẩm dưới dạng lưới, vì vậy chúng tôi sẽ tiến hành thêm một lớp even vào các sản phẩm theo thứ tự số chẵn và odd cho các sản phẩm theo thứ tự là số lẻ để chúng ta dễ dàng viết CSS để tách các cột.

Thêm mã sau vào functions.php:

/**
* @param $classes
* @return array
* Thêm class even vào các sản phẩm số chẵn trong loop
*/
function thachpham_grid_classes($classes) {
if( is_archive() ) {
global $wp_query;
$classes[] = ( $wp_query->current_post%2 === 0 ? ‘odd’ : ‘even’ );
}
return $classes;
}
add_filter(‘post_class’, ‘thachpham_grid_classes’);

Và thêm CSS vào style.css để nó hiển thị dưới dạng lưới.


/**
* CSS hiển thị trang lưu trữ sản phẩm theo dạng lưới
*/
.post-type-archive-sanpham .main-content-inner {

}
.post-type-archive-sanpham .main-content-inner .odd {
width: 48.5%;
float: left;
}
.post-type-archive-sanpham .main-content-inner .even {
width: 49.5%;
float: right;
}
.post-type-archive-sanpham .main-content-inner .even:after {
display: table;
clear: both;
content: "";
}
.paging-navigation {
overflow: auto;
width: 100%;
}
.post-type-archive-sanpham .main-content-inner .hentry {
background: #fff;
margin-bottom: 1em;

}
.post-type-archive-sanpham .blog-item-wrap {
margin-bottom: 0;
}
.post-type-archive-sanpham .post-inner-content {
border: none !important;
}
.post-type-archive-sanpham .post-inner-content .entry-title {
font-size: 21px;
margin-bottom: 15px;
}

Và kết quả chúng ta nhận được khi truy cập vào liên kết http: // domain / sanpham

Làm trang shop đơn giản với WordPress – 07 [NEW]

Nó cũng ổn chứ?

Trang lưu trữ danh mục sản phẩm

Trong trang lưu trữ danh mục sản phẩm, chúng tôi cũng hiển thị giống như trang lưu trữ sản phẩm. Bây giờ sao chép tệp /sparkling-child/archive-sanpham.php Pháo đài /sparkling-child/taxonomy-sanpham_cat.php.

Sau đó tìm:

<?php if ( have_posts() ) : ?>

Thêm phần sau vào bên dưới nó để hiển thị mô tả của từng loại sản phẩm:


<header class="page-header">
<h1 class="page-title">
<?php
if( is_tax(‘sanpham_cat’) ) {
global $wp_query;
$term = $wp_query->get_queried_object();
$title = $term->name;
echo $title;
}
?>
</h1>
<?php
// Show an optional term description.
$term_description = term_description();
if ( ! empty( $term_description ) ) :
printf( ‘<div class="taxonomy-description">%s</div>’, $term_description );
endif;
?>
</header>

Và bây giờ quay lại style.css tìm đoạn này:


/**
* CSS hiển thị trang lưu trữ sản phẩm theo dạng lưới
*/
.post-type-archive-sanpham .main-content-inner {

}
.post-type-archive-sanpham .main-content-inner .odd {
width: 48.5%;
float: left;
}
.post-type-archive-sanpham .main-content-inner .even {
width: 49.5%;
float: right;
}
.post-type-archive-sanpham .main-content-inner .even:after {
display: table;
clear: both;
content: "";
}
.paging-navigation {
overflow: auto;
width: 100%;
}
.post-type-archive-sanpham .main-content-inner .hentry {
background: #fff;
margin-bottom: 1em;

}
.post-type-archive-sanpham .blog-item-wrap {
margin-bottom: 0;
}
.post-type-archive-sanpham .post-inner-content {
border: none !important;
}
.post-type-archive-sanpham .post-inner-content .entry-title {
font-size: 21px;
margin-bottom: 15px;
}

Thêm các lớp trang lưu trữ danh mục sản phẩm vào CSS ở trên như thế này:


/**
* CSS hiển thị trang lưu trữ sản phẩm theo dạng lưới
*/
.post-type-archive-sanpham .main-content-inner,
.tax-sanpham_cat .main-content-inner {

}
.post-type-archive-sanpham .main-content-inner .odd,
.tax-sanpham_cat .main-content-inner .odd {
width: 48.5%;
float: left;
}
.post-type-archive-sanpham .main-content-inner .even,
.tax-sanpham_cat .main-content-inner .even {
width: 49.5%;
float: right;
}
.post-type-archive-sanpham .main-content-inner .even:after,
.tax-sanpham_cat .main-content-inner .even:after {
display: table;
clear: both;
content: "";
}
.paging-navigation {
overflow: auto;
width: 100%;
}
.post-type-archive-sanpham .main-content-inner .hentry,
.tax-sanpham_cat .main-content-inner .hentry {
background: #fff;
margin-bottom: 1em;

}
.post-type-archive-sanpham .blog-item-wrap,
.tax-sanpham_cat .blog-item-wrap {
margin-bottom: 0;
}
.post-type-archive-sanpham .post-inner-content,
.tax-sanpham_cat .post-inner-content {
border: none !important;
}
.post-type-archive-sanpham .post-inner-content .entry-title,
.tax-sanpham_cat .post-inner-content .entry-title {
font-size: 21px;
margin-bottom: 15px;
}

Tạo trang chủ hiển thị các sản phẩm trên trang chủ

Nếu bạn muốn trang chủ hiển thị danh sách sản phẩm giống như các trang lưu trữ thì hãy sao chép tệp /sparkling-child/archive-sanpham.php Pháo đài /sparkling-child/home.php.

Sau đó thêm mã sau /sparking-child/functions.php để hiển thị sản phẩm bên ngoài trang chủ, vì theo mặc định, truy vấn ngoài trang chủ chỉ hiển thị các loại bài đăng thuộc post.

/**
* @param $query
* Thiết lập hiển thị post type `sanpham` ngoài trang chủ.
*/
function thachpham_product_home1($query) {
if ( $query->is_home() && $query->is_main_query() ) {
$query->set( ‘post_type’, ‘sanpham’ );
}
}
add_filter(‘pre_get_posts’, ‘thachpham_product_home1’);

Và thay đổi CSS để hiển thị trang lưu trữ sản phẩm như sau:


/**
* CSS hiển thị trang lưu trữ sản phẩm theo dạng lưới
*/
.post-type-archive-sanpham .main-content-inner,
.tax-sanpham_cat .main-content-inner,
.home .main-content-inner{

}
.post-type-archive-sanpham .main-content-inner .odd,
.tax-sanpham_cat .main-content-inner .odd,
.home .main-content-inner .odd{
width: 48.5%;
float: left;
}
.post-type-archive-sanpham .main-content-inner .even,
.tax-sanpham_cat .main-content-inner .even,
.home .main-content-inner .even{
width: 49.5%;
float: right;
}
.post-type-archive-sanpham .main-content-inner .even:after,
.tax-sanpham_cat .main-content-inner .even:after,
.home .main-content-inner .even:after{
display: table;
clear: both;
content: "";
}
.paging-navigation {
overflow: auto;
width: 100%;
}
.post-type-archive-sanpham .main-content-inner .hentry,
.tax-sanpham_cat .main-content-inner .hentry,
.home .main-content-inner .hentry {
background: #fff;
margin-bottom: 1em;

}
.post-type-archive-sanpham .blog-item-wrap,
.tax-sanpham_cat .blog-item-wrap,
.home .blog-item-wrap{
margin-bottom: 0;
}
.post-type-archive-sanpham .post-inner-content,
.tax-sanpham_cat .post-inner-content,
.home .post-inner-content{
border: none !important;
}
.post-type-archive-sanpham .post-inner-content .entry-title,
.tax-sanpham_cat .post-inner-content .entry-title,
.home .post-inner-content .entry-title {
font-size: 21px;
margin-bottom: 15px;
}

Xong rôi.

Phần kết

Trong loạt bài này, chúng ta sẽ kết thúc bằng việc tạo một trang cửa hàng đơn giản để hiểu cách làm việc với các loại bài đăng tùy chỉnh. Nên các bạn cũng đừng thắc mắc tại sao nó không có nhiều chức năng hay không đẹp vì cái đẹp ở mỗi người là khác nhau, nên trong loạt bài này mình chỉ hướng dẫn với mục đích để các bạn hiểu rõ cách làm, nếu muốn hay hơn thì các bạn nhé. bạn có thể nghiên cứu thêm về CSS hoặc kiến ​​thức về phát triển web front-end.

Thời hạn hiện tại do hơi bận với công ty AZDIGI nên có thể bộ truyện chưa phong phú lắm nhưng mình sẽ cố gắng cải thiện chất lượng ở các bộ sau nhiều hơn.

5/5 – (2 phiếu bầu)

Tiếp tục đọc trong bộ truyện