Thiết kế category WordPress đẹp đơn giản

Thiết kế category WordPress đẹp đơn giản – Đa số các theme WordPress, giao diện chuyên mục (category) ma chê quỷ hờn phải không các bác. Đặc biệt là nó load chậm má la luôn ấy. Vậy để code category một cách đơn giản và đẹp thì làm như thế nào đây? Mời các anh em xem bên dươi bài viết này nhé!

Code category WordPress đẹp đơn giản

Tạo trang chuyên mục riêng theo ý bạn có vẻ khó. Nhưng một khi bạn có một ý tưởng rõ ràng để làm theo. Thì việc thiết kế chuyên mục WP là điều vô cùng đơn giản. Dưới đây là mẫu code category mà Tòn vừa lập trình lại.

Thiết kế category WordPress đẹp đơn giản

Hướng dẫn Thiết kế category WordPress chuyên nghiệp

Bước 1: Vào thư mục theme bạn đang dùng tạo một file category.php

Lưu ý: Nếu mặc định theme bạn dùng đã có file này rồi, thì bạn đổi tên nó đi nhé. Rồi tạo một file category.php mới => Trường hợp code dưới đây không tương thích thì đổi tên về như củ hehe 😀  

Bước 2: Copy toàn bộ code dưới đây vào file category.php vừa tạo nhé.

<?php /* Template Name: Page - Full Width */ ?>
<?php get_header(); ?>

<?php
    if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb( '<p id="breadcrumbs" style="margin-bottom: 0em;padding: 10px;background: #fafafa;">','</p>' );
    }
?>
        <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 style="background-color: #af1b23;display: inline-block;padding: 7px 12px 4px 12px;color: #fff;text-transform: capitalize;"><?php the_archive_title(); ?></sapn>
            </h1>

            <?php
            /**
             * generate_after_archive_title hook.
             *
             * @since 0.1
             *
             * @hooked generate_do_archive_description - 10
             */
            do_action( 'generate_after_archive_title' );
            ?>
        </header><!-- .page-header -->
        

<div class="category-tin-tuc row">
<?php
    if (have_posts()){
        while (have_posts()) : the_post();
?>
<div class="col-1">
    <div class="post-tin-tuc">
        <div class="item product">
            <div class="zoom-effect-container">
            <div class="product-image image-card">
                <a href="<?php the_permalink() ?>"><?php echo the_post_thumbnail() ?></a>
            </div>
            </div>
            <div class="product-title">
                <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
                <div class="excerpt">
                    <?php
                        $excerpt = get_the_excerpt();
                        $excerpt = substr($excerpt, 0, 260);
                        $result = substr($excerpt, 0, strrpos($excerpt, ' '));
                        echo $result;
                        ?>
                </div>
                <div class="entry-readmore" style="padding: 16px 0 16px 0;">
                    <a class="glow-on-hover" type="button" href="<?php the_permalink(); ?>" rel="nofollow noreferrer" alt="Xem chi tiết" title="Xem chi tiết">Xem chi tiết<i class="fa fa-angle-right" style="margin-left: 8px;"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
    
<?php
    endwhile;
}
?>
</div>

<?php if(paginate_links()!='') {?>
    <div class="quatrang">
        <?php
        global $wp_query;
        $big = 999999999;
        echo paginate_links( array(
            'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
            'format' => '?paged=%#%',
            'prev_text'    => __('« Mới hơn'),
            'next_text'    => __('Tiếp theo »'),
            'current' => max( 1, get_query_var('paged') ),
            'total' => $wp_query->max_num_pages
            ) );
        ?>
    </div>
<?php } ?>

<style>
.category-tin-tuc .product-title h2{font-size: 149%;}

.category-tin-tuc .item{padding: 10px;box-shadow: 0 1px 10px 0 rgba(34,34,34,.08), 0 4px 5px 0 rgba(34,34,34,.1);}

.quatrang{text-align: center;font-size: 16px;padding-top: 30px;padding-bottom: 30px;line-height: 3;}

span.page-numbers.current {
    background: #ff4700;
    color: #fff;
}

.quatrang a, .quatrang span {
    border: 1px solid #ddd;
    padding: 10px 15px;
    border-radius: 8px;
}

.row{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 0;
    margin-left: 0;
}

.col-1{
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.post-tin-tuc{padding:10px;}

@media only screen and (max-width: 480px){
    .col-1 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

.zoom-effect-container {
    position: relative;
    width: 100%;
    height: 360px;
    margin: 0 auto;
    overflow: hidden;
}

.image-card {
  position: absolute;
  top: 0;
  left: 0;
  
}

.image-card img {
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}

.zoom-effect-container:hover .image-card img {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}
</style>

<?php get_footer(); ?>

Sau khi bạn dán vào và lưu lại sẽ có kết quả như hình bên trên nhé.

Xem cụ thể tại link https://camranhmedia.com/tin-tuc

Giải thích các hàm code trên

Hiển thị Header và Footer

<?php get_header(); ?> //Hiển thị Header

<?php get_footer(); ?> //Hiển thị Footer

Lấy nội dung chuyên mục

//Get nội dung chuyên mục
<div class="category-tin-tuc row">
<?php
    if (have_posts()){
        while (have_posts()) : the_post();
?>
<div class="col-1">
    <div class="post-tin-tuc">
        <div class="item product">
            <div class="zoom-effect-container">
            <div class="product-image image-card">
                <a href="<?php the_permalink() ?>"><?php echo the_post_thumbnail() ?></a>
            </div>
            </div>
            <div class="product-title">
                <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
                <div class="excerpt">
                    <?php
                        $excerpt = get_the_excerpt();
                        $excerpt = substr($excerpt, 0, 260);
                        $result = substr($excerpt, 0, strrpos($excerpt, ' '));
                        echo $result;
                        ?>
                </div>
                <div class="entry-readmore" style="padding: 16px 0 16px 0;">
                    <a class="glow-on-hover" type="button" href="<?php the_permalink(); ?>" rel="nofollow noreferrer" alt="Xem chi tiết" title="Xem chi tiết">Xem chi tiết<i class="fa fa-angle-right" style="margin-left: 8px;"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
    
<?php
    endwhile;
}
?>
</div>

Phân trang chuyên mục (Category)

<?php if(paginate_links()!='') {?>
    <div class="quatrang">
        <?php
        global $wp_query;
        $big = 999999999;
        echo paginate_links( array(
            'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
            'format' => '?paged=%#%',
            'prev_text'    => __('« Mới hơn'),
            'next_text'    => __('Tiếp theo »'),
            'current' => max( 1, get_query_var('paged') ),
            'total' => $wp_query->max_num_pages
            ) );
        ?>
    </div>
<?php } ?>

Hiệu ứng CSS

.category-tin-tuc .product-title h2{font-size: 149%;}

.category-tin-tuc .item{padding: 10px;box-shadow: 0 1px 10px 0 rgba(34,34,34,.08), 0 4px 5px 0 rgba(34,34,34,.1);}

.quatrang{text-align: center;font-size: 16px;padding-top: 30px;padding-bottom: 30px;line-height: 3;}

span.page-numbers.current {
    background: #ff4700;
    color: #fff;
}

.quatrang a, .quatrang span {
    border: 1px solid #ddd;
    padding: 10px 15px;
    border-radius: 8px;
}

.row{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 0;
    margin-left: 0;
}

.col-1{
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.post-tin-tuc{padding:10px;}

@media only screen and (max-width: 480px){
    .col-1 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

.zoom-effect-container {
    position: relative;
    width: 100%;
    height: 360px;
    margin: 0 auto;
    overflow: hidden;
}

.image-card {
  position: absolute;
  top: 0;
  left: 0;
  
}

.image-card img {
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}

.zoom-effect-container:hover .image-card img {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}
Xem chi tiết