- 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
Chào các bạn,file footer cũng là một file khá là quan trọng trong wordpress, nó giúp chúng ta có thể tùy biến thêm các vùng hiển thị như dạng chân trang là 2 cột, 3 cột hay thông tin đơn vị chủ quan cho một trang web. Và bài hôm nay chúng ta sẽ học cách tùy biến phần footer này trong wordpress
Nguyên liệu cần cho bài học
- 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.
Trong bài viết này, tôi sẽ hướng dẫn bạn thêm 4 widget vào phần footer, tạo ra một trang web có chân trang gồm 4 cột sử dụng widget API
Đăng ký Widget Area với functions.php
Để theme có thể nhận widget trong admin, chúng ta cần phải khai báo với wordpress thông qua file functions.php. Bạn mở file functions.php lên, sau đó tìm wptutsplus_widgets_init() và theme đoạn code sau
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | // First footer widget area, located in the footer. Empty by default. register_sidebar( array( 'name' => __( 'First Footer Widget Area', 'compass' ), 'id' => 'first-footer-widget-area', 'description' => __( 'The first footer widget area', 'compass' ), 'before_widget' => '<div class="widget-container %2$s" id="%1$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) ); // Second Footer Widget Area, located in the footer. Empty by default. register_sidebar( array( 'name' => 'Second Footer Widget Area', 'id' => 'second-footer-widget-area', 'description' => 'The second footer widget area', 'before_widget' => '<div class="widget-container %2$s" id="%1$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); // Third Footer Widget Area, located in the footer. Empty by default. register_sidebar( array( 'name' => 'Third Footer Widget Area', 'id' => 'third-footer-widget-area', 'description' => 'The third footer widget area', 'before_widget' => '<div class="widget-container %2$s" id="%1$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); // Fourth Footer Widget Area, located in the footer. Empty by default. register_sidebar( array( 'name' => 'Fourth Footer Widget Area', 'id' => 'fourth-footer-widget-area', 'description' => 'The fourth footer widget area', 'before_widget' => '<div class="widget-container %2$s" id="%1$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); |
Sau khi đăng ký xong, bạn vô Admin -> Appearance -> Widgets sẽ thấy xuất hiện wordpress đã nhận 4 widget của chúng ta, nhưng đây chỉ giúp nhận trong Admin thôi, chứ trong file footer.php của chúng ta chưa có gì cả, nên điều hiển nhiên nó sẽ chằng xuất hiện cái gì ra bên ngoài 😀
Bạn mở file footer.php và tìm đoạn code sau
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <aside class="fatfooter" role="complementary"> <div class="first quarter left widget-area"> <div class="widget-container"> <h3 class="widget-title">First footer widget area</h3> A widget area in the footer - use plugins and widgets to populate this. </div><!-- .widget-container --> </div><!-- .first .widget-area --> <div class="second quarter widget-area"> <div class="widget-container"> <h3 class="widget-title">Second footer widget area</h3> A widget area in the footer - use plugins and widgets to populate this. </div><!-- .widget-container --> </div><!-- .second .widget-area --> <div class="third quarter widget-area"> <div class="widget-container"> <h3 class="widget-title">Third footer widget area</h3> A widget area in the footer - use plugins and widgets to populate this. </div><!-- .widget-container --> </div><!-- .third .widget-area --> <div class="fourth quarter right widget-area"> <div class="widget-container"> <h3 class="widget-title">Fourth footer widget area</h3> A widget area in the footer - use plugins and widgets to populate this. </div><!-- .widget-container --> </div><!-- .fourth .widget-area --> </aside><!-- #fatfooter --> |
Và thay bằng một đoạn ngắn hơn như sau
1 2 3 4 5 6 7 | <aside class="fatfooter" role="complementary"> <div class="first quarter left widget-area"></div><!-- .first .widget-area --> <div class="second quarter widget-area"></div><!-- .second .widget-area --> <div class="third quarter widget-area"></div><!-- .third .widget-area --> <div class="fourth quarter right widget-area"></div><!-- .fourth .widget-area --> </aside> <!-- #fatfooter --> |
Ngoài ra, bạn có thể thêm một số thứ nhỏ nhỏ bên dưới chân trang như phần copyright, đơn vị chủ quản….
Trong file footer.php trước thẻ < /body> chúng ta thêm dòng sau
1 | <?php wp_footer(); ?> |
Và cuối cùng là save lại
Download code
Như vậy là chúng ta đã lấy xong toàn bộ nội dung của bài viết trong database rồi đấy.
link die rồi. up lại hộ mình xem với
Mình vừa kiểm tra vẫn còn dùng được nhé bạn