Hướng dẫn viết theme wordpress toàn tập phần 1

Có lúc nào bạn có nhu cầu làm một giao diện wordpress theo ý mình chưa? Muốn nắn thay đổi bố cục theo ý thích của chính mình, ước ao tự làm ra các thành phầm made by me, tê mê kiến tạo nhưng phân vân đã tích hợp WP ra làm sao. Mình để giúp các bạn điều đó vào serie học có tác dụng Theme WPhường bởi Bootstrap 4 từ A - Z.

Bạn đang xem: Hướng dẫn viết theme wordpress toàn tập phần 1

Ở 10 phần này các bạn sẽ phát âm được biện pháp convert trường đoản cú HTML -> Wordpress theo hướng đơn giản dễ dàng, chưa dùng chuyên môn nâng cấp, bản thân hy vọng bạn cũng có thể gõ từng chữ nhằm nhớ hàm, việc hàm kia lâu năm giỏi ngắn thêm cđọng kệ nó, gọi nó làm gì trước đã rồi học nó sau.

Tại bài học kinh nghiệm này bản thân vẫn giải đáp chúng ta kết cấu của một theme WordpressTheme của Wordpress được cất vào folder:

wp-content/themesĐiều kiện:

Biết sử dụng PHP cơ bảnBiết HTML với CSS

Bước 1:

Tạo folder miniblog

wp-content/themes/miniblog ( thương hiệu này tùy ý các bạn đặt )

Tạo 2 tệp tin index.php với style.css

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

Bước 2:

Mnghỉ ngơi file style.css nhập câu chữ sau:

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

Vào wp-admin ở phần bối cảnh các bạn sẽ thấy theme của chính bản thân mình vẫn lộ diện và việc của bạn là bấm vào nút Kích hoạt

Để thêm hình hình ảnh đại diện mang đến theme thì chúng ta cũng có thể chế tạo 1 tệp tin thương hiệu screenshot.png kích cỡ ( 1200px x 600px ) phía bên trong thư mục wp-content/themes/miniblog/screenshot.png ( tốt nhất là PNG nhé )

Sau Lúc kích hoạt các bạn ra phía bên ngoài trang chủ đã thấy trắng là ok nhé do bản thân làm cho giao diện từ bỏ A-Z phải đã vì chưng bản thân tùy biến tất cả.

Xem thêm: Dịch Pháp Việt Online - Phần Mềm Dịch Tiếng Pháp Sang Tiếng Việt

Bước 3:Tải bộ bối cảnh blog Bootstrap 4 mẫu: tại đây

Giải nén tệp tin vừa download về và copy 2 folder css với vender vào tlỗi mục theme:

Kế mang lại copy toàn cục câu chữ trong tệp tin index.html trong thỏng mục bootstrap vừa cài về vào vào file index.php

Msống trình phê chuẩn lên truy vấn giống vậy là OK

Bước 4:

Ở công đoạn này ta bắt buộc 2 file đảm nhiệm vị trí quan trọng đặc biệt đi xuyên suốt website là:

Tạo 2 file header.php với footer.php

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

Cách 5:

Mở file index.php và bóc code theo hình:

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

Từ trngơi nghỉ lên vẫn là phần header.phpTừ trlàm việc xuống đã là phần footer.phpCòn lại câu chữ vào class .container đang là phần index.php

*

Bước 6:

Trong file header.php với footer.phpCyếu hàm sau sinh hoạt trước các tag link và script

Hàm này có nhiệm vụ Hotline đường truyền đến theme

Bước 7:

Trong bước 4 ta sẽ tách code ra 2 tệp tin header và footer

Giờ ở index.php bạn thực hiện cyếu 2 hàm sau:

Hàm này cần sử dụng để mang header vẫn cắt

Hàm này cần sử dụng để mang footer đang cắt

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

Xem thêm: Tải Phần Mềm Giả Lập Máy Tính Casio Fx 570Vn Plus Và Vinacal Fx570Es Plus Ii

File tải về tmê mẩn khảo:Code - Phần 1

Cám ơn chúng ta vẫn đọc nội dung bài viết, hứa hẹn gặp mặt bạn ở đoạn 2, trường hợp thấy giỏi thì nên share nhé.


Chuyên mục: Blogs