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

Sau khi hoàn thành các bước trong phần trước, bao gồm tạo các loại bài đăng tùy chỉnh và các hộp meta hoàn chỉnh để quản lý sản phẩm. Trong bài viết này, chúng tôi sẽ làm trang hiển thị chi tiết sản phẩm để hiển thị các thông tin mà chúng tôi đã nhập như giá cả, thuộc tính sản phẩm, v.v.

Tạo mẫu để hiển thị chi tiết sản phẩm

Như trong cấu trúc mẫu WordPress, nếu chúng ta sử dụng loại bài đăng tùy chỉnh, chúng ta có thể sử dụng single- {post-type} .php để hiển thị nội dung của loại bài đăng đó với truy vấn WordPress mặc định. Vì vậy, chúng tôi sẽ tạo tệp này, nhưng tốt hơn nên sao chép từ tệp /sparkling/single.php để đảm bảo cấu trúc phù hợp với chủ đề đang được sử dụng.

Chúng tôi có loại bài đăng sanpham vì vậy tập tin sẽ cần thiết single-sanpham.php để hiển thị nội dung của một sản phẩm. Chúng tôi sao chép tệp /sparkling/single.php Pháo đài /sparkling-child/single-sanpham.php được rồi, sau đó mở nó ra để tìm:

<?php get_template_part( ‘content’, ‘single’ ); ?>

Thay đổi thành


<?php get_template_part( ‘content’, ‘single-sanpham’ ); ?>

Trong đoạn mã trên, tệp single-sanpham.php sẽ gọi content-single-sanpham.php và hiển thị nó. Nhưng chúng tôi chưa có tệp nội dung này, vì vậy hãy sao chép từ /sparkling/content-single.php sang /sparkling-child/content-single-sanpham.php. Sau đó, thay đổi nội dung của tệp /sparkling-child/content-single-sanpham.php thành:

</pre>
<pre><?php
/**
* @package sparkling
*/
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-inner-content">
<header class="entry-header page-header">
<div class="left">
<?php if (has_post_thumbnail( $post->ID )) : ?>
<?php the_post_thumbnail( ‘sanpham_thumb’ ); ?>
<?php endif; ?>
</div>
<div class="right">
<h1 class="entry-title "><?php the_title(); ?></h1>
<div class="entry-cat"><?php the_taxonomies( $args ); ?></div>
<div class="entry-price">Giá: <?php echo get_post_meta( $post->ID, ‘sanpham_price’, true ); ?></div>
</div>

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

<div class="entry-content">
<?php the_content(); ?>

<div class="sanpham_att">
<?php $sanpham_atts = get_post_meta($post->ID, ‘sanpham_attributes’, false); ?>
<table class="sanpham_att_table">
<?php
foreach ($sanpham_atts as $atts) {
foreach ($atts as $att) {?>
<tr class="sanpham_att_table_row">
<th><?php echo $att[‘sanpham_att_name’]; ?></th>
<th><?php echo $att[‘sanpham_att_value’]; ?></th>
</tr>
<?php }
}
?>
</table>
</div>
<?php
wp_link_pages( array(
‘before’ => ‘<div class="page-links">’.esc_html__( ‘Pages:’, ‘sparkling’ ),
‘after’ => ‘</div>’,
‘link_before’ => ‘<span>’,
‘link_after’ => ‘</span>’,
‘pagelink’ => ‘%’,
‘echo’ => 1
) );
?>
</div><!– .entry-content –>

<footer class="entry-meta">

<?php if(has_tag()) : ?>
<!– tags –>
<div class="tagcloud">

<?php
$tags = get_the_tags(get_the_ID());
foreach($tags as $tag){
echo ‘<a href="’.get_tag_link($tag->term_id).’">’.$tag->name.'</a> ‘;
} ?>

</div>
<!– end tags –>
<?php endif; ?>

</footer><!– .entry-meta –>
</div>

<?php if (get_the_author_meta(‘description’)) : ?>
<div class="post-inner-content secondary-content-box">
<!– author bio –>
<div class="author-bio content-box-inner">

<!– avatar –>
<div class="avatar">
<?php echo get_avatar(get_the_author_meta(‘ID’) , ’60’); ?>
</div>
<!– end avatar –>

<!– user bio –>
<div class="author-bio-content">

<h4 class="author-name"><a href="<?php echo get_author_posts_url(get_the_author_meta( ‘ID’ )); ?>"><?php echo get_the_author_meta(‘display_name’); ?></a></h4>
<p class="author-description">
<?php echo get_the_author_meta(‘description’); ?>
</p>

</div><!– end .author-bio-content –>

</div><!– end .author-bio –>

</div>
<?php endif; ?>

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

Trong đó bạn lưu ý đây là phần hiển thị giá:


<div class="entry-price">Giá: <?php echo get_post_meta( $post->ID, ‘sanpham_price’, true ); ?></div>

Và đây là danh sách các thuộc tính sản phẩm được thêm vào sản phẩm:


<div class="sanpham_att">
<?php $sanpham_atts = get_post_meta($post->ID, ‘sanpham_attributes’, false); ?>
<table class="sanpham_att_table">
<?php
foreach ($sanpham_atts as $atts) {
foreach ($atts as $att) {?>
<tr class="sanpham_att_table_row">
<th><?php echo $att[‘sanpham_att_name’]; ?></th>
<th><?php echo $att[‘sanpham_att_value’]; ?></th>
</tr>
<?php }
}
?>
</table>
</div></pre>
<pre>

Nếu bạn không hiểu tại sao thì cứ xem video, trong video mình có giải thích rõ hơn.

Cuối cùng, chúng tôi thêm CSS để làm cho trang chi tiết sản phẩm hiển thị đúng hơn:


/**
* Trang hiển thị chi tiết sản phẩm
*/
.entry-header {
display: block;
overflow: auto;
}
.entry-header .left {
float: left;
margin-right: 1em;
width: 53%;
}
.entry-header .right {
float: right;
width: 42%;
}
.entry-price {
font-weight: bold;
color: #1dad1d;
font-size: 1.6em;
}

.sanpham_att_table {border-collapse:collapse;border-spacing:0;width: 100%;}
.sanpham_att_table td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.sanpham_att_table th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.sanpham_att_table .sanpham_att_table_row{vertical-align:top}

Bây giờ tạm thời chúng ta có kết quả sau:

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

Nhưng điều gì dường như vẫn còn thiếu? À, thiếu nút đặt hàng, ở bài sau mình sẽ hướng dẫn các bạn cách lập form đặt hàng đơn giản nhưng tiện lợi cho khách hàng đặt hàng thông qua plugin NinjaForm.

Đánh giá nội dung này

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