- Hướng dẫn thiết kế theme wordpress – Khởi động
- Hướng dẫn thiết kế theme wordpress – Upload code lên host
- Hướng dẫn thiết kế theme wordpress – Hiển thị bài viết
- Hướng dẫn thiết kế theme wordpress – File Footer
- Hướng dẫn thiết kế theme wordpress – Page Template
- Hướng dẫn thiết kế theme wordpress – Archive Template
- Hướng dẫn tạo theme WordPress với Bootstrap 3 – Header và Footer
Trong bài viết trước chúng ta đã được tìm hiểu việc thiết kế theme wordpress từ đầu rồi. Và bài viết này chúng ta sẽ học tiếp cách upload code lên host sau khi chúng ta đã có khung HTML rồi
Demo hình ảnh mà chúng ta sẽ làm
Chuẩn bị
- Một bộ code editor
- Một trình duyệt để test thành quả
- Một phần mềm chỉnh sửa ảnh, có thể sử dụng ngay Paint trong window
- Nếu bạn sử dụng localhost, thì cần cài thêm một số server ảo như EasyPHP, XAMPP….
- Nếu bạn không có quyền truy cập thằng vào host, thì cần có một account FTP để upload code.
Một số bài viết cũ bạn nên tham khảo:
- Share PSD Layout – Giao diện Madison
- [Share]PSD layout – Fox Home PSD
- [Share] PSD Layout – Shinra
- Share file PSD thiết kế web – Halftone layout
- Hướng dẫn tạo Porfolio Web Layout trong Photoshop
Cài đặt style cho theme
Theo như bài học trước, chúng ta thiết kế đã có một file style.css rồi. Giờ để file style này được wordpress nhận chúng ta cần phải thêm như sau
|
1 2 3 4 5 6 7 8 9 10 |
/* Theme Name: WordPress Theme Building from HTML - Part 2 Theme URI: https://sharecodeweb.net Author: Rachel McCollin Author URI: https://sharecodeweb.net Description: The theme to accompany the wptutsplus series on creating a WordPress theme from static HTML. This theme accompanies Part 2 of the series. Version: 3.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ |
Các bạn chú ý phần Theme Name sẽ được xuất hiện trong admin, cho nên các bạn có thể thay đổi tùy theo ý muốn của mình.
Và để cho file style.css này được theme của chúng ta nhận ra thì bạn cũng cần phải chỉnh sửa lại đường dẫn link như từ:
|
1 |
<link href="style.css" rel="stylesheet" media="all" type="text/css" /> |
thành:
|
1 |
<link href="<?php bloginfo( 'stylesheet_url' ); ?>" rel="stylesheet" media="all" type="text/css" /> |
Screenshot.png
Tiếp theo, bạn chụp ảnh cái giao diện, chỉnh lại kích thước thành 600×450 và lưu lại với tên screenshot.png. Việc làm này sẽ giúp cho trong trang admin của bạn sẽ xuất hiện một cái ảnh giới thiệu về theme, làm đẹp thôi ấy mờ.
Upload code lên host
Bạn có thể upload theme wordpress lên theo 2 cách:
- Sử dụng FTP, upload folder vào thư mục themes trên host
- Nén lại với đuôi .zip, sau đó vào trong admin -> Appearance -> Themes -> Upload
Xong chúng ta sẽ được thành quả như sau
Kiểm tra
Sau khi upload, kích hoạt xong, chúng ta thử ra ngoài trang chủ xem có gì thay đổi không nào?
Như các bạn thấy thì ảnh của chúng ta chưa được nhận đúng không? Điều này xảy ra là do khi chúng ta thiết kế theme từ bài trước, chúng ta để link ảnh dạng như sau
|
1 |
<img alt="" src="images/logo.jpg" /> |
Giờ khi upload lên host thì chúng ta phải đổi lại đường dẫn theo wordpress, để nó có thể nhận được đường dẫn này. Cũng giống như chúng ta sửa lại đường dẫn của file style.css, giờ bạn thêm như sau
|
1 |
<img alt="" src="<?php bloginfo( 'stylesheet_url' ); ?>/images/logo.jpg" /> |
Thông tin về hàm bloginfo() là gì bạn có thể tham khảo trên codex.wordpress.org nhé
Download code
Như vậy là chúng ta đã thiết kế thành công một theme wordpress tĩnh rồi đấy. Hẹn gặp lại các bạn vào các bài sau!
