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' ] ] { ?>

 
  
 



 
  
 

Chủ Đề