How to convert Widget Linklist to Widget HTML

Trong bài viết Chuyển Menu từ Widget Linklist sang HTML tĩnh, tôi đã hướng dẫn các bạn cách loại bỏ widget linklist để config menu dễ dàng và nhanh chóng hơn với mã nguồn HTML. Trong bài viết này chúng ta sẽ biết thêm một thủ thuật nữa đó là convert widget linklist sang widget html

Tại sao lại có bài viết này và tại sao phải convert ? Như đã trình bày, widget linklist chỉ phù hợp với menu nhỏ và vừa, với menu lớn, nhiều cấp webmaster sẽ rất vất vả để config xong. Bài viết chuyển từ linklist sang HTML tĩnh sẽ rất tiện cho webmaster thường làm việc với mã nguồn website, nhưng khi bạn mang template đi chia sẻ cho bạn bè, người thân, người yêu cũ,...không rành về mã nguồn, thì nên để config menu ở dạng widget để họ chỉnh sửa trong giao diện UI hơn là bắt họ chỉnh sửa trong mã HTML

Ok nói như vậy chắc bạn cũng hiểu được ý tôi rồi. Chúng ta bắt đầu làm nhé

Bước 1: Xác định linklist bạn muốn chuyển đổi, nhấn vào nút chỉnh sửa để lấy ID

Trong ví dụ này là LinkList210

Bước 2: Chuyển sang giao diện chỉnh sửa HTML và nhảy tới id vừa tìm được

Bước 3: View-sources trang của bạn và tìm tới linklist đó

Toàn bộ nội dung linklist convert sang html sẽ nằm trong <div class='widget-content'>, bạn chỉ cần copy hết nội dung bên trong nó là được

Bước 4: Thay thế widget linklist bằng widget HTML

<b:widget id='HTML210' locked='false' title='Menu' type='HTML' version='1'>
    <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[
// Dán code menu của bạn vào đây
]]></b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
        <div class='widget-content'>
            <data:content/>
        </div>
    </b:includable>
</b:widget>

Ví dụ

Lưu ý id HTML210 nếu đã tồn tại trong template thì bạn đổi thành số khác để lưu được mẫu

Sau khi lưu xong tôi thu được kết quả sau

Trong bố cục

Giao diện web

Bố cục đã ok rồi nhưng sao ngoài giao diện web lại bị hỏng ? Rất đơn giản thôi, hầu hết template dùng linklist đều sử dụng js, do ta đã chuyển widget linklist sang widget HTML nên đã loại bỏ đi class LinkList

Bạn chỉ cần tìm đến đoạn js của menu (nếu code bị mã hóa truy cập https://hoanghung96cs.github.io/de4js/ để giải mã). Đổi class .LinkList thành class .HTML là xong

Ok menu đã hoạt động trơn tru

Ok như vậy tôi đã trình bày cho các bạn xong cách convert Widget Linklist sang Widget HTML không làm hỏng bố cục template, thủ thuật không quá phức tạp hi vọng bạn áp dụng thành công nó cho template của mình

Chúc thành công !