Có khi nào bạn muốn làm một giao diện wordpress theo ý mình chưa? Muốn thay đổi bố cục theo ý thích của mình, muốn tự làm ra các sản phẩm made by me, đam mê thiết kế nhưng không biết gắn vào WP như thế nào. Mình sẽ giúp bạn điều đó trong serie học làm Theme WP bằng Bootstrap 4 từ A - Z.

Ở 10 phần này bạn sẽ hiểu được cách convert từ HTML -> Wordpress theo hướng đơn giản, chưa dùng kỹ thuật nâng cao, mình hi vọng bạn có thể gõ từng chữ để nhớ hàm, việc hàm đó dài hay ngắn cứ kệ nó, hiểu nó làm gì trước đã rồi học nó sau.

Demo sản phẩm sau khi bạn học xong 10 phần.

Xem Demo

Ở bài học này mình sẽ hướng dẫn các bạn cấu trúc của 1 theme Wordpress
Theme của Wordpress được chứa trong folder:

wp-content/themes

Điều kiện:

Bước 1:

Tạo folder miniblog

  • wp-content/themes/miniblog ( tên này tùy ý bạn đặt )

Tạo 2 file index.phpstyle.css

  • wp-content/themes/miniblog/index.php
  • wp-content/themes/miniblog/style.css

2018-03-29_15-07-42

Bước 2:

Mở file style.css nhập nội dung sau:

/*
Theme Name: Mini Blog
Theme URI: https://lar.vn/                       
Author: Tòng Huỳnh 
Author URI: https://lar.vn/                       
Description: Đây là giao diện mini blog cá nhân
Version: 1.0
License: MIT
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, mini blog 
*/

Đây là thông tin bắt buộc để tạo theme, nó chứa đựng tên theme, tác giả, mô tả.

Kết quả như hình dưới

2018-03-29_15-23-24

Vào wp-admin ở phần giao diện bạn sẽ thấy theme của mình đã xuất hiện và việc của bạn là bấm vào nút Kích hoạt

2018-03-29_15-25-03

Để thêm hình ảnh đại diện cho theme thì bạn có thể tạo 1 file tên screenshot.png kích thước ( 1200px x 600px ) nằm trong thư mục wp-content/themes/miniblog/screenshot.png ( tốt nhất là PNG nhé )

Sau khi kích hoạt bạn ra ngoài trang chủ sẽ thấy trắng là ok nhé vì mình làm giao diện từ A-Z nên sẽ do mình tùy biến tất cả.

Bước 3:
Tải bộ giao diện blog Bootstrap 4 mẫu: tại đây

Giải nén file vừa tải về và copy 2 folder cssvender vào thư mục theme:

2018-03-29_15-38-31

Kế đến copy toàn bộ nội dung trong file index.html trong thư mục bootstrap vừa tải về vào trong file index.php

2018-03-29_15-42-09

Mở trình duyệt lên truy cập giống vậy là OK

2018-03-29_15-43-06

Bước 4:

Ở bước này ta cần 2 file đảm nhận vị trí quan trọng đi xuyên suốt trang web là:

  1. header.php ( chứa menu, logo và luôn nằm ở đầu trang )
  2. footer.php ( chứa thông tin liên hệ, copyright và luôn nằm ở cuối trang )

Tạo 2 file header.phpfooter.php

  • wp-content/themes/miniblog/header.php
  • wp-content/themes/miniblog/footer.php

2018-03-29_15-47-39

Bước 5:

Mở file index.php và tách code theo hình:

Mình chia code thành 3 phần

  • Từ </nav> trở lên </DOCTYPE html> sẽ là phần header.php
  • Từ <footer> trở xuống </html> sẽ là phần footer.php
  • Còn lại nội dung trong class .container sẽ là phần index.php

code_1

Bước 6:

Trong file header.phpfooter.php
Chèn hàm sau ở trước các tag linkscript

<?php echo get_template_directory_uri() ?>

Hàm này có nhiệm vụ gọi đường dẫn đến theme

2018-03-29_16-04-10
2018-03-29_16-04-34

Bước 7:

Trong bước 4 ta đã tách code ra 2 file header và footer

Giờ ở index.php bạn tiến hành chèn 2 hàm sau:

<?php get_header() ?>

Hàm này dùng để lấy header đã cắt

<?php get_footer() ?>

Hàm này dùng để lấy footer đã cắt

2018-03-29_16-03-06

Ra trang chủ F5 lại như hình là Ok nhé.

2018-03-29_16-10-11

File download tham khảo:
Code - Phần 1

Cám ơn bạn đã đọc bài viết, hẹn gặp bạn ở phần 2, nếu thấy hay thì hãy chia sẻ nhé.