Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Wordpress Tips > Hướng dẫn thiết kế theme wordpress – Upload code lên host
Hướng dẫn thiết kế theme wordpress – Upload code lên host
Nguyễn Trung Hiếu
Share Code Web Company 2014

Hướng dẫn thiết kế theme wordpress – Upload code lên host

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

creating wordpress theme for static HTML

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:

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

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ừ:

thành:

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
upload code lên host

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?
after upload code to host
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

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

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!

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}