HomeWebsitePluginsCách thêm Chú...

Cách thêm Chú giải công cụ WordPress (2 cách: Plugin hoặc CSS miễn phí)


Có những lúc bạn cần cung cấp cho người dùng trang web của mình nhiều thông tin hơn, nhưng đơn giản là không có đủ trang bất động sản. Bạn luôn có thể bao gồm các liên kết đến các trang khác, nhưng trong nhiều trường hợp, cách thuận tiện nhất là thêm chú giải công cụ WordPress đơn giản hiển thị tất cả thông tin người dùng cần.

Với chú giải công cụ WordPress, còn được gọi là chú giải công cụ di chuột CSS, tất cả thông tin mà khách truy cập cần đều có ngay tại đó bằng cách ‘di chuột qua’ phần tử phù hợp.

Trong bài viết này, chúng tôi sẽ cho bạn thấy một số ví dụ yêu thích của chúng tôi về các chú giải công cụ CSS hover đang hoạt động. Sau đó, chúng tôi sẽ hướng dẫn bạn cách thêm chúng vào trang web của bạn có và không có plugin.

Nào cùng đào vào bên trong!

Giới thiệu về CSS hover tooltips

Khái niệm về chú giải công cụ WordPress rất đơn giản. Chúng là các vùng chứa nổi ‘bật lên’ khi bạn di chuột qua các phần tử cụ thể.

Hai ví dụ về chú giải công cụ hoạt hình.

Thông thường, chú giải công cụ di chuột cung cấp thông tin bổ sung mà bạn không muốn đưa vào thiết kế ban đầu.

Ví dụ: nếu bạn đang xây dựng bảng giá, chú giải công cụ có thể giúp bạn chia nhỏ chức năng của từng tính năng mà không cần làm phức tạp thiết kế:

Một ví dụ về bảng bao gồm chú giải công cụ di chuột CSS.

Các trường hợp sử dụng khác bao gồm định nghĩa từ, thêm nguồn vào nội dung của bạn, nhận xét biên tập, bản đồ và gần như bất kỳ yếu tố nào khác mà bạn có thể nghĩ đến.

Một bản đồ bao gồm một chú giải công cụ.

Hai cách để thêm chú giải công cụ WordPress

WordPress cho phép bạn sử dụng nhiều cách tiếp cận khi thêm chú giải công cụ vào trang web của mình. Bạn có thể làm như vậy theo cách thủ công (bao gồm việc thêm một số mã) hoặc sử dụng một plugin.

Chúng tôi sẽ bắt đầu bằng cách chỉ cho bạn cách thêm chú giải công cụ bằng plugin chú giải công cụ miễn phí của WordPress. Sau đó, chúng ta sẽ đi sâu vào phương pháp CSS thủ công.

Đọc thêm  So sánh 6 plugin nhãn trắng WordPress tốt nhất

1. Sử dụng plugin chú giải công cụ WordPress

Toàn bộ điểm của việc sử dụng plugin là giúp bạn tiết kiệm thời gian thêm một tính năng theo cách thủ công. Với suy nghĩ này, Shortcodes Ultimate cung cấp một trong những triển khai chú giải công cụ dễ dàng nhất cho người dùng WordPress.

Khi bạn bật plugin, bạn có quyền truy cập vào hàng tá mã ngắn mà bạn có thể sử dụng để thêm bất kỳ thứ gì từ nút, thanh trượt, băng chuyền hình ảnh, dải phân cách, v.v.

Tất nhiên, chú giải công cụ nằm trong danh sách các yếu tố được Shortcodes Ultimate hỗ trợ. Tuyệt vời hơn nữa, mọi mã ngắn đều có thể tùy chỉnh hoàn toàn bằng cách sử dụng các cài đặt và CSS tích hợp sẵn.

Để bắt đầu, hãy mở Trình chỉnh sửa khối cho trang mà bạn muốn thêm chú giải công cụ WordPress đầu tiên của mình. Sau đó, hãy tìm cái mới Chèn mã ngắn nút trên menu của bất kỳ khối hiện có nào:

Chèn một mã ngắn mới.

Ngay lập tức, bạn sẽ thấy một danh sách các mã ngắn có sẵn. chọn Chú giải công cụ Tùy chọn:

Thêm mã ngắn chú giải công cụ.

Giờ đây, bạn có cơ hội tùy chỉnh kiểu chú giải công cụ của mình. Chúng tôi đã quyết định sử dụng một thiết kế tối cơ bản và đặt nó lên trên phần tử bạn di chuột qua:

Tùy chỉnh chú giải công cụ của bạn.

Cuộn xuống cho đến khi bạn đến Nội dung chú giải công cụ trường và nhập văn bản bạn muốn phần tử hiển thị:

Thêm nội dung chú giải công cụ của bạn.

Lưu ý rằng bạn cũng có thể định cấu hình cách hoạt động của chú giải công cụ. Tùy chọn mặc định sẽ ẩn vùng chứa và văn bản cho đến khi bạn di chuột qua phần tử cha của nó. Bạn cũng có thể định cấu hình chú giải công cụ để chúng không hiển thị trừ khi bạn nhấp vào phần tử gốc, nhưng điều đó có xu hướng gây rắc rối cho khách truy cập.

Đây là giao diện của mã ngắn mới của bạn trong Trình chỉnh sửa khối:

Một ví dụ về shortcode của tooltip.

Và nếu bạn xem trước phần này ở giao diện người dùng, thì đây là cách chú giải công cụ hoạt động:

Một công cụ Shortcodes Ultimate đơn giản.

Xin lưu ý rằng bạn có thể thêm chú giải công cụ ở hầu hết mọi nơi bạn muốn sử dụng đúng mã ngắn. Điều này áp dụng cho văn bản thông thường, bảng, biểu tượng và các yếu tố khác.

Đọc thêm  5 plugin đặt phòng WordPress tốt nhất (Cuộc hẹn & Lịch)

Tuy nhiên, theo nguyên tắc thông thường, bạn muốn thêm một số chỉ báo trực quan để cho người dùng biết họ nên di chuột qua phần tử gốc. Gạch dưới hoặc các biến thể màu hoạt động tốt. Bạn cũng có thể sử dụng biểu tượng cảm xúc thông tin (ℹ️).

2. Thiết lập chú giải công cụ di chuột CSS theo cách thủ công

Trong phần trước, chúng ta đã nói về cách thêm chú giải công cụ di chuột bằng cách sử dụng plugin. Về cơ bản, plugin thiết lập nhiều kiểu CSS cho bạn. Điều này có nghĩa là bạn sẽ chọn từ danh sách cài đặt và plugin đã tạo mã ngắn cần thiết.

Tuy nhiên, không có lý do gì mà bạn không thể thực hiện việc này một cách thủ công bằng mã. Cách dễ nhất để thêm một số lớp CSS mới vào chủ đề của bạn là sử dụng Trình tùy chỉnh WordPress.

Để truy cập Customizer, điều hướng đến Giao diện > Chủ đề từ bảng điều khiển của bạn và tìm kiếm CSS bổ sung tab ở dưới cùng của menu bên trái:

Tab CSS bổ sung.

Tiếp theo, thêm ba lớp CSS vào chủ đề của bạn:

  1. Một cho thùng chứa chú giải công cụ
  2. Khác cho văn bản
  3. Một cái cuối cùng để che giấu mọi thứ

Đây là một ví dụ cơ bản về mã có thể trông như thế nào:

.tooltip-box {
  position: relative;
  display: inline-block;
}
.tooltip-box .tooltip-text {
  visibility: hidden;
  width: 100px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 6px 0;
  position: absolute;
  z-index: 1;
}
.tooltip-box:hover .tooltip-text {
  visibility: visible;
}

Tóm lại, mã này tạo một vùng chứa trống và đặt vị trí của nó so với phần tử gốc. Tiếp theo, nó thêm một số kiểu dáng cho văn bản bạn muốn đưa vào, chẳng hạn như phần đệm, căn chỉnh, màu sắc và chiều rộng tổng thể. Cuối cùng, nó đặt vùng chứa ở trạng thái ẩn cho đến khi bạn di chuột qua phần tử gốc.

Khi bạn lưu CSS tùy chỉnh này vào chủ đề của mình, bạn có thể gọi chú giải công cụ từ bất kỳ trang nào trên trang web của mình. Để làm điều đó, hãy truy cập Trình chỉnh sửa khối cho trang mà bạn muốn thêm chú giải công cụ.

Chọn khối mà bạn muốn thêm chú giải công cụ đầu tiên của mình và đi tới Chỉnh sửa dưới dạng HTML Tùy chọn:

Đọc thêm  10 plugin WordPress phải có cho người viết blog vào năm 2022
Chỉnh sửa một khối dưới dạng HTML.

Bây giờ, thêm một div chứa văn bản gốc cho chú giải công cụ của bạn và thông tin bạn muốn nó chứa:

<div class="tooltip-text">Parent text
  <span class="tooltiptext">Tooltip text here!</span>
</div>

Đảm bảo thêm các tooltip-text lớp CSS cho bạn div. Đây là lớp CSS mà bạn đã thêm vào chủ đề của mình bằng tùy biến. Nếu bạn đặt một tên khác cho lớp của mình, hãy tiếp tục và thay đổi nó.

Đây là chú giải công cụ của chúng tôi trông như thế nào từ bên trong trình chỉnh sửa:

Thêm HTML cho CSS hover tooltip của chúng tôi.

Nếu bạn lưu các thay đổi vào trang của mình và chuyển đến giao diện người dùng, bạn có thể thấy các thay đổi:

Phần tử gốc cho chú giải công cụ.

Khi bạn di chuột qua văn bản gốc, chú giải công cụ sẽ hiển thị:

Chú giải công cụ CSS đang hoạt động.

Đó là nó!

Hãy nhớ rằng, bạn có thể tạo kiểu cho chú giải công cụ di chuột CSS của mình giống như bạn có thể làm với các phần tử trang web khác. Điều này có nghĩa là sử dụng các màu khác nhau, sửa đổi vùng chứa, v.v. để tất cả chúng đều phù hợp với phong cách trang web của bạn.

Để làm được điều đó, bạn có thể cần học một số CSS cơ bản. Codecademy có một khóa học CSS tốt.

Phần kết luận

Thêm chú giải công cụ WordPress vào trang web của bạn có thể giúp bạn cải thiện trải nghiệm người dùng trên trang web của mình bằng cách bao gồm thông tin hữu ích.

Khi nói đến việc thêm CSS hover tooltips trong WordPress, có hai cách bạn có thể thực hiện:

  1. Sử dụng plugin chú giải công cụ WordPress đảm nhiệm việc thiết lập cho bạn.
  2. Thiết lập chú giải công cụ di chuột CSS theo cách thủ công bằng công cụ tùy chỉnh.

Đối với một số cách khác để tạo trang web WordPress thân thiện với người dùng hơn, bạn cũng có thể xem hướng dẫn của chúng tôi để cải thiện điều hướng WordPress và loại bỏ sự lộn xộn khỏi trang web của bạn.

Bạn có bất kỳ câu hỏi nào về cách tùy chỉnh chú giải công cụ di chuột WordPress của mình không? Hãy xem qua chúng trong phần bình luận bên dưới!

hướng dẫn miễn phí

5 mẹo cần thiết để tăng tốc
Trang web WordPress của bạn

Giảm thời gian tải của bạn thậm chí 50-80%
chỉ bằng cách làm theo các mẹo đơn giản.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status