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

Chưa được phân loại

Đôi khi bạn cần cung cấp cho người dùng trang web của mình thêm thông tin, nhưng đơn giản là không có đủ bất động sản trang. 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 tiếp cận thuận tiện nhất là thêm một 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 khách truy cập cần đều ở ngay đó bằng cách ‘ghi nhớ’ phần tử phù hợp.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn một số ví dụ yêu thích của chúng tôi về chú giải công cụ di chuột CSS đ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.

Hãy cùng tìm hiểu!

Giới thiệu về chú giải công cụ CSS hover

Khái niệm về một chú giải công cụ WordPress rất đơn giản. Chúng là các thù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 xây dựng một 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 tăng cường thiết kế:

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

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 của biên tập viên, Bản đồvà khá nhiều yếu tố 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 (liên quan đến 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 hướng dẫn bạn cách thêm chú giải công cụ bằng plugin chú giải công cụ WordPress miễn phí. Sau đó, chúng ta sẽ đi sâu vào phương thức CSS thủ công.

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

Toàn bộ mục đích 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, đến 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 hỗ trợ bởi Shortcodes Ultimate. Thậm chí tốt hơn, mọi shortcode đều có thể tùy chỉnh hoàn toàn bằng cách sử dụng cài đặt tích hợp và CSS.

Để bắt đầu, 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 đó, tìm kiếm cái mới Chèn Shortcode trên menu của bất kỳ khối hiện có nào:

Chèn một shortcode 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 nút Chú giải công cụ sự quyết định:

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

Bây giờ bạn có cơ hội tùy chỉnh phong cách chú giải công cụ của mình. Chúng tôi đã quyết định chọn 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út Nội dung chú giải công cụ 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ụ của bạn. 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ử chính, nhưng điều đó có xu hướng tạo ra rắc rối cho khách truy cập.

Dưới đây là giao diện của shortcode mới của bạn trong Trình chỉnh sửa chặn:

Một ví dụ về shortcode của chú giải công cụ.

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

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

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 mã ngắn phù hợp. Đ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.

Tuy nhiên, theo nguyên tắc chung, 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ử cha. Gạch chân hoặc các biến thể màu sắc 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 (i️).

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 tôi đã nói về cách thêm chú giải công cụ di chuột bằng cách sử dụng một 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ác cài đặt và plugin đã tạo ra mã ngắn cần thiết.

Tuy nhiên, không có lý do gì bạn không thể làm điều này theo cách thủ công với 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 Chủ đề > giao diện từ trang tổng quan của bạn và tìm kiếm CSS bổ sung ở cuối 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 cái cho vùng chứa chú giải công cụ
  2. Một cái khác cho văn bản
  3. Một cái cuối cùng để che giấu mọi thứ

Dưới đây là một ví dụ cơ bản về giao diện của mã:

.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, code này tạo ra một container rỗng và đặt vị trí của nó so với phần tử cha. Tiếp theo, nó thêm một số kiểu dáng cho văn bản bạn muốn bao gồm, chẳng hạn như đệm, căn chỉnh, màu sắc và chiều rộng tổng thể. Cuối cùng, nó đặt container vẫn ẩn cho đến khi bạn di chuột qua phần tử cha.

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 các 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à chuyển đến Chỉnh sửa dưới dạng HTML sự quyết định:

Chỉnh sửa một khối dưới dạng HTML.

Bây giờ, hãy thêm một div chứa văn bản mẹ 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 tooltip-text Lớp CSS cho của bạn div. Đây là lớp CSS mà bạn đã thêm vào chủ đề của mình bằng cách sử dụng trình tùy biến. Nếu bạn đặt tên khác cho lớp học của mình, hãy tiếp tục và thay đổi nó.

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

Thêm HTML cho chú giải công cụ di chuột CSS của chúng tôi.

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

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

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

Một 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 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 sắc khác nhau, sửa đổi vùng chứa và hơn thế nữa, để tất cả chúng đều phù hợp với phong cách trang web của bạn.

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

Kết thúc

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 bạn bằng cách bao gồm thông tin hữu ích.

Khi nói đến việc thêm chú giải công cụ di chuột CSS trong WordPress, có hai cách tiếp cận bạn có thể thực hiện:

  1. Sử dụng plugin chú giải công cụ WordPress đảm nhận 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ách sử dụng trình tùy chỉnh.

Đối với một số cách khác để tạo trang web WordPress thân thiện hơn với người dùng, 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 WordPressloạ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 cùng điểm qua chúng trong phần bình luận bên dưới nhé!

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.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai.