Để tạo một website đa ngôn ngữ dễ sử dụng trên nền tảng WordPress với Gutenberg, bạn có thể sử dụng plugin Polylang. Dưới đây là các bước đơn giản giúp bạn thêm công cụ chuyển ngôn ngữ vào trang web của mình.
Quản lý nội dung cho nhiều ngôn ngữ
Các Khối Gutenberg và Dịch Thuật
Ok, bạn có thể đang nghĩ, “Gutenberg và Polylang, có gì khó đâu?” Nhưng đôi khi, hai thứ này không hoàn toàn “hợp cạ” khi nói đến việc dịch thuật. Dưới đây là vấn đề bạn cần biết:
- Một số khối không thực sự thân thiện với việc dịch thuật. Hãy nghĩ thế này: một số khối có đoạn văn bản được “nướng” ngay trong mã của chúng. Polylang không phải lúc nào cũng có thể can thiệp vào đó để thay thế chúng bằng ngôn ngữ khác. Điều này có thể khiến các trang dịch của bạn trông có vẻ hơi lạ mắt.
- Việc tìm ra cách dịch có thể khá khó khăn. Dù một khối có thể dịch được, nhưng không phải lúc nào bạn cũng biết cách thực hiện với Polylang. Bạn có thể gặp phải tình trạng nội dung bị trùng lặp, thiếu bản dịch, hoặc đơn giản là cảm giác “mình đang làm gì vậy?!”
- Nội dung động lại càng làm mọi thứ phức tạp hơn. Hãy tưởng tượng một khối hiển thị các bài viết blog mới nhất của bạn. Bạn cần đảm bảo rằng những bài viết đó đã được dịch và khối đó sẽ hiển thị đúng các bài viết cho từng ngôn ngữ. Việc này có thể đụng phải nhiều vấn đề kỹ thuật.
Nói chung, việc dịch các khối Gutenberg có thể giống như cố gắng ghép một cái chốt vuông vào lỗ tròn – có lúc thì được, có lúc lại cần một chút tinh chỉnh. Nhưng đừng lo, chúng tôi ở đây để giúp bạn làm cho mọi thứ hoạt động trơn tru và các bản dịch của bạn sẽ hoạt động như một chiếc đồng hồ!
Cần Có Một Công Cụ Chuyển Ngôn Ngữ Dễ Sử Dụng
Vậy là bạn đã dịch xong website và mọi thứ trông rất ổn. Nhưng làm sao để khách truy cập của bạn có thể chuyển đổi giữa các ngôn ngữ khác nhau? Đó chính là lúc công cụ chuyển ngôn ngữ phát huy tác dụng.
Hãy nghĩ nó như thế này: công cụ chuyển ngôn ngữ là cánh cửa dẫn đến nội dung đa ngôn ngữ của bạn. Nó phải dễ tìm, dễ sử dụng và phù hợp với thiết kế tổng thể của website.
Dưới đây là lý do tại sao một công cụ chuyển ngôn ngữ tốt lại quan trọng đến vậy:
- Không còn khách truy cập mất phương hướng: Hãy tưởng tượng ai đó vào website của bạn nhưng không hiểu một từ nào. Một công cụ chuyển ngôn ngữ rõ ràng giúp họ nhanh chóng tìm ra ngôn ngữ họ muốn và tiếp tục khám phá nội dung của bạn.
- Người dùng hài lòng, bạn cũng hài lòng: Một trải nghiệm chuyển ngôn ngữ mượt mà giúp website của bạn trở nên chuyên nghiệp và trau chuốt hơn. Nó cho thấy bạn quan tâm đến khán giả quốc tế của mình, và điều đó tạo dựng niềm tin.
- Dễ dàng điều hướng hơn: Một công cụ chuyển ngôn ngữ được đặt đúng chỗ có thể cải thiện khả năng điều hướng website. Hãy coi nó như một cách khác giúp khách truy cập tìm được nội dung họ cần, bất kể ngôn ngữ họ sử dụng.
Nhưng đây là vấn đề: tạo ra một công cụ chuyển ngôn ngữ đáp ứng tất cả các yêu cầu này có thể không hề đơn giản. Đặc biệt khi bạn đang làm việc với Gutenberg và các tùy chọn menu linh hoạt của nó (chẳng hạn như block WP Navigation). Bạn cần một giải pháp vừa dễ sử dụng, vừa thân thiện với lập trình viên.
Đừng lo, chúng tôi sẽ hướng dẫn bạn cách tạo ra một công cụ chuyển ngôn ngữ không chỉ hoạt động tốt mà còn đẹp mắt và tích hợp mượt mà với các menu trong Gutenberg của bạn
Tạo Công Cụ Chuyển Ngôn Ngữ
Tại Sao Shortcode Là Giải Pháp?
Được rồi, chúng ta nói về công cụ chuyển ngôn ngữ nhé. Bạn muốn thứ gì đó linh hoạt đúng không? Một công cụ chuyển ngôn ngữ hoạt động mượt mà với Gutenberg và tất cả các tùy chọn menu của nó? Vậy đây là vũ khí bí mật: shortcodes.
Hãy tưởng tượng shortcode như một lệnh nhỏ gọn có thể kích hoạt một đống mã phức tạp phía sau hậu trường. Bạn chỉ cần đặt một cái gì đó như [languageswitcher] vào trang của mình, và boom – bạn đã có một công cụ chuyển ngôn ngữ hoàn chỉnh mà không phải viết một dòng mã phức tạp nào.
Dưới đây là lý do tại sao shortcode lại tuyệt vời cho việc này:
- Chúng có thể đặt ở bất kỳ đâu. Sidebar? Nội dung trang? Bên trong menu điều hướng? Không vấn đề gì! Shortcode cho bạn tự do đặt công cụ chuyển ngôn ngữ ở bất kỳ đâu bạn muốn.
- Không cần lo về mã hóa. Dù bạn không phải là một chuyên gia lập trình, bạn vẫn có thể sử dụng shortcode. Nó xử lý tất cả những thứ như HTML hay PHP rắc rối, để bạn có thể tập trung vào việc xây dựng website của mình.
- Tùy chỉnh dễ dàng. Cần một menu thả xuống? Muốn thay đổi giao diện của công cụ chuyển ngôn ngữ? Nhiều shortcode cung cấp các tùy chọn cho bạn tinh chỉnh sao cho phù hợp với thiết kế của website.
Nói chung, shortcode giống như những ninja mã nhỏ gọn giúp cuộc sống của bạn trở nên dễ dàng hơn. Và khi xây dựng một website đa ngôn ngữ với Gutenberg, chúng là cách hoàn hảo để tạo ra công cụ chuyển ngôn ngữ vừa mạnh mẽ lại dễ sử dụng.
Tạo Shortcode để Chuyển Ngôn Ngữ
Đến lúc làm cho công cụ chuyển ngôn ngữ của chúng ta phát huy tác dụng rồi! Chúng ta sẽ sử dụng một “shortcode” – một lối tắt tiện lợi giúp bạn tiết kiệm việc phải viết quá nhiều mã.
Dưới đây là cách thực hiện:
- Shortcode: Chỉ cần thêm vào trang, bài viết hoặc widget của bạn.
- Cách hoạt động: Shortcode này kích hoạt một hàm đặc biệt làm việc cùng với Polylang để lấy các tùy chọn ngôn ngữ của bạn và hiển thị chúng trong một menu thả xuống gọn gàng.
<?php
/**
* Plugin Name: Wolfactive Language Switcher
* Description: Adds a user-friendly language switcher to your WordPress site.
* Version: 1.1.0
* Author: Your Name
* License: GPL-2.0+
* Text Domain: wolfactive-ls
*/
// Bail if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// Language switcher shortcode.
function wolfactive_language_switcher( $atts ) {
// Require Polylang.
if ( ! function_exists( 'pll_the_languages' ) ) {
return __( 'Polylang plugin is not installed or activated.', 'wolfactive-ls' );
}
ob_start();
?>
<div class="wolfactive-language-switcher dropdown">
<?php
pll_the_languages(
array(
'show_flags' => 1,
'show_names' => 1,
'dropdown' => 1,
)
);
?>
</div>
<?php
return ob_get_clean();
}
add_shortcode( 'polylang_switcher', 'wolfactive_language_switcher' );
?>Dùng Shortcode Chuyển Ngôn Ngữ
Được rồi, đến lúc làm cho công cụ chuyển ngôn ngữ của chúng ta hoạt động rồi! Còn nhớ đoạn mã nhỏ mà chúng ta đã tạo trước không? Giờ là thời điểm để áp dụng nó vào website WordPress của bạn.
Dưới đây là cách sử dụng:
1. Trong nội dung trang hoặc bài viết:
- Mở trình chỉnh sửa WordPress cho trang hoặc bài viết mà bạn muốn thêm công cụ chuyển ngôn ngữ.
- Thêm một block mới. Bạn có thể sử dụng block “Shortcode”, “Paragraph”, hoặc bất kỳ block nào cho phép bạn nhập văn bản.
- Chỉ cần dán shortcode
vào block. - Thế là xong! Xem trước trang của bạn và bạn sẽ thấy công cụ chuyển ngôn ngữ trong một menu thả xuống gọn gàng.
2. Trong widget thanh bên (sidebar):
- Vào Appearance > Widgets trong bảng điều khiển WordPress.
- Kéo widget “Text” vào thanh bên (sidebar) của bạn.
- Dán shortcode
vào khu vực nội dung của widget. - Lưu widget, và công cụ chuyển ngôn ngữ sẽ xuất hiện trong thanh bên của bạn.
3. Thêm trực tiếp vào mã theme (dành cho người dùng nâng cao):
- Nếu bạn thoải mái chỉnh sửa các file theme của mình, bạn có thể thêm shortcode trực tiếp vào các template của theme. Cách này cho phép bạn kiểm soát nhiều hơn về nơi công cụ chuyển ngôn ngữ sẽ xuất hiện.
Lưu ý quan trọng:
Shortcode này được thiết kế để hoạt động mượt mà với block WP Navigation. Vì vậy, nếu bạn đang sử dụng block này để xây dựng menu, bạn chỉ cần thêm shortcode vào “Custom Link” trong cấu trúc menu của bạn.
Thêm CSS cho trình chuyển đổi ngôn ngữ
/* Basic Styling */
.polylang-switcher {
/* Add some padding and a border */
padding: 10px;
border: 1px solid #ccc;
}
/* Dropdown Styles */
.polylang-switcher.dropdown ul {
display: none; /* Hide the list by default */
list-style: none; /* Remove bullet points */
margin: 0;
padding: 0;
}
.polylang-switcher.dropdown:hover ul {
display: block; /* Show the list on hover */
}
.polylang-switcher li {
padding: 5px;
}
/* Style the current language */
.polylang-switcher .current-lang {
font-weight: bold;
}
/* Style the links */
.polylang-switcher a {
text-decoration: none; /* Remove underlines */
color: #333; /* Example link color */
}Giải thích
- Trang trí cơ bản: Thêm một ít khoảng đệm và đường viền cho phần chứa trình chuyển đổi ngôn ngữ.
- Phong cách dropdown: Mặc định, danh sách các ngôn ngữ sẽ bị ẩn đi. Khi người dùng di chuột vào trình chuyển đổi, danh sách này sẽ hiển thị ra, tạo hiệu ứng dropdown.
- Ngôn ngữ hiện tại: Làm đậm ngôn ngữ đang được chọn.
- Phong cách liên kết: Bỏ đường gạch dưới các liên kết và thay đổi màu sắc của chúng.
Cách sử dụng
- Thêm CSS tùy chỉnh: Bạn có thể thêm mã CSS này vào tệp
style.csscủa giao diện (theme) của mình hoặc sử dụng plugin như “Simple Custom CSS and JS” để thêm mã CSS mà không cần chỉnh sửa trực tiếp giao diện. - Tùy chỉnh: Bạn có thể thoải mái chỉnh sửa mã CSS này để phù hợp với thiết kế của trang web của mình. Bạn có thể thay đổi màu sắc, phông chữ, khoảng cách, hoặc thậm chí thêm hình nền để làm cho trình chuyển đổi ngôn ngữ trở nên nổi bật và phù hợp hơn với giao diện trang web của bạn.
Tối ưu hóa việc thiết lập đa ngôn ngữ với một Plugin đơn giản
Chúng ta đã tìm hiểu về cách dịch nội dung và tạo trình chuyển đổi ngôn ngữ động. Nhưng sẽ thật tuyệt nếu có một công cụ gói tất cả các chức năng này vào một bộ công cụ đơn giản phải không?
Tin tốt đây! Có một công cụ như vậy.
Hãy thử plugin Polylang Switcher (bạn có thể tìm nó trên GitHub tại đây: https://github.com/Canvilled/wolfactive-plugin). Plugin nhẹ này giúp đơn giản hóa toàn bộ quá trình thiết lập trang web đa ngôn ngữ trên WordPress với Gutenberg.
Những tính năng nổi bật của plugin này:
- Chuyển ngôn ngữ dễ dàng: Plugin cung cấp một shortcode có sẵn để tạo trình chuyển đổi ngôn ngữ dạng dropdown thân thiện với người dùng. Bạn không cần phải viết mã gì cả!
- Tích hợp mượt mà: Plugin hoạt động hoàn hảo với Gutenberg và khối điều hướng WP, giúp bạn dễ dàng thêm trình chuyển đổi ngôn ngữ vào menu của mình.
- Thân thiện với lập trình viên: Nếu bạn là người thích tùy chỉnh, mã nguồn của plugin sạch sẽ, được tài liệu hóa đầy đủ và dễ dàng chỉnh sửa.
Nói lời tạm biệt với việc cài đặt quá nhiều plugin và đau đầu với mã nguồn! Plugin này sẽ lo tất cả cho bạn, mang lại một thiết lập đa ngôn ngữ mượt mà và dễ dàng.
Cách sử dụng:
- Tải plugin từ repo GitHub.
- Cài đặt và kích hoạt plugin trên trang WordPress của bạn.
- Sử dụng shortcode
[ polylang_switcher ]ở bất kỳ đâu bạn muốn hiển thị trình chuyển đổi ngôn ngữ.
Vậy là xong! Bạn đã sẵn sàng để tạo một trang web đa ngôn ngữ dễ sử dụng với Gutenberg và Polylang.
Để lại một bình luận