Code giao diện cho từng Category trong WordPress

Giá gốc là: 99.000 ₫.Giá hiện tại là: 79.000 ₫.

Hướng dẫn Code giao diện cho từng Category trong WordPress một cách đơn giản với những đoạn code sau đây. Xem ngay!

SẢN PHẨM MỚI
Thời trang thiết kế Lecoong

Code giao diện cho từng Category trong WordPress – Hầu như theme WordPress nào cũng hiển thị mặc định category rất xấu. Còn phần bài viết thì cũng chỉ hiển thị đúng nội dung biên tập là xong. Nhưng nhu cầu của các bạn chưa bao giờ là đủ. Nhiều bạn không biết code nhưng lại muốn thiết kế ở header như thế này hady Footer như thế kia và kể cả các category cũng vậy. Học viết code theo những hướng dẫn dưới đây nhé!

Hướng dẫn Code giao diện cho từng Category trong WordPress

Tạo giao diện khác nhau cho từng Category:

Trong phần này WordPress đã tương trợ sẵn do đó, bạn hãy tạo File category.php theo ID hoặc Slug riêng cho Category đó. Bước này tùy vào nhu cầu code thiết kế giao diện category theo nhu cầu của bạn nhé.

Ví dụ :

Theo ID: Bạn sẽ tạo 1 file là : category-id.php (category-1.php,category-2.php,category-3.php, …)

Theo Slug: file category sẽ sở hữu dạng: category-slug.php (category-tin-tuc.php, category-du-an.php, category-review.php)

EROSSKA CO

=> Dưới đây Tòn sẽ làm 1 ví dụ từ file category-review.php như sau.

Hướng dẫn Code giao diện cho chuyên mục Review từ file Category-review.php trong WordPress

Bước 1: Tạo file category-review.php trong thư theme

Bước 2: Đặt hàm hiển thị Header và Footer

<?php get_header();?>
<?php /* Template Name: Chuyên mục Review */ ?>

<!--Footer-->
<?php get_footer(); ?>

Bước 3: Hàm hiển thị Title của chuyên mục đó

<?php do_action( 'generate_after_archive_title' );?>

Bước 4: Hàm get nội dung chuyên mục Review

<?php
    	if (have_posts()){
    		while (have_posts()) : the_post();
    ?>

Giải thích: Hàm trên sẽ lấy dữ liệu được khi đặt tên ở bước 1.

<?php
      $argsProduct = array('orderby' => 'ASC','posts_per_page' => 10,'category_name' => "review");
      $postsProduct = get_posts($argsProduct);
      foreach ($postsProduct as $post) {
?>

Giải thích: Hàm trên sẽ lấy dữ liệu được khi đặt tên category_name (Hàm này thường dùng khi hiển thị chuyên mục ở trang chủ)

Posts_per_page => 10 (Số lượng bài viết hiển thị ở chuyên mục)

Bước 5: Hàm hiển thị hình ảnh + tiêu đề + mô tải bài viết

<!--Hiển thị hình ảnh bài viết-->
<div class="product-image">
   <a href="<?php the_permalink() ?>"><?php echo the_post_thumbnail() ?></a>
</div>

<!--Hiển thị tiêu đề bài viết-->            			
<h2 class="home-h2"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

<!--Hiển thị mô tả bài viết-->            				
<div class="excerpt">
    <?php
        $excerpt = get_the_excerpt();
        $excerpt = substr($excerpt, 0, 260);
        $result = substr($excerpt, 0, strrpos($excerpt, ' '));
        echo $result;
    ?>
</div>

Tổng code thiết kế giao diện category-review.php

<?php get_header();?>
<?php /* Template Name: Chuyên mục Review */ ?>
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,700&display=swap&subset=vietnamese" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">

<!--Nội dung Chuyên mục-->
<?php do_action( 'generate_after_archive_title' );?>

<!--Chuyên mục-->
<div class="home-1">
<div class="grid-container">
    <?php
        if ( function_exists('yoast_breadcrumb') ) {
        yoast_breadcrumb( '<p id="breadcrumbs" style="margin-bottom: 0em;padding: 10px;background: white;color: black;">','</p>' );
        }
    ?>
    		
    <div id="primary" class="content-area grid-parent mobile-grid-100 grid-75 tablet-grid-75">
        <div class="home-content">
            <header class="page-header<?php echo $clearfix; // WPCS: XSS ok, sanitization ok. ?>" style="padding: 20px 0 0 0;">
    			<?php
    			/**
    			 * generate_before_archive_title hook.
    			 *
    			 * @since 0.1
    			 */
    			do_action( 'generate_before_archive_title' );
    			?>
    
    			<h1 class="page-title" style="font-size: 177%;line-height: 1;margin-top: 0;margin-bottom: 26px;border-bottom: 2px solid #af1b23;">
    				<span itemprop="name" data-field="headline" data-title="<?php the_archive_title(); ?>" style="background-color: #af1b23;display: inline-block;padding: 7px 12px 4px 12px;color: #fff;text-transform: capitalize;"><?php the_archive_title(); ?></sapn>
    			</h1>
    	    </header><!-- .page-header -->
        
        	<div class="category-home row">
                <?php
        			$argsProduct = array('orderby' => 'ASC','posts_per_page' => 10,'category_name' => "review");
        			$postsProduct = get_posts($argsProduct);
        			foreach ($postsProduct as $post) {
        		?>
            <div class="col-1">
            	<div class="post-tin-tuc">
            		<div class="item product">
            		    
            			<div class="product-image">
            				<a href="<?php the_permalink() ?>"><?php echo the_post_thumbnail() ?></a>
            			</div>
            			
            			<div class="product-title home-nen">
            				<h2 class="home-h2"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
            				<div class="entry-meta">
            				    <span class="view" style="color: #837b7b;">
                                <?php echo getPostViews(get_the_ID()); ?> -
                                </span>
                                <?php generate_entry_meta(); ?>
            				</div>
            				<div class="excerpt">
            				    <?php
                                    $excerpt = get_the_excerpt();
                                    $excerpt = substr($excerpt, 0, 260);
                                    $result = substr($excerpt, 0, strrpos($excerpt, ' '));
                                    echo $result;
                                    ?>
                            </div>
            			</div>
            		</div>
            	</div>
            </div>
            	
            <?php
            }
            ?>
            </div>
        </div>
    </div>
    
    <!--Right Sidebar-->
    <?php generate_construct_sidebars();?>
    
</div>
</div>
<!--End Chuyên-->

<style>
.home-nen{
    border: 1px solid #eef1fd;
    -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
    -ms-box-shadow: 0 1px 1px rgba(0,0,0,.04);
    box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
    background: white;
    padding: 44px 10px 44px;
}
.home-content{padding-right: 20px}

.home-1 .product-image{
    float: left;
    width: 25%;
    padding-right: 20px;
}

.home-h2{font-size: 130%;}
   
.col-1{margin-bottom: 20px;}
    
/* CSS Mobile */
@media all and (max-width: 480px) {
.home-1 .product-image{
    float: none;
    width: 100%;
    padding-right: 0px;
    }

.home-content{padding-right: 0px}

}
 
/* CSS Desktop */
@media all and (max-width: 1024px) {
 
}
</style>

<!--Footer-->
<?php get_footer(); ?>

emili-lux
CayLeo Design

Gợi ý những mẫu giày xinh:

Gợi ý nước hoa thơm lâu toả hương xa:

Gợi ý dành cho nàng:

Gợi ý dành cho chàng:

Khách Hàng Khác Đang Xem:

Giá gốc là: 599.000 ₫.Giá hiện tại là: 468.000 ₫.
Giá gốc là: 750.000 ₫.Giá hiện tại là: 99.000 ₫.
Giá gốc là: 269.000 ₫.Giá hiện tại là: 99.000 ₫.
Giá gốc là: 359.000 ₫.Giá hiện tại là: 229.000 ₫.
Giá gốc là: 109.000 ₫.Giá hiện tại là: 99.000 ₫.
Giá gốc là: 95.000 ₫.Giá hiện tại là: 23.000 ₫.
Giá gốc là: 250.000 ₫.Giá hiện tại là: 99.000 ₫.
Giá gốc là: 363.000 ₫.Giá hiện tại là: 249.000 ₫.