Thêm nút Jump to Recipe vào WordPress với 2 cách

5 tháng ago, Hướng dẫn WordPress, Views

Thêm Nút Jump to Recipe vào WordPress: Hai Cách Đơn Giản (Tiếng Việt)

Bạn là một blogger ẩm thực và muốn cải thiện trải nghiệm người dùng trên trang web WordPress của mình? Một trong những cách tốt nhất để làm điều đó là thêm một nút “Jump to Recipe” (Nhảy đến Công Thức). Nút này cho phép khách truy cập bỏ qua phần giới thiệu dài dòng và đi thẳng đến công thức mà họ đang tìm kiếm. Điều này không chỉ cải thiện trải nghiệm người dùng mà còn có thể tăng thời gian họ ở lại trang web của bạn.

Bài viết này sẽ hướng dẫn bạn hai cách dễ dàng để thêm nút “Jump to Recipe” vào trang web WordPress của bạn. Chúng ta sẽ xem xét cả việc sử dụng plugin và thêm mã thủ công.

Cách 1: Sử Dụng Plugin Jump to Recipe Dễ Dàng

Cách đơn giản nhất để thêm nút “Jump to Recipe” là sử dụng một plugin WordPress chuyên dụng. Có rất nhiều plugin miễn phí và trả phí có sẵn, nhưng chúng tôi sẽ tập trung vào một plugin miễn phí, phổ biến và dễ sử dụng.

Bước 1: Cài Đặt và Kích Hoạt Plugin

Đăng nhập vào bảng điều khiển WordPress của bạn.
Đi đến “Plugins” -> “Add New”.
Tìm kiếm “Jump to Recipe”.
Chọn một plugin phù hợp, ví dụ: “WP Recipe Maker” hoặc “Recipe Card Blocks by WPZOOM”. Cài đặt và kích hoạt plugin bạn chọn.

Bước 2: Cấu Hình Plugin

Sau khi cài đặt và kích hoạt, bạn cần cấu hình plugin. Các plugin khác nhau có các tùy chọn cấu hình khác nhau, nhưng hầu hết đều cho phép bạn tùy chỉnh văn bản, màu sắc và vị trí của nút “Jump to Recipe”.

Ví dụ, nếu bạn sử dụng “WP Recipe Maker”:

Đi đến “WP Recipe Maker” trong menu WordPress của bạn.
Tìm đến phần “Settings”.
Điều chỉnh các cài đặt như văn bản nút (“Nhảy đến Công Thức”, “Xem Công Thức”, v.v.), màu sắc và vị trí. Bạn thường có thể chọn hiển thị nút ở đầu bài đăng, trước công thức, hoặc cả hai.

Bước 3: Thêm Công Thức vào Bài Đăng

Hầu hết các plugin “Jump to Recipe” đều đi kèm với trình soạn thảo công thức riêng. Sử dụng trình soạn thảo này để tạo công thức của bạn. Plugin thường tự động thêm neo (anchor) vào phần đầu công thức, cho phép nút “Jump to Recipe” hoạt động chính xác.

Plugin sẽ tự động thêm nút “Jump to Recipe” vào đầu bài đăng của bạn (hoặc vị trí bạn đã chọn trong cài đặt). Khi khách truy cập nhấp vào nút, họ sẽ được chuyển trực tiếp đến phần công thức.

Ưu điểm của việc sử dụng plugin:

Dễ cài đặt và sử dụng, ngay cả đối với người mới bắt đầu.
Cung cấp nhiều tùy chọn tùy chỉnh.
Thường đi kèm với các tính năng bổ sung như SEO công thức và tạo thẻ công thức.

Nhược điểm của việc sử dụng plugin:

Có thể làm chậm trang web của bạn nếu bạn sử dụng quá nhiều plugin.
Một số plugin có thể không tương thích với các theme hoặc plugin khác.

Cách 2: Thêm Nút Jump to Recipe Thủ Công

Nếu bạn thích kiểm soát nhiều hơn hoặc không muốn sử dụng plugin, bạn có thể thêm nút “Jump to Recipe” một cách thủ công. Điều này đòi hỏi một chút kiến thức về HTML và CSS, nhưng không quá phức tạp.

Bước 1: Thêm Neo (Anchor) vào Công Thức

Đầu tiên, bạn cần thêm một neo (anchor) vào đầu phần công thức của bạn. Neo này sẽ là điểm đến mà nút “Jump to Recipe” sẽ liên kết đến.

Trong trình soạn thảo bài đăng WordPress, chuyển sang chế độ “Text” (văn bản) hoặc “Code Editor”. Tìm vị trí bạn muốn đặt neo, thường là ngay trước tiêu đề của công thức. Thêm mã HTML sau:

<span id="recipe"></span>

Bạn có thể thay đổi `recipe` thành bất kỳ ID nào bạn muốn, miễn là nó là duy nhất trên trang đó. Đây là ID mà chúng ta sẽ sử dụng trong liên kết.

Bước 2: Thêm Nút Jump to Recipe

Tiếp theo, bạn cần thêm nút “Jump to Recipe” vào đầu bài đăng của bạn. Bạn có thể thêm nó ở bất kỳ đâu bạn muốn, nhưng vị trí phổ biến nhất là ngay sau phần giới thiệu.

Trong trình soạn thảo bài đăng, chuyển sang chế độ “Visual” (trực quan) hoặc “Code Editor”. Thêm mã HTML sau:

<a href="#recipe" class="jump-to-recipe">Nhảy đến Công Thức</a>

Lưu ý rằng `href` phải khớp với ID bạn đã sử dụng trong neo ở bước 1 (`#recipe`). Chúng ta cũng đã thêm một class `jump-to-recipe` để chúng ta có thể tạo kiểu cho nút bằng CSS.

Bước 3: Tạo Kiểu Cho Nút (CSS)

Cuối cùng, bạn cần tạo kiểu cho nút “Jump to Recipe” bằng CSS. Bạn có thể thêm CSS vào tệp `style.css` của theme hoặc sử dụng trình tùy biến CSS của WordPress (Appearance -> Customize -> Additional CSS).

Dưới đây là một ví dụ về CSS bạn có thể sử dụng:

.jump-to-recipe {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 10px 0;
  cursor: pointer;
  border-radius: 5px;
}

.jump-to-recipe:hover {
  background-color: #3e8e41;
}

Bạn có thể tùy chỉnh CSS để phù hợp với theme của bạn. Thay đổi màu sắc, phông chữ, kích thước và các thuộc tính khác để nút trông hấp dẫn và phù hợp với thiết kế trang web của bạn.

Ưu điểm của việc thêm nút thủ công:

Bạn có toàn quyền kiểm soát thiết kế và chức năng.
Không cần cài đặt thêm plugin.
Có thể giúp giảm tải cho trang web của bạn.

Nhược điểm của việc thêm nút thủ công:

Yêu cầu kiến thức về HTML và CSS.
Có thể tốn thời gian hơn so với sử dụng plugin.
Cần cập nhật mã thủ công nếu bạn thay đổi theme của mình.

Lựa Chọn Phương Pháp Phù Hợp

Vậy, phương pháp nào tốt nhất cho bạn? Nếu bạn là người mới bắt đầu hoặc muốn một giải pháp nhanh chóng và dễ dàng, thì việc sử dụng plugin là lựa chọn tốt nhất. Tuy nhiên, nếu bạn có kiến thức về HTML và CSS và muốn kiểm soát nhiều hơn, thì việc thêm nút thủ công là một lựa chọn tốt.

Bất kể bạn chọn phương pháp nào, việc thêm nút “Jump to Recipe” sẽ cải thiện đáng kể trải nghiệm người dùng trên trang web ẩm thực của bạn. Khách truy cập của bạn sẽ đánh giá cao khả năng bỏ qua phần giới thiệu và đi thẳng đến công thức mà họ đang tìm kiếm. Chúc bạn thành công!

admin

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa