[Bài 1] Convert HTML/CSS thành một trang wordpress tĩnh

Over 11 working discount & coupon codes is active for 61 users, enjoy!

wordpress

[Bài 1] Convert HTML/CSS thành một trang wordpress tĩnh

Chào các bạn nay mình xin giới thiệu đến các bạn cách Convert HTML/CSS thành một trang wordpress tĩnh để chúng ta có thể tiến hành làm việc trên wordpress

1

Giao diện hôm nay chúng ta sẽ làm

Một số điều cần biết trước khi convert theme wordpress

Ta vào thư mục có đường dẫn như sau và tạo folder chứa theme

C:\AppServ\www\[Tên project của bạn]\wp-content\themes\[tên theme]

Ở đây mình tạo thư mục có tên là candytheme

Lưu ý là thư mục theme cho wordpress các bạn phải viết thườngkhông được có khoảng cách, nếu không wordpress sẽ không thể hiểu được theme của bạn

0

Như bạn thấy đó 2 theme có sẵn là Twenty Thirteen và Twenty Twelve chúng đều được viết là twentythirteen và twentytwelve

Một trang wordpress có rất nhiều các dạng trang nhưng về cơ bản để chuyển sang một trang wordpress thì ta mở folder candytheme lên và tạo một số các file php và css như sau:

 begin

Phần màu xanh lá là phần chúng ta tạo mới ra, còn phần màu đỏ là source html của chúng ta 

Bây giờ ta sẽ tiến hành convert nào ! 

Bước 1 : Mở file style.css lên và thêm vào các đoạn code sau:

 

 

Theme name: ta điền tên của theme

Description: một vài dòng miêu tả về theme

Chỉ có vậy thôi ta chỉ cần 2 cái này còn các mục còn lại không cần thiết lắm

Bước 2 :Ta tiến hành copy code html từ file index.html , copy phần code dành cho header thôi nhé, và bỏ vào file header.php ta tạo ra trước đó…và đây sẽ là nội dung file header.php sau khi copy & paste

 

Các bạn sẽ thắc mắc tại sao lại phải copy bỏ vào file header.php vì phần header ta dùng ở khắp tất cả các trang của website vậy nên ta chỉ cần bỏ vào 1 file riêng và lát nữa thôi ta sẽ dùng câu lệnh của wordpress để gọi file header.php và ghép vào trang ta cần 

Bước 3 : Sau khi đã copy dc đoạn html bỏ vào file header.php bây giờ ta mở file header.php lên và tiến hành sửa lại cho phù hợp với một theme wordpress (để wordpress có thể hiểu và chạy được).

 

Bước 4: Tương tự như bước 2 thôi đó là ta sẽ cắt phần html và bỏ chúng vào file index.php (phần content)

 

Bước 5 :Trong file index.php ,ta tiến hành sửa lại các đường dẫn hình để wordpress có thể hiểu ( ta có thể sử dụng chức năng Replace All cho nhanh)

 

 Như bạn thấy đó ở đầu và cuối của file index.php ta có 2 dòng lệnh là get_header() và get_footer() dùng để ghép 2 file header.php và footer.php vào với file index.php ^^

Bước 6: Ta tiến hành cắt và bỏ vào file footer.php với phần còn lại của html ( ở đây còn lại vài cái thẻ đóng div)

 

 

Bước 7: trong file footer.php ta thêm vào hook cho wordpress (Hook là gì chúng ta sẽ tìm hiểu sau ^^! )

 

 

Bước 8 : Hoàn tất rồi đó bay giờ ta vào trang đăng nhập của wordpress vào mục Appearance > Theme và active “thành quả” mà chúng ta vừa làm được lên thôi ^^!

 finish

 

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

3 Comments

Thanh Xuân

November 19, 2013 @ 14:30

mình kết cái giao diện trên kia rồi :)))

Vi

May 9, 2015 @ 13:10

Chào bạn! Có thể giúp mình được không? mình up theme lên function get_header() ở index thì chạy được nhưng ở trang amthuc.php thì không thể đọc được và các function khác: nó hiện lỗi thế này: Fatal error: Call to undefined function get_header() in /home/content/p3pnexwpnas03_data01/11/2436011/html/wp-content/themes/pnac/amthuc.php on line 2

Leave Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">


*

    Tìm Kiếm