Thiết kế theme wordpress-phần 4

21/12/2013 14:50 54267

Đã khá lâu rồi tôi mới viết bài, vì  là quá bận, hôm nay có thời gian tôi tranh thủ làm một bài tiếp theo, nào chúng ta cùng tiếp tục nhé

Nếu bạn chưa xem phần 3 thì xem theo link dưới đây:

• Thiết kế theme wordpress phần 3

Để thấy kế quả của custom header bạn có thể vào appearance->header:

 

• Thiết kế theme wordpress phần 5
• Thiết kế theme wordpress phần 6
• Thiết kế theme wordpress phần 7
• Thiết kế theme wordpress phần 8
• Giới thiệu khóa học làm chủ công nghệ Responsive Design
• Giới thiệu và hướng dẫn sử dụng code xem video haivl
• Dự án ebook thiết kế theme wordpress từ A->Z-Vì một cộng động yêu thích wordpress
• Lý do dự án về Ebook thiết kế theme wordpress ra đời
• Tản mạng về css
• Buổi tảng mạn về jquery
• Buổi tảng mạn về Php, mysql, apache, phpmyadmin, xampp

Hôm nay chúng ta sẽ đi tìm hiểu các lệnh tiếp theo nhé bạn:

Chúng ta cùng tìm hiểu về  phần banner trên header

Hình minh họa:

 

Mã lệnh html:

 

Bây giờ chúng ta sẽ chuyển qua theme wordpress: chúng ta sẽ tạo một khu widget tại đây để bỏ banner vào

Nếu bạn chưa xem cách như thế nào để tạo một widget thì có thể xem theo link dưới đây:

• Cách tạo một widget trong wordpress

Bạn mở file functions.php thêm lệnh sau vào:

 

Tôi xin giải thích sơ qua các lệnh php trên:

• register_sidebar: hàm này dùng để đăng ký với admin một khu widget có tên là banner
• name: tên khu widget
• id: id được dùng trong việc gọi khu widget này ra ngoài theme
• description: mô tả về khu widget
• before_widget: các mã lệnh bao ngoài khu widget ví dụ một thẻ div chẳn hạn ở đây tôi để trống
• after_widget: nếu bạn bao ngoài trên before widget là div thì phải đóng thẻ div ở đây
• before_title: mã html mở bao ngoài phần tiêu đề của các widget chứa trong khu widget này
• after_title: mã html đó của phần tiêu đề

Tiếp theo bạn quay lại header.php gõ các lệnh sau vào:

 

Vậy là chúng ta đã tạo xong một khu widget để chứa banner rồi đó bạn. Để thấy kế quả bạn vào appearance->widget

 

Bạn sẽ thấy một khu widget banner đã được tạo:

 

Bây giờ bạn vào phần media->add new để thêm một ảnh của banner

 

Bạn copy đường dẫn của ảnh banner để bỏ vào thẻ a của banner

<a href=”#”><img src=”http://ngochue.abc/wp-content/uploads/banner-ad-header.png” alt=”Banner quảng cáo”/></a>

 

Và bây giờ bạn vào phần quản lý widget kéo widget text vào khu widget banner và copy các lệnh vừa tạo bên trên và ra trang chủ xem kết quả thôi

 

Tôi xin tạm dừng tại đây

(còn tiếp…)