1. Cài đặt Starter theme

Để tiện cho việc viết theme nhanh chóng thì mình sẽ sử dụng Starter theme. Đây là theme có chuẩn cấu trúc của WordPress nhưng chưa có code gì nhiều bên trong. Mình sẽ dùng Underscore Stater Theme để tạo theme mới, các bạn vào đường dẫn ở đây để tạo.

Mình đặt tên là wp-tut luôn, sau đó bấm GENERATE để tải xuống theme.
Sau đó các bạn giải nén file wp-tut.zip ra sẽ được thư mục wp-tut, copy nguyên thư mục này vào theo đường dẫn C/xampp/htdoc/wp-tut/wp-content/themes.
Chúng ta vào trang Admin của WordPress theo đường dẫn localhost/wp-tut/wp-admin và chọn mục Giao diện (Appearance nếu là Tiếng Anh), chọn tiếp mục Giao diện.

WordPress sẽ load tất cả các theme bao gồm wp-tut mà chúng ta đã thêm ở bước bên trên. Chúng ta chọn Kích hoạt ở theme wp-tut sẽ được như hình bên dưới

Các bạn truy cập vào trang của người dùng theo đường dẫn localhost/wp-tut sẽ có kết quả như hình dưới đây.

Đây là theme chưa code gì của Starter Theme như mình đã nói ở trên.

2. Cài Plugin Advanced Custom Fields

Trước khi bắt đầu vào code thì các bạn cần cài đặt cho mình Plugin Advanced Custom Fields để hỗ trợ cho việc viết theme WordPress dễ dàng hơn nhé. Đây là plugin gì thì trong quá trình làm mình sẽ giải thích thêm.

Các bạn chọn Plugin -> Cài mới trên thanh menu của trang Admin, gõ Advanced Custom Fields vào ô tìm kiếm. Sau đó cài đặt plugin Advanced Custom Fields

Sau khi cài đặt xong các bạn bấm Kích hoạt để có thể sử dụng được plugin này.

3. Setup Template

Ở đây mình có chuẩn bị 1 landing page để hướng dẫn các bạn tạo theme WordPress. Toàn bộ hình ảnh và icon mình đều để ở đây, các bạn có thể download về.

Chúng ta sẽ đi từng phần một. Đầu tiên là Header và Banner của landing page.

3.1. Header

Header ta có bên trái là Logo, bên phải là các link menu dẫn đến các trang khác (mình sẽ không hướng dẫn các bạn làm các trang khác nữa, vì nó sẽ tương tự như landing page này).

Các bạn vào phần Thư viện trong trang Admin và upload các hình ảnh lên đây.

Sau đó các bạn vào phần Giao diện -> Tuỳ biến -> Nhận dạng site -> Chọn logo và chọn file logo mà bạn đã upload lên Thư viện.

Các bạn nhớ chọn nút Bỏ cắt ảnh ở bước tiếp theo nhé. Logo nên không cần thiết phải cắt ảnh, chúng ta cứ để mặc định là được rồi.

Giờ đến phần link menu bên phải. Các bạn vào Giao diện -> Menu trong trang Admin và tạo menu như sau, sau đó bấm Tạo trình đơn để tạo mới menu.

Sau khi tạo mới menu thì các bạn tích vào ô checkbox Primary trong phần hiển thị vị trí nha. Vì sao thì mình sẽ giải thích ngay sau đây.

Các bạn mở file header.php trong thư mục htdoc/wp-tut/wp-content/themes/wp-tut/, từ khúc <div id="page" class="site"> trở xuống các bạn xoá sạch và thay lại như sau 

<header class="header">
    <div class="navbar navbar-default navbar-fixed-top" style="">
        <div class="container">
            <div class="row justify-content-between w-100 align-items-center">
                <div class="navbar-header">
                    <?php
                        $custom_logo_id = get_theme_mod( 'custom_logo' );
                        $image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
                    ?>
                    <a class="navbar-brand page-scroll" href="<?php echo home_url(); ?>">
                        <img src="<?php echo $image[0] ?>" alt="logo">
                    </a>
                </div>
                <?php
                wp_nav_menu( array(
                    'theme_location' => 'menu-1',
                    'menu_id'        => 'primary-menu',
                    'menu_class' => 'nav navbar-nav navbar-right clearfix',
                ) );
                ?>
            </div>
        </div>
    </div>
</header>

• Đoạn code $custom_logo_id sẽ lấy ra ID của Logo mặc định của website mà mình đã nói khi nãy. Sau đó mình dùng hàm wp_get_attachment_image_src để lấy ra thông tin của hình logo đó thông qua ID của nó.
• Và $image sẽ trả về một mảng gồm nhiều thông tin và ở phần tử đầu tiên tức là 0 trong mảng là đường dẫn hình ảnh mà chúng ta cần mình cho nó vào thẻ img.
• Đoạn home_url() sẽ trả về địa chỉ trang chủ, khi ta nhấn vào sẽ quay lại trang chủ. Trong trường hợp ở đây là http://localhost/wp-tut/
• Hàm wp_nav_menu các bạn có thể tìm hiểu kỹ hơn tại đây. Chức năng của nó là lấy ra Menu mà chúng ta đã tạo. ‘theme_location’ sẽ lấy ra menu theo id, slug hoặc tên mà chúng ta muốn, ở đây là Menu có slug là menu-1. ‘menu_id’ sẽ lấy ra menu theo id mà ta đã tích chọn ô checkbox Primary ở bên trên. ‘menu_class’ là class dành cho thẻ ul bên trong thẻ nav.

Bây giờ các bạn mở file style.css cùng cấp với file header.php bên trên ra và xoá hết code từ đoạn comment TABLE OF CONTENTS. Đây là code của Starter Theme sinh ra, nên chúng ta không cần tới nó. Chúng ta style header lại, dán code sau dưới dòng TABLE OF CONTENTS.

.navbar {
   padding: 20px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0);
   background: linear-gradient(150deg, #281483 15%, #8f6ed5 70%, #d782d9 94%);
   -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-nav {
   display: block;
}

.navbar-nav>li {
   float: left;
}

.navbar-nav li a {
   padding: 20px 10px;
   color: #e7f3ff;
   text-decoration: none;
}

Như vậy là mình đã xong Header, kết quả được như bên dưới

Nếu các bạn làm theo mà không ra được layout như vậy thì chèn thêm link bootstrap sau  trên đoạn <?php wp_head(); ?> trong file header nhé.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

3.2. Banner

Chúng ta tới block tiếp theo là banner nhé. Xét qua một chút về banner, chúng ta có tiêu đề, mô tả, các button bên dưới mô tả sẽ link tới trang khác, hình ảnh bên phải. Đây đều là những thứ có thể thay đổi được trong trang admin. Còn background thì mình sẽ style bằng css.

Để có thể thay đổi được các chỗ trong banner thì mình phải tạo Custom Fields trong WordPress, để làm được điều này thì ta cần tới Advanced Custom Fields mà chúng ta đã cài ở đầu bài viết này.

Các bạn mở file index.php ra và sửa như sau

Thêm Template Name: Home trong phần comment của file.
Các bạn chọn mục Trang -> Thêm mới trang trong menu trang Admin.

Điền title là Home, và chọn mục Mẫu là Home. Đây chính là template name mà chúng ta đã đặt tên cho nó ở file index bên trên. Sau đó nhấn Công bố… trên cùng để đăng trang mới.

Sau đó các bạn vào Cài đặt -> Đọc, phần Bố cục trang chủ các bạn chọn Một trang tĩnh sau đó chọn như hình dưới rồi bấm Lưu thay đổi.

Tiếp theo chọn Custom Fields -> Add new trong menu trang Admin, và tạo mới 1 custom field như sau

Tiếp tục với các field còn lại, sau khi tạo xong ta có các field như sau

Các field Link Appstore, Google Play phần Field Type các bạn chọn Link, Return Value chọn Link URL.

Tương tự cho Hình ảnh đại diện, Field Type chọn Image, Return Format chọn Image URL.

Phần Location bên dưới các bạn chọn như sau để áp dụng cho trang Home chúng ta đã tạo ở bên trên

Sau khi hoàn tất nhớ bấm Đăng để lưu lại nhé.

Quay lại phần sửa Trang Home lúc nãy chúng ta đã tạo để xem các field đã có chưa. Như hình dưới là các bạn đã làm đúng rồi.

3.3. Lấy dữ liệu từ ACF

Để lấy dữ liệu từ ACF ra và hiển thị trong code thì chúng ta sẽ gọi chúng ra thông qua hàm get_field(“tên field) mà ACF cung cấp, ở đây tên field là cái tên mà lúc chúng ta tạo trong ACF (Field Name chứ không phải Field Label nha các bạn).

Các bạn mở file index.php ra và đưa đoạn code này vào phần php ở trên cùng.

$banner_title = get_field('tieu_de');
$banner_desc = get_field('mo_ta');
$banner_appstore_link = get_field('link_appstore');
$banner_google_link = get_field('link_google_play');
$banner_windows_store_link = get_field('link_windows_store');
$banner_feature_image = get_field('hinh_anh_dai_dien');

Sau đó chúng ta chỉ việc gọi nó ra thôi. Ta có toàn bộ code ở section banner như sau (section này đặt trong file index.php nha các bạn):

<section id="hero" class="section-lg section-hero section-circle">
    <!--background circle shape-->
    <div class="shape shape-style-1 shape-primary">
        <span class="circle-150"></span>
        <span class="circle-50"></span>
        <span class="circle-50"></span>
        <span class="circle-75"></span>
        <span class="circle-100"></span>
        <span class="circle-75"></span>
        <span class="circle-50"></span>
        <span class="circle-100"></span>
        <span class="circle-50"></span>
        <span class="circle-100"></span>
    </div>
    <!--background circle shape-->
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="hero-content-wrap">
                    <div class="hero-content">
                        <h1><?php echo $banner_title ;?></h1>
                        <p><?php echo $banner_desc ;?></p>
                        <div class="slider-action-btn">
                            <a href="<?php echo $banner_appstore_link ;?>" class="btn softo-solid-btn"><i class="fab fa-apple"></i> Appstore</a>
                            <a href="<?php echo $banner_google_link ;?>" class="btn btn-icon"><i class="fab fa-android"></i></a>
                            <a href="<?php echo $banner_windows_store_link ;?>" class="btn btn-icon"><i class="fab fa-windows"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="mobile-slider-area">
                    <div class="phone">
                        <img src="<?php echo $banner_feature_image['url'] ;?>" alt="Phone" class="img-responsive">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section-shape">
        <img src="<?php echo get_template_directory_uri() ?>/images/waves-shape.svg" alt="shape image">
    </div>
</section>

Chúng ta sẽ style lại css cho phần banner này như sau

.section-hero {
   min-height: 500px;
}

.section-lg {
   padding-top: 6rem;
   padding-bottom: 6rem;
}

.section-circle {
   position: relative;
}

.section-circle .shape {
   position: absolute;
   z-index: -1;
   top: 0;
   width: 100%;
   height: 100%;
}

.section-circle .shape-style-1.shape-primary {
   background: linear-gradient(150deg, #281483 15%, #8f6ed5 70%, #d782d9 94%);
}

.section-shape {
   bottom: -8px;
   left: 0;
   position: absolute;
   right: 0;
   z-index: 1;
}

.section-shape img {
   max-width: 100%;
   min-width: 100%;
   width: 100%;
}

.section-circle .shape span {
   position: absolute;
}

.section-circle .shape-style-1 span {
   width: 120px;
   height: 120px;
   border-radius: 100px 130px 100px 315px;
}

.section-circle .shape-style-1 .circle-50 {
   width: 50px;
   height: 50px;
}

.section-circle .shape-style-1 .circle-75 {
   width: 75px;
   height: 75px;
}

.section-circle .shape-style-1 .circle-100 {
   width: 100px;
   height: 100px;
}

.section-circle .shape-style-1 .circle-150 {
   width: 150px;
   height: 150px;
}

.section-circle .shape-style-1 :nth-child(1) {
   bottom: auto;
   left: -3%;
   top: -20px;
   background: rgba(255, 255, 255, .1);
}

.section-circle .shape-style-1 :nth-child(2) {
   top: 15%;
   right: 10%;
   background: rgba(255, 255, 255, .1);
}

.section-circle .shape-style-1 :nth-child(3) {
   top: 280px;
   right: 5.66666%;
   background: rgba(255, 255, 255, .3);
}

.section-circle .shape-style-1 :nth-child(4) {
   top: 320px;
   right: 7%;
   background: rgba(255, 255, 255, .15);
}

.section-circle .shape-style-1 :nth-child(5) {
   top: 38%;
   right: auto;
   left: 1%;
   background: rgba(255, 255, 255, .05);
}

.section-circle .shape-style-1 :nth-child(6) {
   top: 65%;
   right: auto;
   left: 35%;
   width: 200px;
   height: 200px;
   background: rgba(255, 255, 255, .15);
}

.section-circle .shape-style-1 :nth-child(7) {
   right: 40%;
   bottom: 45%;
   background: rgba(255, 255, 255, .04);
}

.section-circle .shape-style-1 :nth-child(8) {
   right: 6%;
   bottom: 100px;
   background: rgba(255, 255, 255, .2);
}

.section-circle .shape-style-1 :nth-child(9) {
   right: 5%;
   bottom: 12%;
   background: rgba(255, 255, 255, .1);
}

.section-circle .shape-style-1 :nth-child(10) {
   right: auto;
   bottom: 11%;
   left: 15%;
   background: rgba(255, 255, 255, .05);
}

.hero-content-wrap {
   display: table;
   height: 550px;
   width: 100%;
}

.hero-content {
   position: relative;
   display: table-cell;
   vertical-align: middle;
   z-index: 200;
}

.hero-content h1 {
   font-size: 40px;
   line-height: 48px;
   color: #fff;
   margin-bottom: 0;
   font-weight: 500;
}

.hero-content p {
   font-size: 1.2rem;
   font-weight: 300;
   line-height: 1.7;
   padding: 20px 0;
   color: #fff;
}

.slider-action-btn {
   display: block;
   margin-bottom: 20px;
}

.softo-solid-btn {
   padding: 5px 30px;
   border: 2px solid #281483;
   background-color: #281483;
   color: #fff;
   font: 600 14px/30px 'Montserrat', sans-serif;
   -webkit-transition: all .3s ease-out;
   transition: all .3s ease-out;
   letter-spacing: 0.5px;
}

.slider-action-btn a.softo-solid-btn {
   background: #fff;
   color: #333;
   border: 1px solid #fff;
   text-transform: capitalize;
   margin-right: 15px;
}

.slider-action-btn a.btn-icon {
   font-size: 30px;
   color: #fff;
}

.mobile-slider-area {
   position: relative;
   display: block;
   overflow: hidden;
   z-index: 9;
   margin-top: 50px;
}

.mobile-slider-area img {
   margin: 0 auto;
   width: 80%;
}

Sau khi style xong thì refresh lại trang và xem kết quả nào

Tuyệt vời, bài viết này mình đã hướng dẫn các bạn được cách tạo trang, làm việc với ACF để tạo các Custom fields cho mục đích sử dụng của các bạn. Phần tiếp theo chúng ta sẽ làm các block còn lại.

Hãy thoải mái ghi lại ý kiến của bạn ở phần bình luận để chúng ta cùng trao đổi thêm và học hỏi lẫn nhau nhé! 

Nguyễn Linh