Làm cách nào để tạo tiện ích hình ảnh tùy chỉnh trong WordPress?

Widget WordPress cực kỳ hữu ích. Chúng cho phép bạn thêm tất cả các loại nội dung bổ sung vào trang web của mình bên ngoài nội dung của bài đăng hoặc trang, khuyến khích người dùng lấy thông tin, theo liên kết hoặc thực hiện hành động

Trong bài đăng này, tôi sẽ chỉ cho bạn mọi thứ bạn cần biết về các widget WordPress. Cách thêm chúng vào trang web của bạn, cách tạo các khu vực tiện ích để đưa chúng vào, cách cài đặt các plugin cung cấp cho bạn nhiều tiện ích hơn, cách viết mã các tiện ích của riêng bạn, v.v.

Trước tiên, hãy bắt đầu bằng cách xác định widget WordPress là gì

Widget WordPress là gì?

Trong WordPress, widget là những đoạn nội dung nằm ngoài dòng chảy của trang hoặc nội dung đăng

Các widget 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 tiện ích con sẽ được hiển thị trên mọi trang trong trang web, nhưng bạn cũng có thể đăng ký các khu vực tiện ích con cho các trang cụ thể, chẳng hạn như trang chủ

Để thêm tiện ích vào trang web của bạn, bạn cần thêm tiện ích đó vào khu vực tiện ích. Các khu vực widget được tạo theo chủ đề của bạn vì chúng liên quan đến thiết kế và bố cục của trang web của bạn chứ không liên quan đến chức năng

Hầu hết các chủ đề WordPress đều có khu vực tiện ích ở thanh bên và chân trang, mặc dù một số sẽ có nhiều khu vực tiện ích ở nhiều nơi, chẳng hạn như bên dưới hoặc bên trên nội dung hoặc trong tiêu đề

Cần phải hét lên ở đây. Kinsta thật tuyệt vời, tôi sử dụng nó cho trang web cá nhân của mình. Hỗ trợ nhanh chóng và xuất sắc, và máy chủ của họ là nhanh nhất cho WordPress

Phillip Stemann

Xem kế hoạch

Ảnh chụp màn hình bên dưới, của một trong những trang web của riêng tôi, hiển thị các tiện ích ở thanh bên và chân trang

Khu vực widget trong trang web của tôi

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

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

Khi nào nên sử dụng tiện ích WordPress

Bạn nên sử dụng tiện ích bất cứ 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 của mình (và khi tôi nói trang, tôi bao gồm các bài đăng, lưu trữ, v.v. ), nhưng đó không phải là một phần nội dung của trang đó. Chúng đặc biệt hữu ích cho nội dung bạn muố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 của bạn, giỏ hàng hoặc nút kêu gọi hành động

Hãy suy nghĩ xem có bao nhiêu người dùng sẽ cần quyền truy cập vào mỗi tiện ích và tầm quan trọng của nó khi bạn quyết định nơi đặt tiện ích đó. Các tiện ích trong thanh bên sẽ nổi bật hơn so với các tiện ích ở chân trang, điều mà một số người dùng thậm chí có thể không nhìn thấy

Vì vậy, tiện ích bài đăng mới nhất hoặc tiện ích gọi hành động có thể tốt hơn ở thanh bên, nơi mọi người có nhiều cơ hội tương tác với chúng hơn, trong khi nguồn cấp dữ liệu truyền thông xã hội có thể nằm ở chân trang

Nếu chủ đề của bạn cũng có các khu vực tiện ích con đặc biệt cho trang chủ, thì bạn có thể muốn sử dụng các khu vực này để điều hướng xung quanh các phòng ban của trang web, danh sách nội dung có liên quan hoặc phương tiện, chẳng hạn như video chào mừng mọi người đến với trang web

11 Ví dụ về Widget trong WordPress

Cách tốt nhất để hiểu các khả năng được cung cấp bởi các tiện ích WordPress là xem một số ví dụ về chúng. Chúng ta hãy xem mười một loại tiện ích bạn sẽ thường thấy trên các trang web WordPress

1. Tiện ích bài đăng gần đây

Tiện ích Bài đăng gần đây có thể là tiện ích được sử dụng phổ biến nhất trong blog

Nó cho phép bạn hiển thị danh sách các bài đăng gần đây nhất của mình trong thanh bên hoặc chân trang của mọi trang trên trang web của bạn, tăng khả năng mọi người sẽ duyệt trang web và đọc một số bài đăng

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

Tiện ích bài viết gần đây

Nếu bạn muốn thêm chức năng bổ sung, bạn có thể cài đặt plugin cho một tiện ích thay thế như Bài đăng phổ biến của WordPress, hiển thị nội dung phổ biến nhất. Ngoài ra, tiện ích Bài đăng ngẫu nhiên nâng cao làm mới mỗi khi người dùng truy cập màn hình mới

2. Tiện ích nhận xét gần đây

Bạn muốn cho khách truy cập thấy trang web của bạn sôi động như thế nào và mức độ khán giả của bạn tương tác với nội dung của bạn?

Tiện ích Nhận xét gần đây hiển thị các nhận xét mới nhất trên trang web của bạn, 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 thảo luận

Tiện ích Nhận xét gần đây

Tiện ích Nhận xét gần đây đi kèm với WordPress. Xin nhắc lại, nếu muốn thêm chức năng bổ sung, bạn có thể cài đặt plugin nhận xét của bên thứ ba, chẳng hạn như tiện ích Nhận xét xã hội WP cho phép mọi người nhận xét bằng tài khoản Facebook của họ. tốt cho sự tham gia của phương tiện truyền thông xã hội

3. Tiện ích gọi hành động

Công dụng tuyệt vời của tiện ích là khuyến khích mọi người hành động và bạn có thể thực hiện việc này bằng tiện ích gọi hành động

Tiện ích của bạn có thể là một nút đơn giản hoặc bạn có thể tạo thứ gì đó riêng biệt hơn bằng cách sử dụng tiện ích văn bản hoặc tiện ích HTML hoặc thậm chí là tiện ích hình ảnh, tất cả đều được cài đặt sẵn với WordPress

Trên một trong những trang web của riêng tôi, tôi đã tạo một tiện ích kêu gọi hành động khuyến khích mọi người đăng ký vào danh sách gửi thư của tôi. Điều này sử dụng tiện ích HTML tích hợp trong đó tôi đã bao gồm một hình ảnh, một số văn bản và một nút mà tôi đã mã hóa bằng HTML

Tiện ích Gọi hành động trên trang web của tôi

4. Tiện ích điều hướng

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 vài lựa chọn cho việc này. tiện ích Danh mục hoặc Thẻ đám mây và tiện ích Menu Điều hướng

Tiện ích Menu điều hướng cho phép bạn tạo menu điều hướng tùy chỉnh cũng như menu điều hướng chính trong trang web của mình, sau đó thêm menu đó vào một khu vực tiện ích

Bạn thậm chí có thể thêm menu điều hướng chính của mình vào khu vực tiện ích, mặc dù điều này sẽ chỉ hoạt động nếu bạn có một menu điều hướng nhỏ

Tiện ích Menu điều hướng

Việc thêm menu điều hướng vào chân trang web của bạn sẽ khuyến khích mọi người đi đến cuối bài đăng để điều hướng xung quanh trang web của bạn. Nó đặc biệt hữu ích cho người dùng 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 đến cuối bài đăng

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

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

Thêm phương tiện vào thanh bên hoặc chân trang của bạn sẽ làm cho trang web của bạn trở nên sống động và cung cấp cho người dùng thứ gì đó để xem hoặc tương tác

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

Tiện ích hình ảnh

Ngoài ra, tiện ích Video cho phép bạn truyền phát video từ YouTube hoặc Vimeo ngay vào khu vực tiện ích trên trang web của bạn. Điều này đặc biệt hữu ích nếu trang web của bạn có các khu vực tiện ích đặc biệt cho trang chủ, nhưng cũng có thể hữu ích ở phần chân trang như một cách để thu hút sự chú ý của mọi người khi họ xem đế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 cấp 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 thấy rằng bạn đang hoạt động trên mạng xã hội và khuyến khích họ thích hoặc theo dõi bạn

Một cách để có quyền truy cập vào các tiện ích truyền thông xã hội cho các nền tảng lớn nhất (Facebook, Twitter, Instagram) là cài đặt plugin Jetpack, bao gồm tất cả những tiện ích này và nhiều tiện ích khác

plugin jetpack

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

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

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

Tiện ích giỏ hàng

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

Các plugin thương mại điện tử như WooC Commerce bao gồm các tiện ích giỏ 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 của mình, bạn sẽ thấy chúng được thêm vào màn hình Tiện ích của mình

8. Tiện ích biểu mẫu

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ý vào danh sách gửi thư, bạn có thể thêm một biểu mẫu vào thanh bên của mình

Không có tiện ích biểu mẫu đi kèm với WordPress nhưng bạn có thể thêm plugin để cung cấp chúng, chẳng hạn như Biểu mẫu liên hệ 7 miễn phí hoặc Biểu mẫu trọng lực cao cấp nhưng rất mạnh mẽ

9. Tiện ích bản đồ

Nếu doanh nghiệp của bạn có trụ sở tại một địa điểm thực tế và bạn muốn mọi người có thể dễ dàng tìm thấy bạn, thì việc thêm tiện ích bản đồ vào trang web của bạn sẽ giúp ích

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

Plugin WP Google Maps

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

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

Nếu bạn đang điều hành một trang web thành viên, tiện ích đăng nhập sẽ giúp mọi người dễ dàng đăng nhập vào trang web của bạn mà không cần phải truy cập trang đăng nhập riêng

Tiện ích 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 thứ khác mà bạn có thể không muốn, vì vậy tôi khuyên bạn nên sử dụng một plugin riêng cho điều này từ thư mục plugin

Tiện ích Đăng nhập bằng Ajax cung cấp cho bạn một biểu mẫu đăng nhập trong tiện ích của bạn, nghĩa là mọi người có thể đăng nhập vào trang web của bạn từ bất kỳ trang nào

Đăng nhập bằng tiện ích plugin Ajax

11. Tiện ích tìm kiếm

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

tiện ích tìm kiếm

Thêm phần này vào thanh bên hoặc tiêu đề của bạn và bạn giúp mọi người tìm thấy mọi thứ trên trang web của bạn dễ dàng hơn

Nếu bạn muốn tăng sức mạnh cho tiện ích tìm kiếm của mình, bạn có thể cài đặt tiện ích WP Google Search miễn phí, sử dụng tìm kiếm của Google

Cách thêm tiện ích vào trang web WordPress của bạn

Khi bạn đã quyết định loại tiện ích nào bạn cần cho trang web WordPress của mình, đã đến lúc cài đặt chúng

Đừng bị cám dỗ để thêm quá nhiều. Càng có nhiều, người dùng càng ít chú ý đến chúng. Thay vào đó, hãy tập trung vào hai hoặc ba tiện ích chính cho thanh bên. Bạn có thể thêm nhiều hơn vào chân trang, nơi chúng ít quan trọng hơn

Và nếu bạn có bất kỳ khu vực tiện ích bổ sung nào trong chủ đề của mình, hãy quyết định sẽ đặt tiện ích con nào vào các khu vực đó. Đảm bảo rằng chúng phù hợp với bố cục và thiết kế của trang web của bạn

Có ba cách để thêm widget

• Sử dụng các tiện ích đã đi kèm với WordPress
• Thêm tiện ích của bên thứ ba từ thư mục plugin
• Mua một plugin cao cấp bao gồm một widget

Tìm Widget cho trang web WordPress của bạn

Có rất nhiều widget có sẵn, vì vậy có thể khó chọn cái nào để cài đặt. Hãy xem xét các tùy chọn và sau đó xem xét cách bạn có thể chọn tùy chọn tốt nhất cho mình

Widget đi kèm với WordPress

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

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

Các vật dụng được cài đặt sẵn là

• lưu trữ. liên kết đến kho lưu trữ theo tháng, được thiết kế cho blog nhưng khá lỗi thời
• Lịch. lịch các bài đăng của bạn, một lần nữa phù hợp với blog, đặc biệt nếu blog của bạn nhạy cảm với thời gian (nhưng ngày nay không phổ biến lắm)
• 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ư các biểu mẫu của Google). Tránh nếu bạn không thoải mái với mã hóa
• Hình ảnh. hiển thị hình ảnh từ thư viện phương tiện của bạn
• Chức năng điều hướng. hiển thị menu điều hướng chính hoặc menu riêng do bạn tạo
• Những ý kiến ​​gần đây. một danh sách các bình luận gần đây với các liên kết đến chúng
• Thẻ đám mây. một 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 đoạn âm thanh khác (được đề xuất. Cách bắt đầu một podcast bằng WordPress)
• Thể loại. một danh sách các danh mục trong blog của bạn, 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 tiện ích hình ảnh, hiển thị bộ sưu tập hình ảnh
• meta. siêu dữ liệu như liên kết đăng nhập và nguồn cấp dữ liệu RSS. Cảm giác nôn nao từ những ngày đầu của WordPress và bây giờ không hữu ích lắm
• trang. hiển thị danh sách các trang trên trang web của bạn có liên kết
• Bài viết 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 chúng
• Tìm kiếm. hộp tìm kiếm đơn giản
• Chữ. bất kỳ văn bản nào bạn muốn thêm, chẳng hạn như thông tin về trang web

Thêm Widget bằng Plugin

Thư mục plugin WordPress có hàng nghìn plugin widget miễn phí sẽ cung cấp cho bạn nhiều widget hơn để lựa chọn

Ngoài ra, rất nhiều plugin khác cũng bao gồm các tiện ích, chẳng hạn như plugin thương mại điện tử cung cấp cho bạn tiện ích giỏ hàng, v.v.

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

Cách tìm Widget phù hợp cho trang web của bạn

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

1. 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?
2. Kiểm tra các tiện ích tích hợp để xem có tiện ích nào đáp ứng nhu cầu của bạn không. Kiểm tra bất kỳ cái nào có liên quan, nếu bạn tìm thấy một cái phù hợp, điều đó thật tuyệt. Nếu không…
3. Kiểm tra thư mục plugin mà bạn có thể truy cập qua Plugins > Add New. Hãy thử tìm kiếm nhiều cụm từ để tìm plugin phù hợp với bạn và tìm kiếm có và không có từ ‘widget’. Đôi khi, một plugin không tập trung vào các tiện ích sẽ bao gồm một tiện ích như một phần của bộ tính năng rộng hơn
4. Nếu bạn không thể tìm thấy plugin nào phù hợp trong số các plugin miễn phí, hãy tìm plugin cao cấp. Hỏi những người dùng WordPress khác để biết các đề xuất và xem các bài đánh giá trước khi chọn một

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

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

Bây giờ bạn đã chọn tiện ích của mình, đã đến lúc thêm tiện ích đó vào trang web của bạn

Bạn có thể thêm tiện ích con vào bất kỳ khu vực tiện ích con đang hoạt động nào do chủ đề của bạn cung cấp. Nếu chủ đề của bạn không có khu vực tiện ích ở 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, tôi sẽ chỉ cho bạn cách mã hóa khu vực tiện ích con của riêng bạn

Có hai cách để thêm tiện ích vào trang web của bạn

• Bằng cách sử dụng Tùy biến. Vào 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ị Widgets. Vào Giao diện > Tiện ích trong menu quản trị hoặc từ thanh quản trị, nhấp vào Tùy chỉnh > Tiện ích

Widget trong Customizer

Tôi sẽ chỉ cho bạn cách sử dụng cả hai phương pháp này trong thời gian ngắn nhưng trước tiên, hãy xem xét các khu vực tiện ích con và lý do tại sao bạn có được những phương pháp 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 chủ đề WordPress của bạn, bạn có thể thấy mình có các khu vực tiện ích ở nhiều nơi

Hầu hết các chủ đề đều có các khu vực tiện ích ở thanh bên và chân trang. Nhưng một số cũng có chúng ở những nơi khác, như bên dưới hoặc bên trên nội dung hoặc trong tiêu đề

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

Tôi sử dụng một chủ đề có nhiều khu vực widget ở nhiều nơi. Bạn có thể thấy trong ảnh chụp màn hình bên dưới có các khu vực tiện ích bên trên và bên dưới nội dung, trong tiêu đề, bên dưới chân trang chính

Màn hình cài đặt widget, khu vực widget

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

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

Thanh tìm kiếm trong tiêu đề

Khu vực widget và chủ đề

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

Tại đây, bạn có thể thấy mã mà tôi đã sử dụng trong tệp chức năng chủ đề của mình để thêm khu vực tiện ích sẽ 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à mã trong tiêu đề của tôi. tệp php thêm khu vực widget đó vào đúng vị trí trong chủ đề

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

 

Nếu bạn muốn thêm các khu vực widget bổ sung trong chủ đề của mình, bạn cần thêm cùng một loại mã. Tôi sẽ chỉ cho bạn cách làm điều này sau trong bài viết này

Đừng quên rằng nếu chủ đề của bạn không có nhiều khu vực tiện ích như bạn muốn, bạn luôn có thể thực hiện một trong hai điều sau

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

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

Đăng kí để nhận thư mới

Bạn muốn biết làm thế nào chúng tôi tăng lưu lượng truy cập của mình hơn 1000%?

Tham gia cùng hơn 20.000 người khác nhận bản tin hàng tuần của chúng tôi với các mẹo nội bộ về WordPress

Theo dõi ngay

Cách sử dụng Màn hình Widget để thêm Widget

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

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

màn hình widget

Để thêm một tiện ích, bạn có thể thực hiện một trong hai điều sau

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

Chọn khu vực widget và widget

Sau đó, bạn có thể cần chỉnh sửa vị trí của tiện ích trong khu vực tiện ích

Bạn có thể thêm bao nhiêu tiện ích tùy thích vào từng khu vực tiện ích, nhưng đừng quá nhiệt tình. Bạn có thể kéo chúng xung quanh bên trong khu vực tiện ích để sắp xếp chúng theo đúng thứ tự. Bạn cũng có thể kéo chúng từ khu vực tiện ích này sang khu vực tiện ích khác nếu bạn quyết định 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 màn hình Tiện ích, vì vậy nếu bạn không có quyền truy cập vào chuột, bạn vẫn có thể thêm tiện ích

Thêm và chỉnh sửa tiện ích trong Chế độ trợ năng

Nếu không dùng được chuột, bạn có thể dùng màn hình Widget bằng bàn phím

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

Liên kết chế độ trợ năng

Sau đó, màn hình sẽ thay đổi để phản ánh thực tế là bạn đang ở chế độ trợ năng

Chế độ truy cập màn hình widget

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

Cách sử dụng Trình tùy chỉnh WordPress để thêm tiện ích

Sử dụng Công cụ tùy chỉnh để thêm tiện ích thay vì màn hình tiện ích có nghĩa là bạn có thể thấy các tiện ích của mình khi thêm chúng. Điều này giúp dễ dàng xem các tiện ích của bạn sẽ trông như thế nào và di chuyển chúng giữa các khu vực tiện ích nếu bạn 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ở Trình tùy chỉnh

thanh quản trị WordPress

Bây giờ hãy nhấp vào tùy chọn Tiện ích và bạn sẽ thấy danh sách tất cả các khu vực tiện ích trong chủ đề của mình. Nhấp vào khu vực tiện ích nơi bạn muốn thêm tiện ích và nhấp vào nút Thêm tiện ích

Điều này cung cấp cho bạn một danh sách tất cả các vật dụng có sẵn cho trang web của bạn. Điều đó sẽ bao gồm tất cả các tiện ích tích hợp đi kèm với WordPress cộng với bất kỳ tiện ích nào bạn đã thêm thông qua plugin

Thêm nút tiện ích

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

Bạn có thể sắp xếp lại các tiện ích bằng cách kéo chúng lên và xuống ở phía 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 tiện ích rồi nhấp vào mũi tên để di chuyển chúng lên và xuống

Chỉnh sửa widget trong Customizer

Sau khi bạn hoàn thành việc thêm các tiện ích 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 để các thay đổi của bạn được lưu lại. Nếu bạn rời khỏi Công cụ tùy chỉnh mà không làm điều này, thì không có thay đổi nào của bạn sẽ được phản ánh trên trang web trực tiếp

Khi bạn đã thêm các tiện ích của mình, vui lòng xem chúng và kiểm tra xem chúng phù hợp như thế nào với thiết kế trang của bạn. Nếu bạn đã thêm quá nhiều khu vực tiện ích, mọi thứ có thể trông hơi lộn xộn. Bạn sẽ cần xóa một số trong số chúng hoặc bạn có thể di chuyển chúng từ khu vực tiện ích này sang khu vực tiện ích khác

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

Cách thêm tiện ích vào một trang cụ thể

Một số chủ đề bao gồm các khu vực tiện ích chỉ dành cho các trang cụ thể, chẳng hạn như trang chủ. Nhưng nếu bạn muốn thêm tiện ích con vào chỉ một trang trên trang web của mình thì sao?

Bạn có thể làm điều này trong trình chỉnh sửa trang và bài đăng Gutenberg

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

Loại khối tiện ích

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

Cách chỉnh sửa tiện ích

Khi bạn đã thêm các tiện ích vào trang web của mình, bạn có thể thay đổi chúng. Các tiện ích riêng lẻ sẽ có các cài đặt mà bạn có thể truy cập qua màn hình Tiện ích hoặc Trình tùy chỉnh (không quan trọng bạn đã sử dụng cài đặt nào trong số này để thêm tiện ích. )

Một số tiện ích không bao gồm bất kỳ cài đặt nào, nhưng những tiện ích khác có cài đặt cho tiêu đề tiện ích chẳng hạn hoặc 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 tiện ích trong trang cài đặt riêng. Kiểm tra tài liệu từ nhà phát triển plugin của bạn

Các tùy chọn bạn có để chỉnh sửa tiện ích bổ sung bao gồm

• Chỉnh sửa cài đặt cho plugin
• Di chuyển tiện ích từ khu vực tiện ích này sang khu vực tiện ích khác
• Đang xóa tiện ích. Bạn có hai lựa chọn cho việc này, chúng sẽ sớm được xem xét

Để chỉnh sửa cài đặt cho tiện ích, hãy tìm tiện ích đó trong màn hình tiện ích 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

Cần một dịch vụ lưu trữ cực nhanh, an toàn và thân thiện với nhà phát triển cho các trang web khách hàng của bạn? . Kiểm tra kế hoạch của chúng tôi

Chỉnh sửa tùy chọn widget

Để di 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 nó từ khu vực widget này sang khu vực widget khác. Ở chế độ trợ năng, điều hướng đến mũi tên ở bên phải của tiện ích và chọn từ các tùy chọn

Xóa tiện ích

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

Xóa widget trong màn hình widget

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

Xóa widget trong Customizer

Bạn cũng có thể xóa một tiện ích khỏi khu vực tiện ích nhưng vẫn cung cấp tiện ích đó để sử dụng sau này thông qua màn hình Tiện ích

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

Nếu bạn chuyển đổi chủ đề và chủ đề mới của bạn có các khu vực tiện ích khác nhau, bất kỳ tiện ích nào không vừa với các khu vực tiện ích trong chủ đề mới sẽ tự động được chuyển sang danh sách Tiện ích không hoạt động của WordPress

Cách thêm khu vực widget mới vào chủ đề của bạn

Nếu chủ đề của bạn không có khu vực tiện ích mà bạn muốn, bạn luôn có thể thêm khu vực tiện ích của riêng mình. Bạn làm điều này bằng cách thêm hai đoạn mã

Hãy thêm một khu vực tiện ích bên dưới nội dung

Tạo khu vực widget trong tệp chức năng chủ đề của bạn

Bước đầu tiên là thiết lập khu vực tiện ích con bằng chức năng 

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

 

2

Nếu bạn đang sử dụng chủ đề WordPress của bên thứ ba (đây là tuyển tập những chủ đề tốt nhất), bạn cần tạo một chủ đề con để thực hiện 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 của bạn sẽ bị mất

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

Bắt đầu bằng cách mở các chức năng của chủ đề của bạn. tập tin php. Ở dưới cùng của tập tin, 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ờ lưu chức năng của bạn. tập tin php. Nếu bạn đi tới màn hình Tiện ích hoặc Trình tùy chỉnh, bạn sẽ thấy khu vực tiện ích mới có sẵn để bạn thêm tiện ích

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

Thêm tiện ích vào tệp mẫu chủ đề

Điều đầu tiên là tìm ra tệp mẫu chủ đề nào bạn cần sử dụng

• Nếu bạn đang thêm một thanh bên bổ sung, thì bạn sẽ cần thêm mã này vào thanh bên của mình. tập tin php
• Nếu bạn đang thêm khu vực tiện ích của mình trước hoặc sau nội dung, thì bạn sẽ cần thêm nó vào bất kỳ tệp mẫu chủ đề nào đang xuất nội dung
• Nếu bạn đang thêm khu vực tiện ích con vào tiêu đề của mình, bạn sẽ cần thêm mã vào tiêu đề của mình. tập tin php
• Nếu khu vực tiện ích con mới của bạn chỉ dành cho một trang trong trang web của bạn hoặc cho một loại nội dung, thì bạn sẽ cần sử dụng hệ thống phân cấp mẫu WordPress để tìm ra chính xác tệp mẫu nào bạn cần sử dụng/tạo và sau đó chỉnh sửa nó. Vì vậy, ví dụ: bạn muốn thêm các khu vực tiện ích vào trang chủ của mình, bạn sẽ cần tạo một trang chủ. php và thêm khu vực widget của bạn vào đó

Khi bạn đã xác định được tệp 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 tiện ích, hãy thêm mã sau. Trong trường hợp khu vực widget sau nội dung, chúng tôi thêm nó vào bài đăng. php và trang. tập tin php trong chủ đề của chúng tôi

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

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

Bây giờ hãy lưu (các) tệp mẫu của bạn

Lưu ý rằng mã của bạn sẽ khác với mã của tôi tùy thuộc vào những gì bạn đã gọi là khu vực tiện ích của mình và những yếu tố nào bạn muốn đặt nó bên trong. Tôi thường sử dụng một phần tử bên cạnh vì theo suy nghĩ của tôi, chúng được thiết kế cho các thanh bên và khu vực tiện ích

mẹo ninja. Nếu bạn di chuyển phần cuối của phần tử chứa nội dung đến phần đầu của thanh bên và/hoặc tệp chân trang, thì bạn có thể thêm phần này vào đó và bạn chỉ cần thêm một lần

Bây giờ, nếu bạn xem trang web của mình, bạn sẽ thấy rằng mọi tiện ích bạn đã thêm vào khu vực tiện ích của mình sẽ hiển thị ở đúng nơi. Nếu chúng không ở đúng vị trí, hãy quay lại và chỉnh sửa các tệp mẫu của bạn, đảm bảo mã nằm ở vị trí bạn muốn. Bạn cũng có thể cần chỉnh sửa CSS của mình để có được giao diện theo cách bạn muốn

Widget trên trang web trực tiếp

Cách viết mã Widget bằng API Widget

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

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

Trong ví dụ này, tôi sẽ chỉ cho bạn cách viết mã một tiện ích kêu gọi hành động thực sự đơn giản

Tổng quan về Widget API

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

• Các lớp để xây dựng các vật dụng mới
• Chức năng đăng ký widget và triển khai chúng trên trang web của bạn
• Các chức năng hủy đăng ký tiện ích con, chẳng hạn như từ chủ đề gốc

Ở đây chúng ta sẽ sử dụng một lớp để xây dựng một widget. Bước đầu tiên là tạo một plugin để giữ widget

Tạo một Plugin cho Widget WordPress của bạn

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

Bắt đầu bằng cách tạo một plugin trống. Tạo một thư mục plugin trong thư mục

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

 

3 của bạn 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

Bạn sẽ cần chỉnh sửa URI tác giả và URI plugin thành của riêng bạn. Điều đó sẽ tạo một plugin cho bạn mà bạn có thể kích hoạt qua màn hình Plugins

Plugin widget trong màn hình plugin

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

Tạo một lớp cho Widget

Mã cho tiện ích nằm bên trong một lớp. Vì vậy, hãy thêm điều đó tiếp theo

class kinsta_Cta_Widget extends WP_Widget {

}

Tạo hàm xây dựng

Điều đầu tiên vào bên trong lớp là hàm tạo để tạo widget. Thêm phần này bên trong dấu ngoặc nhọn của lớp

________số 8

Điều này bắt đầu để xây dựng widget

Tạo Form để Xuất 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 Tiện ích và Trình tùy chỉnh để tạo tiện ích. Thêm cái này, vẫn còn bên trong niềng răng

//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:
 

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

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

Bây giờ bạn cần lưu bất kỳ thứ gì được nhập vào biểu mẫu đó. Thêm điều này

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

 

0

Điều này sẽ lưu dữ liệu đầu vào của người dùng vào cài đặt tiện ích

Tạo chức năng để xuất Widget

Bây giờ bạn cần thêm mã sẽ hiển thị tiện ích trên trang web. Một lần nữa, thêm cái này vào bên trong dấu ngoặc nhọn

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

 

1

Đăng ký tiện ích

Bây giờ bạn đã viết xong lớp của mình, đã đến lúc đăng ký tiện ích WordPress để nó hoạt động. Thêm mã này bên ngoài lớp học

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

 

0

Bây giờ hãy lưu tệp plugin của bạn. Chuyển đến màn hình Tiện ích và bạn sẽ thấy tiện ích để sử dụng

Widget mới trong màn hình widget

Nếu bạn thêm nó vào một khu vực widget và thêm văn bản và liên kết đến nó, nó sẽ được xuất ra trên trang web trực tiếp

Tiện ích mới trong trang web trực tiếp

Nó có thể trông không tốt lắm ngay bây giờ. Bạn cần thêm một số CSS để tạo kiểu cho nó

Thêm CSS vào Widget

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

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

 

1

Bây giờ bạn cần thêm một phong cách. css bên trong thư mục của plugin và thêm bất kỳ kiểu dáng nào vào đó. Tôi sẽ để lại cho bạn

Bây giờ bạn có một nút kêu gọi hành động đơn giản mà bạn có thể thêm vào bất kỳ khu vực widget nào trên trang web của mình. Ví dụ: nếu bạn thêm nó vào thanh bên của mình, mọi người sẽ có thể sử dụng nó để truy cập trang đăng ký của bạn từ bất kỳ đâu 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 cài đặt và tùy chọn bổ sung, nhưng điều này sẽ cho bạn ý tưởng về cách bắt đầu tạo tiện ích của riêng mình

Nếu bạn muốn xem mã của tôi cho plugin này, bao gồm cả kiểu dáng, bạn có thể tìm thấy nó trên Github. Nếu bạn đang bắt đầu viết mã, đây là hướng dẫn chuyên sâu về git so với GitHub và cách bắt đầu với cả hai

Widget là một trong những tính năng tốt nhất của WordPress. Họ có thể thay đổi trang web của bạn từ 'meh' thành 'yes' theo đúng nghĩa đen. ' 🤔😻 Tìm hiểu chúng là gì, cách sử dụng chúng và cách viết mã cho các vật dụng của riêng bạn với hướng dẫn chuyên sâu này. Nhấp để Tweet

Tóm lược

Widget là một trong những tính năng yêu thích của tôi về WordPress. Họ có thể làm cho trang web của bạn trở nên sống động và giúp bạn nhận được nhiều lượt đăng ký hơn hoặc chuyển đổi nhiều khách truy cập hơn thành khách hàng. Bạn có thể thêm các tiện ích WordPress vào bất kỳ khu vực tiện ích hiện có nào trong chủ đề của mình hoặc bạn có thể thêm các khu vực tiện ích bổ sung để bạn có thể thêm nhiều tiện ích hơn ở nhiều nơi hơn

Ngoài ra còn có rất nhiều nơi để tìm vật dụng. WordPress đi kèm với một số chúng được cài đặt sẵn và bạn cũng có thể cài đặt thêm chúng thông qua plugin. Nhưng đó không phải là tất cả, nếu bạn cảm thấy thoải mái, bạn cũng có thể viết mã cho các widget của riêng mình bằng API Widgets

Bây giờ đến lượt của bạn. làm thế nào để bạn sử dụng các tiện ích WordPress trên trang web của mình?

---

Nhận tất cả các ứng dụng, cơ sở dữ liệu và trang web WordPress của bạn trực tuyến và dưới một mái nhà. Nền tảng đám mây hiệu suất cao, đầy đủ tính năng của chúng tôi bao gồm

• Dễ dàng thiết lập và quản lý trong bảng điều khiển MyKinsta
• Hỗ trợ chuyên gia 24/7
• Mạng và phần cứng Google Cloud Platform tốt nhất, được cung cấp bởi Kubernetes để có khả năng mở rộng tối đa
• Tích hợp Cloudflare cấp doanh nghiệp cho tốc độ và bảo mật
• Tiếp cận đối tượng toàn cầu với tối đa 35 trung tâm dữ liệu và hơn 275 PoP trên toàn thế giới

Hãy tự kiểm tra với $20 trong tháng đầu tiên của Lưu trữ ứng dụng hoặc Lưu trữ cơ sở dữ liệu. Khám phá kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm thấy sự phù hợp nhất của bạn