Hướng dẫn tạo website bằng Theme Wordpress từ Bootstrap 4 [2019] - Phần 1
Mình sẽ giúp bạn làm website từ Theme Wordpress bằng Bootstrap 4 từ A - Z.
Ở 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.
Ở 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:
- Đã biết tải và cài đặt wordpress thành công trên localhost ( hướng dẫn )
- Biết sử dụng PHP cơ bản
- Biết HTML và CSS
Bước 1:
Tạo folder logicviet
- wp-content/themes/logicviet ( tên này tùy ý bạn đặt )
Tạo 2 file index.php và style.css
- wp-content/themes/logicviet/index.php
- wp-content/themes/logicviet/style.css
Bước 2:
Mở file style.css nhập nội dung sau:
/*
Theme Name: Logic Viet
Theme URI: https://logicviet.com/
Author: Nguyễn Bắc
Author URI: https://logicviet.com/
Description: Đây là giao diện blog cá nhân
Version: 1.0
License: MIT
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, post
*/
Đâ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
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
Để 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/logicviet/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 css và vender vào thư mục theme:
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
Mở trình duyệt lên truy cập giống vậy là OK
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à:
- header.php ( chứa menu, logo và luôn nằm ở đầu trang )
- footer.php ( chứa thông tin liên hệ, copyright và luôn nằm ở cuối trang )
Tạo 2 file header.php và footer.php
- wp-content/themes/logicviet/header.php
- wp-content/themes/logicviet/footer.php
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
Bước 6:
Trong file header.php và footer.php
Chèn hàm sau ở trước các tag link và script
<?php echo get_template_directory_uri() ?>
Hàm này có nhiệm vụ gọi đường dẫn đến theme
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
Ra trang chủ F5 lại như hình là Ok nhé.
Chúc các bạn thành công. Hẹn gặp bạn ở phần 2
0 Comments
no comments!
Bài viết liên quan
![Hướng dẫn tạo website bằng Theme Wordpress từ Bootstrap 4 [2019] - Phần 3](https://logicviet.com/images/posts/42289365.PNG)
![Hướng dẫn tạo website bằng Theme Wordpress từ Bootstrap 4 [2019] - Phần 7](https://logicviet.com/images/posts/18774476.PNG)
![Hướng dẫn tạo website bằng Theme Wordpress từ Bootstrap 4 [2019] - Phần 6](https://logicviet.com/images/posts/29024537.PNG)
![Hướng dẫn tạo website bằng Theme Wordpress từ Bootstrap 4 [2019] - Phần 9](https://logicviet.com/images/posts/45344338.PNG)
Theo Dõi Trang
- Bài Viết Mới
- Tags
Các cách xóa và giảm dung lượng ổ C win 10 hiệu quả nhất
2 năm trước
Ổ cứng của máy tính, laptop bị đầy sau một thời gian dài sử dụng là vấn đề thường gặp của nhiều người. Nếu dung lượng ổ cứng quá lớn có thể ảnh hưởng đến tốc độ xử lý của nhiều ứng dụng và hoạt động của bạn. Vì vậy, việc quản lý, dọn dẹp ổ cứng nói chung và ổ đĩa C nói riêng nên thực hiện thường xuyên
Các website chuyển văn bản thành giọng nói online tốt nhất
2 năm trước
Bạn đang tìm kiếm các trang web giúp bạn chuyển văn bản thành giọng nói online trên máy tính một cách chính xác và nhanh chóng nhất. Bài viết dưới đây sẽ tổng hợp cho các bạn TOP 8 trang web chuyển văn bản thành giọng nói online tốt nhất.
UTM Tracking là gì? Hướng dẫn tạo UTM vào quản lý hiệu quả Marketing
2 năm trước
UTM (viết tắt cho Urchin tracking module), hay UTM code là một đoạn mã đơn giản được gắn vào các đường dẫn URL tùy chỉnh của bạn, giúp theo dõi các nguồn, phương tiện trung gian, hoặc tên các chiến dịch của bạn.
Cách sử dụng hàm Query trong Google Sheet
2 năm trước
Bạn làm việc với lượng lớn dữ liệu trên Google Sheet, việc lọc và tìm kiếm dữ liệu theo cách thủ công sẽ tốn rất nhiều thời gian. Hàm QUERY trong Google Sheet giúp bạn có thể tra cứu và lọc dữ liệu theo bất kỳ định dạng nào bạn muốn. Cùng tìm hiểu cách dùng hàm QUERY nhé!
Cách tính lãi suất vay mua nhà và số tiền phải trả hàng tháng
2 năm trước
Hiện nay, hầu hết những người có thu nhập thấp hoặc trung bình sẽ lựa chọn phương án vay vốn ngân hàng để mua nhà. Tuy nhiên, bạn có biết để có thể làm thủ tục vay vốn người mua cần đáp ứng được những điều kiện gì? Các mức lãi suất? Số tiền trả hàng tháng?
Hướng dẫn cách sử dụng và cài đặt Google Tag Manager
2 năm trước
Trình quản lý thẻ của Google – Google Tag Manager là một công cụ được thiết lập để giải quyết các vấn đề của doanh nghiệp giữa các phòng ban, theo dõi chiến dịch marketing, quản lý thẻ JavaScript và HTML, chủ động cập nhật website,…