NHANWEB

Bổ sung widget area cho theme WordPress

Tôi không biết bạn có bạn có bao giờ gặp khó khăn khi phải mở source code ra chỉnh sửa hoặc bổ sung thêm các vị trí banner, các mã Adsense trên website hay không nhưng với tôi thì tôi gặp chuyện đó thường xuyên và không phải lúc nào cũng có đủ đồ chơi(Editor, công cụ FTP, tài khoản FTP…) để làm được việc đó. Đôi lúc những đoạn mã chúng ta đưa vào thêm gây lỗi làm vỡ layout và việc chinh sửa lại cũng khó khăn lắm. Nếu bạn cũng gặp khó khăn đó thì giải pháp khả dĩ cho bạn là những vị trí bạn thường xuyên thay đổi, bạn có thể biến chúng thành một Widget Area và sử dụng Widget để bổ sung, chỉnh sửa mã dễ dàng bằng các Widget có sẵn trong WordPress và bài viết này sẽ hướng dẫn bạn làm việc đó.

WordPress Widget

Một ví dụ thường gặp nhất là bạn muốn chèn banner vào một vị trí nào đó, banner đó thường xuyên thay đổi khiến bạn phải mệt mỏi với việc mở theme ra chỉnh sửa. Lúc này, hãy đăng ký thêm một vị trí Widget Area cho theme và sử dụng Widget Text để bổ sung, chỉnh sửa vị trí banner dễ dàng hơn.

Thật ra phần này tôi đã có dịp viết trong loạt bài hướng dẫn lập trình thiết kế giao diện WordPress rồi, nếu bạn muốn tìm hiểu về thiết kế theme WordPress, bạn có thể đọc lại bài viết làm việc với widget trong loạt bài đó. Còn nếu nhu cầu của bạn đơn giản hơn, bạn có thể đọc bài viết này.

Đăng ký một Widget Area

Bạn thêm đoạn mã sau vào function.php của theme để đăng ký một widget mới:

[code language=”php”] register_sidebar( array(
‘name’ => "Tên widget",
‘id’ => ‘id-viet-lien-khong-dau-va-duy-nhat’,
‘description’ => "Mô tả vị trí widget",
‘before_widget’ => ‘<li id="%1$s" class="widget-container %2$s">’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h3 class="widget-title">’,
‘after_title’ => ‘</h3>’,
) );
[/code]

Đoạn mã này sẽ khai báo với WordPress rằng bạn sẽ sử dụng một widget có ID là id-viet-lien-khong-dau-va-duy-nhat, nhớ khai báo những thông tin ở trên cho chính xác và phù hợp với thông tin mà bạn muốn nhé.

Đặt Widget Area mới vào theme

Tiếp theo, chúng ta tìm đến vị trí tương ứng mà bạn muốn đặt Widget Area trong theme, tùy theo nhu cầu của mình bạn sẽ lựa chọn vị trí thích hợp và file thích hợp. Hãy xem thêm cấu trúc một theme WordPress để biết được bạn cần đặt vào file nào, vị trí nào để phù hợp với nhu cầu của mình. Phần này mình không thể giúp các bạn được nhiều rồi…

Ở vị trí cần đặt Widget Area chúng ta bổ sung thêm đoạn mã sau:
[code language=”php”] <div class="widget-area">
<?php dynamic_sidebar( ‘id-viet-lien-khong-dau-va-duy-nhat’ ); ?>
</div>
[/code]

Đoạn mã này có nghĩa là những Widget mà chúng ta đã đặt vào vùng Widget Area có tên là id-viet-lien-khong-dau-va-duy-nhat sẽ được đặt ở vùng mã này. Bạn có thể bổ sung thêm thuộc tính id hoặc thuộc tính class cho thẻ div bao bên ngoài để tùy chỉnh CSS thêm nếu muốn.

Xong rồi, giờ thì vào hệ thống quản trị WordPress và chọn Theme => Widget bạn sẽ thấy Widget Area mới, kéo Widget vào vùng mới bạn sẽ có thể thấy nó hiển thị ra bên ngoài.

Đơn giản và dễ dàng để tùy biến thêm tính năng cho theme bạn đang dùng phải không.

Exit mobile version