Lập Trình Theme WordPress – Phần 5 – Xây Dựng Footer

Tiếp tục chuỗi bài về lập trình theme WordPress, hôm nay, chúng ta sẽ tiếp tục hoàn thiện file Footer.php thể hiện nội dung ở chân trang

Giới thiệu widget

Widget là gì?

Ở góc độ người dùng widget là một chức năng của WordPress. Cho phép hiển thị nội dung hoặc tính năng vào sidebars.

Ở góc độ lập trình viên, chúng ta có thể hiểu: mỗi widget là một hàm chức năng để hiển thị nội dung hoặc một tính năng nào đó. Widget sẽ được hiển thị ở một khu vực của giao diện được khai báo từ trước, khu vực đó sẽ có tên là widget areas. Thông thường, để nâng cao trải nghiệm của người dùng, các giao diện thường định nghĩa sẵn 1 widget areas và cho nó hiển thị ở khu vực sidebar của trang web. Chúng ta cần hiểu rõ vấn đề này để tránh những nhận định sai lầm:

  • Widget tự động hiển thị ở khu vực sidebar của trang web
  • Widget chỉ có thể hiển thị ở sidebar

Một số widget cơ bản của WordPress

WordPress cung cấp cho bạn một số widget với chức năng cơ bản:

  • Audio giúp bạn nhúng trình chơi audio (nhạc) lên trang.
  • Bài viết mới hiển thị các bài viết mới nhất trên website.
  • Chuyên mục hiển thị danh sách chuyên mục.
  • Dòng thông tin – RSS
  • Galleyry ảnh hiển thị thư viện ảnh
  • HTML Tùy chỉnh cho phép sử dụng mã HTML
  • Lưu trữ lưu trữ các bài viết theo từng tháng
  • Lịch
  • Meta
  • Mây thẻ (Tags) danh sách các thẻ
  • Phản hồi gần đây
  • Thanh điều hướng
  • Trang
  • Tìm kiếm hiển thị form tìm kiếm
  • Video
  • Văn bản
  • Ảnh

Khai báo widget trong theme

Để theme của chúng ta có thể sử dụng widget, chúng ta cần thực hiện khai báo và hiển thị widget areas ở giao diện.

Khai báo

WordPress cung cấp phương thức register_sidebar() để chúng ta có thể khai báo một widget area. register_sidebar sẽ nhận 1 tham số dạng mảng với các phần tử:

  • name (string): Tên hiển thị của sidebar.
  • id (string): id của sidebar, sẽ dùng để hiển thị ở template
  • description (string): mô tả về sidebar
  • class (string): tên class CSS sẽ được gán khi hiển thị widget ở giao diện
  • before_widget (string): đoạn mã HTML xuất hiện trước widget
  • after_widget (string): đoạn mã HTML hiển thị sau widget
  • before_title (string): đoạn mã HTML xuất hiện trước tiêu đề widget
  • after_title (string):  đoạn mã HTML hiển thị sau tiêu đề của widget

Đoạn mã bên dưới để đăng ký 2 sidebars (widget areas). Một ở sidebar trang web và 1 ở footer.

Hiển thị

Để hiển thị các widget trong 1 sidebar, WordPress cung cấp cho chúng ta phương thức dynamic_sidebar() với 1 tham số truyền vào là name hoặc id của sidebar. Các bạn cũng có thể sử dụng thêm phương thức is_active_sidebar() để chắc chắn là sidebar của chúng ta đã được kích hoạt.

Tương tự như lúc xây dựng header của theme chúng ta cũng sẽ viết toàn bộ mã nguồn vào file footer.php trong folder theme của chúng ta.

Sử dụng widget để hiển thị nội dung

Theo tính toán của mình, ở footer mình sẽ cho hiển thị 3 cột, mỗi cột sẽ sử dụng một widget có sẵn của WordPress để hiển thị thông tin.

  1. Thông tin công ty, chủ thể trang blog
  2. Danh sách danh mục bài viết
  3. Facebook fanpage

Để vào giao diện quản lý widget, ở giao diện admin, các bạn sử dụng menu Giao diện -> Widget.

Giao diện gồm 3 phần:

  • Phần 1: Danh sách các widget mặc định của WordPress, plugin hay theme.
  • Phần 2 và 3: là các khu vực hiển thị được khai báo trong theme.

Để sử dụng, các bạn chỉ cần kéo các widget ở phần 1 qua khu vực cần hiển thị, sắp sếp đúng thứ tự và điền nội dung cho các widget.

Cài đặt các widgets cơ bản

Cài đặt nội dung cho widget văn bản để hiển thị thông tin công ty.

Cài đặt widget danh mục để hiển thị danh mục bài viết

Nhúng một số dịch vụ vào trang web

Để hiển thị Fanpage Facebook. Các bạn sẽ cần làm nhiều việc hơn 1 chút.

Đầu tiên, truy cập vào Plugin Trang, kéo xuống dưới bạn sẽ thấy giao diện như hình bên dưới:

Các bạn điền các thông số, check vào các lựa chọn, sau khi phần xem trước vừa ý các bạn, các bạn click vào button lấy mã. Lúc này, Facebook sẽ cung cấp cho chúng ta một popup

Theo như popup, bước 1 có thể các bạn sẽ phải tạo thêm 1 ứng dụng Facebook nữa. Đoạn mã ở bước 2 được yêu cầu dán vào ngay sau thẻ mở của thẻ body.

Vậy chúng ta sẽ copy đoạn code này, mở file header.php và dán chúng vào đúng vị trí.

Đoạn mã ở bước 3 sẽ để ở nơi muốn hiển thị. Do đó, chúng ta sẽ copy và dán đoạn code này vào widget HTML của mình.

Các bạn nhớ, sau khi cập nhật các widget, cần click vào button lưu lại nhé. Sau các bước trên, chúng ta hay thử ra ngoài giao diện và kiểm tra thành quả.

Giao diện lúc này đã hiển thị đúng ý đồ của mình, nhưng chưa được thẩm mỹ lắm. Mình sẽ cập nhật lại file style.css và đây là thành quả.

Chúc các bạn thành công, trong bài kế tiếp, chúng ta sẽ hoàn thành giao diện trang chủ của chúng ta nhé. Dự kiến trang chủ của mình sẽ có 1 slider, 1 đoạn nhỏ giới thiệu và hiển thị các bài viết mới nhất dạng grid. Để làm được điều đó, mình sẽ tiếp tục giới thiệu vòng lặp trong WordPress, khái niệm shortcode.