TẠO THEME WORDPRESS TOÀN TẬP (Phần 3)

TẠO THEME WORDPRESS TOÀN TẬP (Phần 3)

Tiếp tục series về cách tạo theme WordPress toàn tập, hôm nay chúng ta sẽ làm những block còn lại mà phần trước chưa làm xong.

Chúng ta tiếp tục xét qua các block sẽ làm trong phần này

1. Block Service

Chúng ta có 4 cục Service, mỗi cục bao gồm icon, tiêu đề và mô tả.

Block này hoàn toàn có thể làm giống như block Banner chúng ta đã làm ở phần trước, tuy nhiên hôm nay mình sẽ chia sẻ thêm 1 cách mới cho các bạn. Để các bạn có nhiều sự lựa chọn hơn trong việc tạo theme WordPress, cũng như sẽ dựa vào từng hoàn cảnh của theme để áp dụng.

Các bạn mở file functions.php và thêm đoạn này xuống dưới cùng

add_theme_support( 'block-service' );
function custom_service_post_type()
{
    $label = array(
        'name' => 'Service home',
        'service' => 'service'
    );
    $args = array(
        'labels' => $label, //Gọi các label trong biến $label ở trên
        'description' => 'Post type Service', //Mô tả của post type
        'supports' => array(
            'title',
        ), //Các tính năng được hỗ trợ trong post type
        'hierarchical' => false, //Cho phép phân cấp, nếu là false thì post type này giống như Post, false thì giống như Page
        'public' => true, //Kích hoạt post type
        'show_ui' => true, //Hiển thị khung quản trị như Post/Page
        'show_in_menu' => true, //Hiển thị trên Admin Menu (tay trái)
        'show_in_nav_menus' => true, //Hiển thị trong Appearance -> Menus
        'show_in_admin_bar' => true, //Hiển thị trên thanh Admin bar màu đen.
        'menu_position' => 11, //Thứ tự vị trí hiển thị trong menu (tay trái)
        'menu_icon' => 'dashicons-format-image', //Đường dẫn tới icon sẽ hiển thị
        'can_export' => true, //Có thể export nội dung bằng Tools -> Export
        'has_archive' => true, //Cho phép lưu trữ (month, date, year)
        'exclude_from_search' => true, //Loại bỏ khỏi kết quả tìm kiếm
        'publicly_queryable' => true, //Hiển thị các tham số trong query, phải đặt true
        'capability_type' => 'post' //
    );
    register_post_type('block-service', $args);
}

add_action('init', 'custom_service_post_type');

Mình có giải thích từng dòng trong đoạn code trên. Sau khi thêm xong các bạn lưu lại và refresh lại trang Admin thì sẽ thấy có thêm menu Service home trong menu trang Admin như sau

Tiếp tục ta sẽ thêm fields bằng ACF (Advanced custom fields) như sau

Icon là hình ảnh, Tiêu đề là Text và Mô tả là Text Area. Và các bạn nhớ chọn phần Location bên dưới như trong hình nha.

Vì phần menu mình tạo trong file functions.php lúc nãy thuộc dạng là Post type nên các bạn chọn Post Type và chọn post Service home trong phần Location.

Sau khi hoàn tất các bài vào Service home và tạo bài viết mới, kết quả như hình dưới đây là các bạn đúng rồi đó

Vì block Service có 4 cục nên mình sẽ tạo ra 4 cục trong Service home menu.

Sau khi tạo xong các bạn mở file index.php và thêm đoạn code này xuống dưới section banner mà chúng ta đã tạo ở bài trước

<section class="promo-section ptb-90">
    <div class="promo-section-wrap">
        <div class="container">
            <div class="row">
                <?php $getposts = new WP_query(); $getposts->query('post_status=publish&showposts=4&post_type=block-service&order=asc'); ?>
                <?php global $wp_query; $wp_query->in_the_loop = true; ?>
                <?php while ($getposts->have_posts()) : $getposts->the_post(); ?>
                    <?php
                        $service_icon = get_field('icon', get_the_ID());
                        $service_title = get_field('service_title', get_the_ID());
                        $service_desc = get_field('service_desc', get_the_ID());
                    ?>
                    <div class="col-md-3 col-sm-6">
                        <div class="bg-secondary single-promo-section text-center">
                            <div class="single-promo-content">
                                <img src="<?php echo $service_icon; ?>">
                                <h6><?php echo $service_title ;?></h6>
                                <p><?php echo $service_desc ;?></p>
                            </div>
                        </div>
                    </div>
                <?php endwhile; wp_reset_postdata(); ?>
            </div>
        </div>
    </div>
</section>

WP_query(): cho phép chúng ta viết các câu queries tùy chỉnh và hiển thị các bài đăng bằng các tham số khác nhau.

post_status=publish: Lấy những bài viết đã được đăng.

showposts=4: Hiển thị tối đa 4 bài đăng.

post_type=block-service: Tên của post type là block-service. Các bạn có thể lấy tên post type bằng cách truy cập vào post đó và xem url, ở đây post Service home mình đã tạo ở trên có url như sau: localhost/wp-tut/wp-admin/edit.php?post_type=block-service

order=asc: Sắp xếp lại bài đăng theo thứ tự tăng dần của ngày/giờ đăng.
Mình sẽ loop qua 1 vòng để lấy tất cả bài đăng phù hợp với các câu queries trên nên mình sẽ dùng câu lệnh sau:

while ($getposts->have_posts()) : $getposts->the_post();

Bên trong vòng lặp mình sẽ lấy dữ liệu của ACF ra giống như bài trước. Tuy nhiên lần này có đoạn code get_the_ID(), đây là code lấy custom field theo ID của bài đăng.

Ok, chúng ta chỉ cần truyền các tham số ACF này vào trong chỗ chúng ta muốn là được.
Dưới đây là css cho Block Service này

.ptb-90 {
   padding: 90px 0;
}

.bg-secondary {
   background: #f9f9f9 !important;
}

.single-promo-section {
   display: block;
   border-radius: 4px;
   transition: all 0.3s ease-in;
   -webkit-box-shadow: 0 1px 2px rgba(212, 212, 212, 0.35);
   box-shadow: 0 1px 2px rgba(212, 212, 212, 0.35);
}

.single-promo-content {
   padding: 25px;
}

.single-promo-content img {
   width: 35px;
}

.single-promo-content h6 {
   font-size: 15px;
   line-height: 23px;
   font-weight: 600;
}

Đây là giao diện ngoài trang chủ sau khi chúng ta đã hoàn thành Block Service

2. Header

Mình có style lại header 1 chút như sau. Các bạn mở file style.css và thay đổi lại class .navbar như sau

.navbar {
   padding: 20px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0);
   background: transparent;
   -o-transition: border-bottom .3s ease-in-out,background .3s ease-in-out,padding .3s ease-in-out;
   -webkit-transition: border-bottom .3s ease-in-out,background .3s ease-in-out,padding .3s ease-in-out;
   -moz-transition: border-bottom .3s ease-in-out,background .3s ease-in-out,padding .3s ease-in-out;
   transition: border-bottom .3s ease-in-out,background .3s ease-in-out,padding .3s ease-in-out;
   -webkit-backface-visibility: hidden;
}

.navbar.top-nav-collapse {
   padding: 0;
   background: linear-gradient(150deg, #281483 15%, #8f6ed5 70%, #d782d9 94%);
}

Tiếp theo trong thư mục js các bạn tạo 1 file tên là main.js, bên trong file main.js như sau

$(document).ready(function () {
    $(window).scroll(function() {
        if ($(".navbar").offset().top > 50) {
            $(".navbar-fixed-top").addClass("top-nav-collapse");
        } else {
            $(".navbar-fixed-top").removeClass("top-nav-collapse");
        }
    });
});

Tiếp đến các bạn mở file footer.php và thêm 2 dòng này lên bên trên đoạn code <?php wp_footer(); ?>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="<?php echo get_template_directory_uri() ?>/js/main.js"></script>

Sau đó các bạn refresh lại trang và scroll chuột để thấy sự thay đổi của header nhé.

3. Block Features

Block này thì chỉ có phần hình ảnh ở giữa là thay đổi được, còn những icon 2 hàng bên là mình dùng Font Awesome Icon.
Các bạn tạo mới 1 ACF Feature như sau

Mình đổi lại Field Name của Feature image là image_feature_home để tránh bị trùng với hình ảnh ở banner.

Phần Location thì các bạn chọn Page Template là Home như lúc mình tạo block Banner nha.

Sau đó vào upload hình cho block này trong trang Home

Phần Banner bên trên mình đã tạo ở phần trước, tiếp đến là phần Feature mình mới tạo.
Dưới đây là code cho block Feature, các bạn mở file index.php ra và chèn đoạn này xuống dưới block Service:

<section id="features" class="bg-secondary ptb-90">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-heading text-center">
                    <h3>ApeTech Features</h3>
                    <p>Continually network virtual strategic theme areas vis-a-vis ubiquitous
                        potentialities. Holisticly negotiate focused e-tailers without premium
                        solutions. </p>
                </div>
            </div>
        </div>
        <div class="row align-items-center">
            <div class="col-md-4 col-sm-6">
                <div class="single-feature mb-5">
                    <div class="feature-icon">
                        <div class="icon icon-shape bg-color white-text">
                            <i class="far fa-object-ungroup"></i>
                        </div>
                    </div>
                    <div class="feature-content">
                        <h5>Responsive web design</h5>
                        <p class="mb-0">Modular and interchangable componente between layouts and even demos.</p>
                    </div>
                </div>
                <div class="single-feature mb-5">
                    <div class="feature-icon">
                        <div class="icon icon-shape bg-color white-text">
                            <i class="fab fa-dropbox"></i>
                        </div>
                    </div>
                    <div class="feature-content">
                        <h5>Loaded with features</h5>
                        <p class="mb-0">Modular and interchangable componente between layouts and even demos.</p>
                    </div>
                </div>
                <div class="single-feature mb-5">
                    <div class="feature-icon">
                        <div class="icon icon-shape bg-color white-text">
                            <i class="far fa-smile"></i>
                        </div>
                    </div>
                    <div class="feature-content">
                        <h5>Friendly online support</h5>
                        <p class="mb-0">Modular and interchangable componente between layouts and even demos.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 hidden-sm hidden-xs">
                <div class="feature-image">
                    <img src="<?php echo $home_feature_image ;?>">
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="single-feature mb-5">
                    <div class="feature-icon">
                        <div class="icon icon-shape bg-color white-text">
                            <i class="far fa-file-archive"></i>
                        </div>
                    </div>
                    <div class="feature-content">
                        <h5>Free updates forever</h5>
                        <p class="mb-0">Modular and interchangable componente between layouts and even demos.</p>
                    </div>
                </div>
                <div class="single-feature mb-5">
                    <div class="feature-icon">
                        <div class="icon icon-shape bg-color white-text">
                            <i class="fas fa-adjust"></i>
                        </div>
                    </div>
                    <div class="feature-content">
                        <h5>Infinite colors</h5>
                        <p class="mb-0">Modular and interchangable componente between layouts and even demos.</p>
                    </div>
                </div>
                <div class="single-feature mb-5">
                    <div class="feature-icon">
                        <div class="icon icon-shape bg-color white-text">
                            <i class="far fa-smile"></i>
                        </div>
                    </div>
                    <div class="feature-content">
                        <h5>Friendly online support</h5>
                        <p class="mb-0">Modular and interchangable componente between layouts and even demos.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Còn đây là css cho block này, mở file style.css và thêm đoạn sau xuống dưới cùng:

.section-heading h3 {
   font-weight: 700;
   font-size: 30px;
   line-height: 35px;
}

.section-heading p {
   max-width: 650px;
   margin-right: auto;
   margin-left: auto;
   position: relative;
   margin-top: 20px;
   color: #787878;
}

.single-feature {
   align-items: flex-start;
   display: flex;
   padding: 1.5em 1em;
   cursor: pointer;
}

.feature-icon {
   margin-right: 20px;
}

.bg-color {
   background: #281483;
}

.white-text {
   color: #fff;
}

.icon-shape {
   text-align: center;
   border-radius: .25rem;
   align-items: center;
   justify-content: center;
}

.icon {
   display: inline-flex;
   min-width: 2.75rem;
   min-height: 2.75rem;
   color: #fff;
}

.feature-content h5 {
   font-size: 16px;
   line-height: 22px;
   margin-bottom: 5px;
   color: #2c3e50;
   font-weight: 600;
}

.feature-content p {
   font-size: 16px;
   color: #787878;
}

Các bạn refresh lại trang và xem thành quả nha.

Vậy là mình đã hướng dẫn các bạn tự tạo theme WordPress cho riêng mình rồi. Nếu có thắc mắc thì comment bên dưới nha.

Còn nhiều điều mình sẽ hướng dẫn các bạn ở những Series sau, các bạn nhớ đón xem nhé.

Nguyễn Linh

You can share this post!

TẠO THEME WORDPRESS TOÀN TẬP (Phần 2)

TÌM HIỂU VỀ TAILWIND CSS FRAMEWORK

One thought on “TẠO THEME WORDPRESS TOÀN TẬP (Phần 3)

Leave a Reply

Your email address will not be published. Required fields are marked *