Tiện ích văn bản wordpress

Wordpress được biết đến là một mã nguồn mở giúp người dùng có thể chủ động thiết lập. Tuy nhiên, với những người dùng không biết nhiều về code, setup chương trình thì có thể gặp phải khó khăn trong việc tự thiết kế các tính năng mong muốn. Để giải quyết vấn đề đó, Wordpress cung cấp cho người dùng các công cụ quản lý hiệu quả. Trong đó có Widget. Như vậy Widget là gì?

Nội dung

1. Widget là gì?
2. Khi nào sử dụng các Widget WordPress?
3. 11 ví dụ về Widget WordPress
   1. 1. Widget Bài đăng gần đây
   2. 2. Widget Nhận xét gần đây
   3. 3. Widget kêu gọi hành động
   4. 4. Điều hướng tiện ích
   5. 5. phương tiện tiện ích
   6. 6. Tiện ích mạng xã hội
   7. 7. Tiện ích Giỏ hàng
   8. 8. Mẫu tiện ích
   9. 9. bộ giải mã widget
   10. 10. Tiện ích đăng nhập
   11. 11. Tìm kiếm tiện ích
4. Cách thêm Widget cho Wordpress
   1. Tìm kiếm widget cho trang web Wordpress
   2. Add widget with a Plugin
   3. Cách thêm Widget vào Sidebar và Footer trong WordPress
   4. Cách chỉnh sửa widget là gì?
5. Tạo Widget WordPress trong chủ đề chức năng tệp
6. Cách viết widget code bằng widget API
   1. Tổng quan về widget API
   2. Tạo plugin cho widget WordPress
   3. Create a layer for widget
   4. Widget đăng ký
   5. Thêm CSS vào Widget
7. Lời kết

Widget là gì?

Widget hay Widget WordPress là một trong những công cụ của WordPress có chức năng bổ sung nội dung và định hình danh mục cho các bài viết như sidebar hay footer.  

Các tiện ích chứa thông tin, điều hướng hoặc phương tiện tách biệt với một bài đăng hoặc trang riêng lẻ. Trong hầu hết các trường hợp, mỗi widget sẽ được hiển thị trên mọi trang trong trang web, nhưng người dùng cũng có thể đăng ký Widget cho các trang cụ thể như trang chủ

To add a widget into a page web, you please add it to a widget area. Widget khu vực được tạo theo chủ đề vì chúng liên quan đến thiết kế và bố cục của trang web chứ không phải chức năng

Hầu hết các theme WordPress đều có các khu vực widget trong sidebar (thanh bên) và footer (chân trang). Ngoài ra, widget khu vực còn xuất hiện ở nhiều vị trí khác nhau như bên dưới hoặc phía trên nội dung hoặc có thể nằm trong tiêu đề

WordPress đi kèm với một loạt tiện ích được tải sẵn để người dùng không cần phải cài đặt plugin hoặc viết mã. Nhưng bạn cũng có thể thêm nhiều widget khác bằng cách cài đặt các plugin hoặc viết mã của riêng mình

Widget có thể bao gồm nhiều loại nội dung như tiện ích phương tiện, nguồn cấp dữ liệu mạng xã hội, điều hướng, tìm kiếm, bản đồ và nhiều nội dung khác. Có rất nhiều mã thứ cấp mà người dùng có thể tìm thấy widget cho trang web của mình. Tuy nhiên, người dùng nên lưu ý lựa chọn tùy chọn phù hợp và không nên quá lạm dụng widget

Sau khi đã xác định khái niệm Widget là gì, Widget WordPress là gì hay Widget trong WordPress là gì, hãy tiếp tục tìm hiểu xem khi nào bạn cần sử dụng các Widget WordPress trong phần nội dung tiếp theo nhé

>> Xem thêm. Cách thêm sidebar cho WordPress

Khi nào sử dụng các Widget WordPress?

Khi nào bạn muốn thêm nội dung bổ sung vào một hoặc nhiều trang trong trang web thì nên sử dụng widget. Widget rất hữu ích trong việc làm nổi bật các nội dung cần hiển thị trên mọi trang của trang web, chẳng hạn như danh sách các bài đăng mới nhất, hàng hoặc nút kêu gọi hành động

Hãy nghĩ xem có bao nhiêu người dùng cần quyền truy cập vào từng widget và tầm quan trọng khi bạn quyết định đặt widget ở đâu. Thông thường, các tiện ích trong thanh bên sẽ nổi bật hơn các tiện ích ở chân trang

Widget bài đăng mới nhất được đặt ở sidebar sẽ tốt hơn, bởi đây là nơi khách truy cập có nhiều cơ hội tương tác với widget hơn. Trong khí đó, tiện ích liên kết mạng xã hội nên nằm ở chân trang

Nếu chủ đề có các widget khu vực dành riêng cho trang chủ, bạn có thể sử dụng các khu vực này để điều hướng xung quanh các khu vực của trang web, danh sách nội dung có liên quan hoặc video chào mừng khách hàng truy cập

11 ví dụ về Widget WordPress

Cách tốt nhất để hiểu khả năng của widget WordPress là xem một số ví dụ. Hãy xem xét 11 loại tiện ích thường thấy trên các trang web WordPress ngay sau đây

1. Widget Bài đăng gần đây

Bài đăng gần đây trong widget là gì?

Widget Bài đăng gần đây được cài đặt sẵn với WordPress cho phép bạn đặt số lượng bài đăng mà bạn muốn hiển thị và tiêu đề muốn cung cấp cho widget

Nếu muốn thêm chức năng bổ sung, bạn có thể cài đặt một plugin cho một tiện ích thay thế như WordPress Popular Post hiển thị nội dung phổ biến nhất. Ngoài ra, widget Advanced Random Post sẽ tự động làm mới mỗi khi người dùng truy cập vào một màn hình mới

2. Widget Nhận xét gần đây

Bạn muốn cho khách truy cập xem trang web sinh động và mức độ tương tác của người đọc giả với nội dung của mình?

Widget Recent Comment là một trong các widget hay cho WordPress giúp hiển thị các nhận xét mới nhất trên trang web giúp khách truy cập có cơ hội điều hướng thẳng đến các nhận xét đó và tham gia vào cuộc thảo luận

Widget Recent Comment đi kèm với WordPress, nếu muốn thêm chức năng bổ sung, bạn có thể cài đặt plugin comment của bên thứ ba, chẳng hạn như widget WP Social Comments cho phép mọi người nhận xét bằng tài khoản Facebook, rất tốt cho tương tác

>> Xem thêm. Tạo thanh bên với các plugin thanh bên WordPress

3. Widget kêu gọi hành động

Đây là một tiện ích được sử dụng để khuyến khích mọi người thực hiện hành động. Nút widget mặc định có thể đơn giản, bạn có thể tự tạo ra các nút riêng biệt của mình bằng cách sử dụng widget văn bản hoặc widget HTML, hoặc thậm chí là widget hình ảnh, tất cả đều được cài đặt sẵn trên WordPress

4. Điều hướng tiện ích

Bạn cũng có thể sử dụng các tiện ích để khuyến khích mọi người điều hướng xung quanh trang web của mình. Có một số tùy chọn như. Widget Tag Cloud và Widget Navigation Menu. Trong đó, Widget Navigation Menu cho phép tạo menu điều hướng tùy chỉnh cũng như menu điều hướng chính trong trang web, sau đó thêm menu đó vào vùng widget

Thêm menu điều hướng vào web chân trang sẽ khuyến khích mọi người đến cuối bài đăng để điều hướng xung quanh web của bạn. Điều này rất hữu ích cho những người sử dụng thiết bị di động, những người có thể phải cuộn nhiều lần để quay lại menu điều hướng chính sau khi đọc xong bài đăng

Ngoài ra, bạn có thể sử dụng widget Categories tích hợp để hiển thị danh sách các danh mục trong trang web của mình hoặc widget Tag Cloud để giúp mọi người dễ dàng truy cập vào kho lưu trữ tag.

5. phương tiện tiện ích

Thêm phương tiện vào thanh bên hoặc chân trang sẽ làm cho trang web trở nên sống động và cung cấp cho người dùng nhiều nội dung để xem hoặc tương tác

Bạn có thể sử dụng widget Icodege tích hợp để hiển thị bất kỳ hình ảnh nào trong thanh bên hoặc chân trang và nó cũng cho phép bạn chuyển hình ảnh đó thành một liên kết

Ngoài ra, widget video cho phép bạn truyền video từ YouTube hoặc Vimeo ngay vào vùng widget trên trang web. Điều này rất thuận lợi nếu trang web có các khu vực widget đặc biệt cho trang chủ. Ngoài ra, nếu đặt ở footer cũng được xem là một cách thu hút sự chú ý của mọi người khi họ đến cuối bài đăng

6. Tiện ích mạng xã hội

Nếu bạn muốn tương tác với những người truy cập trang web của mình bằng mạng xã hội, việc thêm nguồn dữ liệu mạng xã hội vào thanh bên hoặc chân trang của trang web sẽ cho mọi người biết rằng bạn đang hoạt động trên mạng xã hội và

Để có quyền truy cập vào các widget mạng xã hội cho các nền tảng lớn nhất (Facebook, Twitter, Instagram), bạn có thể cài đặt plugin Jetpack

Ngoài ra, tất cả các nền tảng mạng xã hội đều có plugin riêng miễn phí thông tin qua thư mục plugin. Hoặc bạn có thể tìm thấy các plugin của bên thứ ba để cho phép tùy chỉnh cách hiển thị nguồn cấp dữ liệu mạng xã hội

7. Tiện ích Giỏ hàng

Nếu có một cửa hàng Thương mại điện tử trên trang web bằng cách sử dụng một plugin như WooC Commerce, thì bạn nên có các tiện ích đẹp cho WordPress dạng thùng hàng để người dùng có thể dễ dàng điều hướng đến Thùng hàng dù họ ở bất kỳ đâu trong cửa hàng

Bạn có thể đặt tiện ích trong thanh bên nơi mọi người có thể dễ dàng nhìn thấy hoặc trong tiêu đề để tăng khả năng hiển thị nếu chủ đề của bạn có một tiện ích khu vực

Các plugin Thương mại điện tử như WooC Commerce bao gồm các tiện ích đặt hàng và các tiện ích Thương mại điện tử khác như một phần của plugin. Vì vậy, khi bạn đã thêm Thương mại điện tử vào trang web, bạn sẽ thấy chúng được thêm vào tiện ích màn hình

8. Mẫu tiện ích

Nếu bạn muốn mọi người liên hệ với mình, đặt câu hỏi hoặc đăng ký thông tin gửi qua email, bạn có thể thêm biểu mẫu vào thanh bên

Không có widget form đi kèm với WordPress nhưng bạn có thể thêm các plugin, chẳng hạn như Contact Form 7 miễn phí hoặc Gravity Form cao cấp

9. bộ giải mã widget

Nếu doanh nghiệp có trụ sở tại một vị trí thực tế và bạn muốn mọi người có thể dễ dàng tìm thấy, thì việc thêm widget codep vào trang web sẽ hữu ích

Có một số tiện ích plugin bản đồ Google miễn phí hoặc các plugin bản đồ WordPress khác, chẳng hạn như plugin WP Google codeps

Ngoài ra, nếu không muốn cài đặt plugin, bạn có thể lấy mã nhúng từ Google codeps và thêm mã đó vào widget HTML

10. Tiện ích đăng nhập

Widget đăng nhập là gì?

Widget Meta đi kèm với WordPress bao gồm một liên kết đăng nhập nhưng nó cũng bao gồm những mã thứ khác mà bạn không thể cần đến, vì vậy Vietnix khuyên bạn nên sử dụng một plugin riêng cho cái này từ plugin thư mục

Widget Login with Ajax cung cấp cho bạn một biểu mẫu đăng nhập trong widget, nghĩa là mọi người đều có thể đăng nhập vào trang web của bạn từ bất kỳ trang nào

11. Tìm kiếm tiện ích

Một tiện ích thực sự đơn giản nhưng cực kỳ hữu ích là tiện ích Tìm kiếm, được tải sẵn với WordPress

Thêm phần này vào thanh bên hoặc tiêu đề giúp mọi người tìm thấy mọi thứ trên trang web dễ dàng hơn. Nếu bạn muốn tăng sức mạnh của tìm kiếm widget, bạn có thể cài đặt widget WP Google Search miễn phí

Cách thêm Widget cho Wordpress

Sau khi nắm rõ widget là gì và lựa chọn loại widget cần thiết cho trang web WordPress của mình, thì bước tiếp theo là tiến trình cài đặt widget

Tốt nhất bạn hãy tập trung vào 2 hoặc 3 widget con main cho sidebar. Bạn có thể thêm nhiều hơn vào chân trang – vị trí ít quan trọng hơn

Nếu có bất kỳ widget khu vực bổ sung nào trong chủ đề của mình, bạn cần quyết định đặt những widget con nào vào những khu vực đó để đảm bảo chúng phù hợp với bố cục và thiết kế của trang web

Cách thêm widget là gì?

• Sử dụng các widget đã có trong WordPress
• Add widget of side of the plugin from directory
• Mua một plugin cao cấp bao gồm một widget

Tìm kiếm widget cho trang web Wordpress

Hãy xem xét các tùy chọn và sau đó lựa chọn tùy chọn tốt nhất cho mình

Các widget đi kèm với WordPress

Nếu một trong các tiện ích được cài đặt sẵn đáp ứng nhu cầu của bạn, thì hãy sử dụng tiện ích đó. Nó sẽ giúp bạn tiết kiệm thời gian làm ít code hơn trên trang web

Các tiện ích được cài đặt sẵn là

• lưu trữ. Liên kết đến các kho lưu trữ theo tháng, được thiết kế cho các blog nhưng hiện tại đã khá lỗi thời
• Lịch. Lịch các bài đăng phù hợp với blog, đặc biệt với blog cảm xúc về thời gian (nhưng không quá phổ biến)
• HTML tùy chỉnh. Tính linh hoạt cao nhất, thêm bất kỳ nội dung nào bạn muốn bằng cách nhập hoặc dán vào HTML (như biểu mẫu của Google). Bỏ qua tiện ích này nếu bạn không cảm thấy thoải mái khi viết mã
• Icodege. Hiển thị hình ảnh từ thư viện phương tiện
• Chức năng điều hướng. Hiển thị menu điều hướng chính hoặc menu biệt mã bạn tạo
• Nhận xét gần đây. Danh sách các nhận xét gần đây có liên quan đến chúng
• Thẻ đám mây. Danh sách các thẻ ở định dạng đám mây, với các liên kết đến các kho lưu trữ có liên quan
• Băng hình. Nhúng video từ YouTube hoặc bất kỳ dịch vụ phát trực tuyến nào khác
• âm thanh. Nhúng podcast, trình phát, bài hát hoặc các clip âm thanh khác.  
• thể loại. Danh sách các danh mục trong blog, với các liên kết đến các trang lưu trữ
• Bộ sưu tập. Nâng cao hơn widget hình ảnh, hiển thị thư viện hình ảnh
• meta. Siêu dữ liệu như liên kết đăng nhập và nguồn cấp RSS. Tuy nhiên, tiện ích này cũng không hữu ích lắm
• Trang. Hiển thị danh sách các trang trên trang web với các liên kết
• Bài đăng gần đây. Hiển thị danh sách các bài đăng gần đây nhất của bạn để khuyến khích mọi người đọc
• Tìm kiếm. Đơn giản tìm kiếm một hộp
• Chữ. Bất kỳ văn bản nào bạn muốn thêm vào, chẳng hạn như thông tin về trang web

Add widget with a Plugin

Thư mục plugin WordPress có tiện ích plugin hàng ngàn miễn phí sẽ cung cấp nhiều tiện ích để lựa chọn

Ngoài ra, rất nhiều plugin khác cũng bao gồm các widget, chẳng hạn như plugin Thương mại điện tử cung cấp một widget thùng hàng và nhiều widget khác nữa

Nếu thư mục plugin không có plugin bạn cần, bạn có thể thêm một plugin cao cấp. Đôi khi những plugin này sẽ cung cấp nhiều chức năng hơn hoặc giao diện trực quan hơn. Tuy nhiên, có thể bạn sẽ tìm thấy các tính năng tương tự trong một plugin miễn phí, vì vậy hãy tìm kiếm plugin kỹ thư mục trước khi mua các plugin

Cách tìm Widget phù hợp với trang web

Để tìm widget WordPress phù hợp với bạn, hãy làm theo các mẹo sau

• Xác định chính xác những gì bạn cần từ widget. Nó cần có chức năng gì và bạn muốn nó trông như thế nào?
• Kiểm tra các tiện ích hợp lệ để xem có tiện ích nào đáp ứng nhu cầu của bạn không. Kiểm tra xem bất kỳ widget nào có liên quan, nếu bạn thấy cái phù hợp thì sẽ rất tốt.   
• Kiểm tra mã plugin thư mục mà bạn có thể truy cập thông qua Plugins > Add New. Hãy thử tìm kiếm với nhiều thuật ngữ khác nhau để tìm plugin phù hợp, bạn có thể tìm kiếm từ khóa có và không có từ “widget”. Đôi khi, một plugin không tập trung vào các tiện ích con sẽ bao gồm một tiện ích con như một phần của các tính năng mở rộng hơn của tập tin

Nếu bạn không thể tìm thấy điều gì phù hợp trong số các plugin miễn phí, hãy tìm một plugin cao cấp. Tham khảo những người dùng WordPress khác để biết các tiêu đề xuất hiện về các widget hay cho WordPress, các widget đẹp cho WordPress và xem xét các đánh giá trước khi chọn

Cho dù bạn chọn widget nào, bạn cần phải kiểm tra widget đó để kiểm tra xem nó có hoạt động như mong muốn hay không. Nếu bạn đang mua plugin cao cấp, Vietnix khuyên bạn nên mua plugin có chính sách đảm bảo hoàn tiền hoặc thời gian dùng thử miễn phí trong trường hợp nó không phù hợp

Cách thêm Widget vào Sidebar và Footer trong WordPress

Bây giờ bạn đã chọn widget của mình, đã đến lúc thêm nó vào trang web. Cách thêm Widget là gì?

Bạn có thể thêm tiện ích vào bất kỳ tiện ích khu vực nào đang hoạt động do chủ đề bạn cung cấp. Nếu chủ đề không có tiện ích khu vực ở nơi bạn muốn, hãy thử tìm một chủ đề thay thế

Ở phần sau của bài đăng này, Vietnix sẽ hướng dẫn bạn cách viết code cho widget khu vực.  

Có hai cách để thêm widget vào trang web

• Use Customizer. Đi tới Giao diện > Tùy biến > Tiện ích trong menu quản trị hoặc Tùy chỉnh > Tiện ích từ thanh quản trị ở đầu màn hình
• Qua màn hình quản trị Widget. Đi tới Giao diện > Widget trong menu quản trị hoặc từ thanh quản trị, nhấp vào Tùy chỉnh > Widget

Vietnix sẽ hướng dẫn bạn cách sử dụng cả hai phương pháp này, nhưng trước tiên hãy cùng xem các widget khu vực và lý do tại sao bạn nhận được những điều bạn làm với chủ đề của mình

Widget không chỉ dành cho Sidebar

Tùy thuộc vào theme WordPress, bạn có thể thấy các widget khu vực ở nhiều nơi

Hầu hết các chủ đề đều có các khu vực widget trong sidebar và footer. Nhưng một số cũng có ở những vị trí khác, như bên dưới hoặc phía trên nội dung hoặc trong tiêu đề

Nếu đi tới màn hình cài đặt widget con trong quản trị viên WordPress, bạn sẽ có thể xem tất cả các widget khu vực trong chủ đề của mình

Nếu bạn muốn thêm widget vào những nơi khác trong trang web của mình, bạn nên tìm một chủ đề có nhiều khu vực widget con. Cách tốt nhất để làm điều này là sử dụng một khung chủ đề

Một ví dụ điển hình về tiện ích con ở một vị trí trong chủ đề không phải là thanh bên hoặc chân trang mà là thêm thanh tìm kiếm vào tiêu đề.  

Các khu vực widget và chủ đề

Widget khu vực được mã hóa thành chủ đề mẫu tệp, cũng như chủ đề chức năng tệp

Tại đây, bạn có thể thấy mã Vietnix đã sử dụng trong tệp chức năng chủ đề để thêm tiện ích khu vực xuất hiện trong tiêu đề

register_sidebar( array(

'name' => __( 'In Header Widget Area', 'rmccollin' ),

 'id' => 'in-header-widget-area',
 'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),
 'before_widget' => '
',
 'after_widget' => '
',
 'before_title' => '
',
 'after_title' => '
',
) );

Và đây là đoạn mã trong tiêu đề tệp. php to add khu vực widget đó vào đúng vị trí trong theme.  

if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>
 

Nếu bạn muốn thêm các widget khu vực bổ sung trong chủ đề của mình, bạn cần thêm cùng một loại mã. Đừng quên nếu chủ đề của bạn không có nhiều khu vực widget thì bạn luôn có thể thực hiện một trong hai cách sau

• Tìm một chủ đề có các mã widget khu vực bạn muốn
• Tiện ích mã mới thành chủ đề của bạn hoặc một phần con của chủ đề

Khi đã có các widget khu vực ở tất cả các vị trí trong mã chủ đề bạn muốn, bạn có thể bắt đầu thêm widget

Cách sử dụng Widget Screen để thêm widget

Có hai cách để thêm widget vào trang WordPress. Cách đầu tiên là sử dụng mã cấu hình Widget trong quản trị viên WordPress

Lật vào Giao diện > Widget. Thao tác này sẽ hiển thị mã hình widget

To add a widget, could implement a two way after

• Kéo từ danh sách widget ở phía bên trái vào khu vực widget có liên quan
• Lướt vào tiện ích bạn muốn thêm sẽ thấy danh sách những nơi bạn có thể thêm tiện ích đó. Chọn khu vực widget bạn muốn và nhấp vào nút Thêm widget

Sau đó, bạn cần phải chỉnh sửa vị trí của widget trong khu vực widget

Có thể thêm bao nhiêu widget tùy thích vào từng widget khu vực, tuy nhiên không nên thêm quá nhiều. Có thể kéo các xung quanh trong khu vực phụ tùng con để sắp xếp theo đúng thứ tự. Bạn cũng có thể kéo từ widget khu vực này sang widget khu vực khác nếu không thích giao diện của chúng

Bạn cũng có thể sử dụng bàn phím để thêm tiện ích bằng tiện ích màn hình, nếu không có quyền sử dụng chuột, bạn vẫn có thể thêm tiện ích

Thêm và chỉnh sửa widget trong WordPress với Accessibility Mode

Nếu không thể sử dụng chuột, bạn có thể sử dụng tiện ích màn hình bằng bàn phím

Trước tiên, hãy đặt màn hình vào Chế độ trợ năng bằng cách nhấp vào liên kết Bật chế độ trợ năng ở trên cùng bên phải của màn hình

Sau đó, màn hình sẽ thay đổi để hiển thị rằng bạn đang ở chế độ trợ năng

Sau đó, có thể điều hướng giữa các thành phần bằng phím Tab và nhấn Enter để chọn một mục. Bạn có thể chuyển tab tới một tiện ích, nhấn Quay lại trên liên kết Thêm, sau đó chọn nơi bạn muốn thêm hoặc nhấn tab vào tiện ích khu vực và nhấp vào liên kết Chỉnh sửa

Cách sử dụng WordPress Customizer để thêm widget là gì?

Use Customizer to add widget có nghĩa là bạn có thể tùy chỉnh widget trong WordPress. Điều này giúp bạn dễ dàng xem các widget trông giống như thế nào và di chuyển giữa các widget khu vực bạn muốn nếu muốn

Trong menu quản trị, nhấp vào Giao diện > Tùy chỉnh. Ngoài ra, từ thanh quản trị ở đầu màn hình trong trang web trực tiếp (giả sử bạn đã đăng nhập), chỉ cần nhấp vào Tùy chỉnh. Thao tác này sẽ mở Customizer.  

Hãy nhấp vào tùy chọn Tiện ích bạn sẽ thấy danh sách tất cả các tiện ích khu vực trong chủ đề của bạn. Truy cập mã widget khu vực bạn muốn thêm widget và nhấp vào nút Add widget

Thao tác này cung cấp cho bạn danh sách tất cả các tiện ích có sẵn cho trang web bao gồm tất cả các tiện ích tích hợp đi kèm với WordPress giống như bất kỳ tiện ích con nào được bổ sung thông qua các plugin

Chọn tiện ích bạn muốn thêm vào tiện ích khu vực và tiện ích đó sẽ xuất hiện trong màn hình xem trước ở bên phải

Bạn có thể sắp xếp lại thứ tự các widget bằng cách kéo chúng lên và xuống ở bên trái hoặc bằng cách nhấp vào liên kết Sắp xếp lại bên dưới danh sách các widget, sau đó nhấp vào mũi tên để di chuyển lên và xuống

Sau khi bạn hoàn tất, hãy thêm các tiện ích thông qua Tùy biến, đừng quên nhấp vào nút Xuất bản ở trên cùng bên trái để lưu các thay đổi đã được lưu. Nếu bạn rời khỏi mã Tùy biến không thực hiện thao tác này, các thay đổi sẽ không xuất hiện trên trang web.  

Sau khi thêm tiện ích, hãy xem và kiểm tra xem mức độ phù hợp với thiết kế web. Nếu bạn đã thêm quá nhiều widget, web có thể trông hơi lộn xộn. Lúc này, bạn cần phải xóa một số trong số chúng hoặc bạn có thể chuyển từ widget khu vực này sang widget khu vực khác

Việc này có thể dễ dàng thực hiện trong tiện ích màn hình, nơi bạn có thể kéo các tiện ích giữa các tiện ích khu vực

Cách thêm widget vào một trang cụ thể

Một số chủ đề bao gồm các widget khu vực chỉ dành cho các công cụ của trang, không giới hạn như trang chủ. Nhưng nếu bạn muốn thêm một widget vào một trang duy nhất trên trang web của mình thì sao?

Bạn có thể thực hiện thao tác này trong trình chỉnh sửa trang và đăng Gutenberg

Thêm một khối mới theo cách thông thường và sau đó chọn loại tiện ích chặn

Sau đó, bạn có thể chọn từ nhiều tiện ích đã bật cho trang web và thêm vào nội dung của bài đăng hoặc trang. Điều này hữu ích nếu bạn muốn thêm biểu mẫu tiện ích, tiện ích CTA hoặc danh sách các bài đăng mới nhất

Cách chỉnh sửa widget là gì?

Khi đã thêm widget vào trang web, bạn có thể thực hiện các thay đổi, chỉnh sửa widget trong WordPress. Các tiện ích con riêng lẻ sẽ có mã cài đặt mà bạn có thể truy cập thông qua màn hình tiện ích con hoặc Tùy biến.  

Một số tiện ích không bao gồm bất kỳ cài đặt nào, nhưng các tiện ích khác được cài đặt cho tiện ích tiêu đề đã được giới hạn như số lượng bài đăng được hiển thị. Một số phức tạp hơn và yêu cầu bạn thiết lập widget trong một trang cài đặt riêng. Vui lòng kiểm tra tài liệu từ nhà phát triển plugin bạn đang sử dụng

Các tùy chọn để chỉnh sửa tiện ích plugin con bao gồm

• Editing setting for plugin
• Di chuyển widget từ widget khu vực này sang widget vùng khác
• Xóa tiện ích. Có hai tùy chọn cho công việc này

Để chỉnh sửa cài đặt cho tiện ích con, hãy tìm tiện ích đó trong tiện ích màn hình hoặc tùy biến và chỉ cần chỉnh sửa bất kỳ tùy chọn nào được cung cấp

Để chuyển widget từ khu vực này sang khu vực khác, hãy mở màn hình widget và kéo widget từ widget khu vực này sang widget khu vực khác. Trong chế độ trợ năng, điều hướng đến mũi tên ở bên phải của tiện ích con và chọn từ các tùy chọn

Xóa tiện ích

Bên cạnh cách thêm widget cho WordPress thì cách xóa widget cũng được nhiều người quan tâm. Vậy cách xóa widget là gì?

Để xóa một tiện ích trong tiện ích màn hình, hãy tìm tiện ích đó và nhấp vào xóa ở dưới cùng bên trái của tiện ích đã cài đặt

Để xóa một widget trong Customizer, hãy tìm widget đó trong khu vực widget. Lướt vào mũi tên ở bên phải tên của tiện ích, sau đó nhấp vào Xóa ở dưới cùng bên trái của tiện ích đã cài đặt

Bạn cũng có thể xóa tiện ích khỏi vùng tiện ích nhưng vẫn giữ tiện ích đó để sử dụng sau khi thông qua màn hình tiện ích này

Cuộn xuống Widget không hoạt động ở cuối màn hình. Kéo tiện ích con đến khu vực này để xóa chúng khỏi con khu vực nhưng vẫn giữ nguyên dạng bản nháp khi cài đặt hiện tại. Sau đó, bạn có thể kéo chúng trở lại khu vực widget nếu muốn

Nếu bạn chuyển đổi chủ đề và chủ đề mới có các widget khu vực khác nhau, bất kỳ widget nào không phù hợp với các widget khu vực trong chủ đề mới sẽ tự động được WordPress chuyển sang danh sách Widget không hoạt động

Tạo Widget WordPress trong chủ đề chức năng tệp

Bước đầu tiên là thiết lập vùng widget bằng hàm register_widget()

Nếu bạn đang sử dụng chủ đề WordPress của bên thứ ba, bạn cần tạo một chủ đề con để thực hiện công việc này. Lý do là nếu bạn cập nhật chủ đề trong tương lai, tất cả các thay đổi sẽ là codet

Nếu bạn đang làm việc với chủ đề của riêng mình, bạn chỉ có thể cần chỉnh sửa chủ đề

Bắt đầu bằng cách mở tệp chức năng. php của chủ đề. Ở cuối tệp, hãy thêm mã này

function kinsta_register_widgets() {
 
 register_sidebar( array(
  'name' => __( 'After Content Widget Area', 'kinsta' ),
  'id' => 'after-content-widget-area',
  'description' => __( 'Widget area after the content', 'kinsta' ),
  'before_widget' => '
',
  'after_widget' => '
',
  'before_title' => '
',
  'after_title' => '
',

 ) );

}

add_action( 'widgets_init', 'kinsta_register_widgets' );

Bây giờ hãy lưu chức năng tệp. php. Nếu bạn đi tới màn hình widget hoặc Customizer, bạn sẽ thấy khu vực widget mới có sẵn để thêm widget

Nhưng nếu bạn thực hiện điều này, nó sẽ không thực sự hiển thị trên trang. Bạn có cần thêm một số mã vào tệp mẫu chủ đề của mình không

Thêm widget vào File Theme Template

Đầu tiên, cần tìm ra Mẫu chủ đề cần sử dụng. Nếu đang thêm một thanh bên bổ sung, bạn cần thêm mã này vào thanh bên của tệp. php

Nếu đang thêm tiện ích khu vực trước hoặc sau nội dung, bạn sẽ cần thêm khu vực đó vào bất kỳ chủ đề mẫu tệp nào đang có đầu ra định dạng nội dung

Nếu đang thêm tiện ích khu vực vào tiêu đề, bạn cần thêm mã vào tiêu đề tệp. php

Nếu khu vực widget mới chỉ dành cho một trang trong trang web hoặc cho một loại nội dung, bạn cần sử dụng hệ thống phân cấp mẫu WordPress để tìm ra mẫu chính xác nào cần sử dụng/tạo và sau đó chỉnh sửa tệp đó. Vì vậy, ví dụ. Bạn muốn thêm tiện ích khu vực vào trang chủ, bạn cần tạo tệp trang đầu. php and add khu vực widget vào đó

Khi đã xác định mẫu nào bạn cần chỉnh sửa và chính xác nơi bạn cần có mã cho khu vực widget, vui lòng thêm mã sau. Trong trường hợp vùng widget nằm sau nội dung, vui lòng thêm vào tệp bài đăng. php và trang. php trong chủ đề

if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>

 aside class="after-content widget-area full-width" role="complementary">
  
 

Lưu ý rằng mã của bạn có thể sẽ khác với mã của Vietnix tùy thuộc vào những gì bạn gọi là widget khu vực và những yếu tố bạn muốn đặt bên trong.  

Mách bạn. Nếu bạn chuyển phần cuối của vùng tử chứa nội dung sang phần đầu của thanh bên và / hoặc chân trang thì bạn có thể thêm phần này vào và chỉ cần thêm một lần

Nếu xem xét trang web, bạn sẽ thấy rằng bất kỳ widget nào được thêm vào các khu vực widget sẽ hiển thị ở đúng vị trí. Nếu chúng không ở đúng vị trí, hãy quay lại và chỉnh sửa mã tệp, đảm bảo mã ở đúng vị trí bạn muốn. Bạn cũng có thể cần phải chỉnh sửa CSS để có giao diện như mong muốn

Cách viết widget code bằng widget API

Bây giờ bạn đã biết cách chọn các widget cho trang web, cách thêm widget vào trang web và cách đăng ký các sidebar hoặc widget khu vực mới. Bước tiếp theo là tìm hiểu cách tạo widget WordPress

Đôi khi, bạn có thể thấy plugin không có sẵn để tạo widget chính xác bạn muốn trên trang web của mình. Điều đó có nghĩa là bạn sẽ phải tự mình viết mã

Trong ví dụ này, Vietnix sẽ hướng dẫn cách viết mã widget CTA đơn giản

Tổng quan về widget API

Widget API trong WordPress bao gồm tất cả các mã cần thiết để đăng ký, tạo và viết mã các widget. API widget bao gồm

• Các lớp dựng widget mới
• Widget chức năng đăng ký và khai thác trên trang web
• Chức năng hủy đăng ký widget, ví dụ như từ một chủ đề mẹ

Tại đây, Vietnix sẽ sử dụng một lớp để tạo widget con. Bước đầu tiên là tạo plugin để giữ widget

Tạo plugin cho widget WordPress

Để tạo tiện ích riêng, bạn cần viết mã plugin. Không thêm mã cho tiện ích mới vào chủ đề vì tiện ích đã về chức năng, không phải về hiển thị. Nếu bạn thay đổi chủ đề trong tương lai, bạn vẫn muốn có thể truy cập tiện ích con đó

Bắt đầu bằng cách tạo plugin trống. Tạo một thư mục plugin trong thư mục wp-content/plugins và thêm một tệp trống vào đó. Đặt cho nó một cái tên thích hợp. Mở tệp đó và thêm mã này

You will need to edit URI tác giả và URI plugin cho riêng mình. Thao tác đó sẽ tạo một plugin có thể kích hoạt thông qua màn hình Plugins

Nhưng nếu bạn kích hoạt nó, sẽ không có chuyện gì xảy ra. Bạn sẽ phải thêm một số mã vào plugin của mình

Create a layer for widget

Mã cho tiện ích đang ở bên trong một lớp. Vì vậy, cần thêm vào lớp tiếp theo

class kinsta_Cta_Widget extends WP_Widget {

}

Create function Constructor

Đầu tiên điều kiện để vào bên trong lớp là khởi động hàm để tạo widgetcon. Thêm mã này vào bên trong dấu trích dẫn của lớp

//widget constructor function

function __construct() {

 $widget_options = array (
  'classname' => 'kinsta_cta_widget',
  'description' => 'Add a call to action box with your own text and link.'
 );

 parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );

}

Lệnh bắt đầu xây dựng widget

Create form to export widget. Tiếp theo, chúng ta cần một biểu mẫu sẽ được sử dụng bởi màn hình Widget và Customizer để tạo widget. Add this code, still need to in quote.  

//function to output the widget form

function form( $instance ) {

 $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
 $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
 $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>


 Title:
 


 Text in the call to action box:
 


 Your link:
 

Lệnh này cung cấp cho người dùng một biểu mẫu mà họ có thể sử dụng để bổ sung văn bản và liên kết đến CTA

Tạo chức năng để lưu widget

Bây giờ bạn cần lưu bất cứ thứ gì đã nhập vào biểu mẫu đó. Vì vậy, chức năng tạo để lưu widget là gì?

________số 8

Thao tác này sẽ lưu dữ liệu do người dùng nhập vào tiện ích cài đặt

Create function to export widget

Bây giờ bạn cần thêm mã sẽ hiển thị widget trên trang web. Do đó, cách tạo chức năng để xuất widget là gì?

//function to display the widget in the site

function widget( $args, $instance ) {
 //define variables
 $title = apply_filters( 'widget_title', $instance['title'] );
 $text = $instance['text'];
 $link = $instance['link'];

 //output code
 echo $args['before_widget'];
 ?>

 

  ' . $text . '';
  ?>
 

 

Widget đăng ký

Bây giờ bạn đã viết được lớp, đã đến lúc đăng ký widget Wordpress để nó hoạt động. Vui lòng thêm mã này bên ngoài lớp.  

if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>
 

0

Now save file plugin. Đi đến màn hình widget và bạn sẽ thấy widget đang được sử dụng.  

Nếu thêm nó vào một tiện ích và thêm văn bản hoặc liên kết, nó sẽ được hiển thị trên trang web.  

Widget mới có thể không tốt lắm nên cần thêm một số CSS để tạo kiểu

Thêm CSS vào Widget

Để thêm CSS vào plugin, bạn cần tạo một biểu định kiểu và xếp nó vào hàng đợi trong plugin của mình. Thêm mã này vào tệp plugin trước lớp

if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>
 

1

Bây giờ bạn cần thêm kiểu tệp. css bên trong thư mục của plugin. Bạn có một nút CTA đơn giản mà bạn có thể thêm vào bất kỳ tiện ích khu vực nào trên trang web. Bạn có thể tạo các tiện ích phức tạp hơn với các tùy chọn và cài đặt bổ sung.  

Lời kết

Trên đây là những thông tin chia sẻ về vấn đề Widget là gì hay Widget là gì cũng như hướng dẫn cách tạo Widget WordPress. Hy vọng sẽ mang đến cho bạn những kiến ​​thức hữu ích. Nếu còn thắc mắc bất kỳ liên hệ nào đến vấn đề Widget là gì, vui lòng để lại bình luận bên dưới để được hỗ trợ. Chúc các bạn thành công

Chia sẻ bài viết

đánh giá

5/5 - (1 bình chọn)

nguyễn thanh trường

Conconnection with mình qua

Mình là Trường - hiện đang phụ trách một số mảng trong chiến lược Marketing của Vietnix và đặc biệt là SEO. Ngoài ra, mình còn thích sử dụng WordPress để xây dựng trang web trong nhiều năm qua. Mình mong muốn có thể sử dụng trải nghiệm thực tế khi làm việc tại Vietnix để thu lại những chia sẻ hữu ích cho các bạn