Trong bài hướng dẫn này, bạn sẽ tìm hiểu cách tạo một trang web đa ngôn ngữ với Stitched và WPML. Stitched là một giao diện dành cho các nghệ nhân, bạn có thể sử dụng thành phần giới thiệu trên trang chủ của nó để kể cho khách truy cập nghe về bản thân và bạn có thể mở rộng chức năng của nó bằng cách cài đặt các plugin được đề xuất có thể tích hợp với giao diện này.
Stitched được phát triển bởi WooThemes. Đối với các giao diện và plugin do WooThemes phát triển, chúng tôi khuyên bạn nên sử dụng giao diện người dùng tích hợp sẵn của WPML để dịch các tính năng đặc biệt mà WooThemes / Plugin sử dụng trong mã của họ. Trong bài hướng dẫn này, tôi sẽ hướng dẫn bạn từng bước một cách suôn sẻ để thực hiện việc đó.
Bạn có thể xem ví dụ thực tế trên trang web demo Stitched + WPML.
Để chạy một trang web Stitched đa ngôn ngữ với WPML, bạn sẽ cần:
- Giao diện Stitched
- Một phiên bản WPML gần đây, bao gồm các module Dịch chuỗi và Quản lý dịch thuật
Bắt đầu
Dưới đây là các bước chính bạn cần làm theo để bắt đầu:
- Cài đặt và kích hoạt Stitched
- Cài đặt và kích hoạt các plugin WPML (WPML Multilingual CMS, WPML Dịch Chuỗi, WPML Quản lý dịch thuật)
- Thiết lập WPML từ WPML->Ngôn ngữ. Xem Hướng dẫn bắt đầu của WPML để biết toàn bộ thông tin tham khảo
- Cài đặt và kích hoạt một trong số các plugin có thể tích hợp với Stitched, cho mục đích của bài hướng dẫn này, chúng tôi sẽ sử dụng Projects
Dịch thông điệp giới thiệu
Tính năng “Introductory Message” (Thông điệp giới thiệu) của giao diện Stitched là sự kết hợp giữa hình ảnh Gravatar của quản trị viên trang web cũng như văn bản khẩu hiệu của trang web. Với WPML, bất kỳ văn bản nào (hoặc chuỗi văn bản như cách chúng tôi gọi ở đây) không thuộc về các bài viết, trang & phân loại đều được dịch bằng module Dịch chuỗi.
Văn bản cho phần đó được thiết lập trong Cài đặt > Tổng quan
Và bây giờ để dịch, bạn chỉ cần truy cập WPML->Dịch chuỗi và tìm kiếm chuỗi văn bản đó
, dịch nó, đánh dấu là đã hoàn thành và lưu lại
Vì vậy, đây là giao diện người dùng của chúng ta hiện tại, bao gồm cả hình ảnh Gravatar mà giao diện tự động lấy theo cài đặt của bạn
Dịch các văn bản chung
Stitched đi kèm với một số chuỗi văn bản khác mà bạn có thể muốn dịch. Bạn có thể hoàn thành bất kỳ bản dịch nào còn thiếu bằng cách sử dụng module Dịch chuỗi của WPML như tôi đã mô tả cho “Introductory Message”. Nếu thiếu một số chuỗi văn bản, hãy làm theo hướng dẫn về Bản địa hóa giao diện và plugin. Tóm lại, hãy truy cập WPML->Bản địa hóa giao diện và plugin và nhấp vào “Quét giao diện để tìm chuỗi”. Lưu ý rằng bạn có thể dễ dàng lọc các chuỗi văn bản phù hợp trong menu thả xuống ngữ cảnh – đối với Stitched, hãy lọc theo “theme woothemes” và đối với plugin “Projects”, hãy lọc theo “plugin projects-by-woothemes”, nó trông giống như thế này:
Dịch các plugin được tích hợp
Bây giờ chúng ta đã biết cách dịch tất cả văn bản từ giao diện, hãy xem cách chúng ta làm cho các chuỗi văn bản và tính năng từ Woo Plugin cũng có thể dịch được. Trong khuôn khổ bài hướng dẫn này, tôi đã chọn một plugin rất hay được khuyên dùng với Stitched – “Projects by WooThemes”.
Sau khi bạn đã cài đặt và kích hoạt “Projects”, bạn sẽ có thể thấy trong trang quản trị WordPress của mình một menu mới có tên chính xác là…“projects” như ở đây:
Để làm cho các dự án và danh mục của chúng có thể dịch được, bạn sử dụng cài đặt WPML (giao diện người dùng WPML), về cơ bản những gì bạn làm là truy cập WPML->Quản lý dịch thuật như thế này
Chọn Thiết lập nội dung đa ngôn ngữ từ các tab ở trên cùng
Trước khi chúng ta tiếp tục, xin nói qua một chút về những gì thực sự đang diễn ra ở chế độ nền – Plugin Projects giống như nhiều plugin (và giao diện) khác đang sử dụng Loại nội dung tùy chỉnh cho chức năng của nó, đây là một loại bài viết “đặc biệt”, và vì chúng đặc biệt nên WPML không “biết” rằng những bài viết này cần được dịch, vì vậy bước tiếp theo của chúng ta ở đây là nói với WPML chính xác điều đó – hãy dịch Projects!
Nhấp vào Bài viết tùy chỉnh, chọn Dịch cho Projects – như bạn thấy, bạn cũng có thể thiết lập để các slug của Projects có thể dịch được, và ngay bên dưới, bạn có thể dịch các Phân loại tùy chỉnh liên quan đến các bài viết tùy chỉnh này, trong trường hợp này được gọi là “Project categories”, bây giờ chỉ cần Lưu và thế là xong. Theo cách tương tự, bạn có thể kiểm soát cách xử lý các trường tùy chỉnh cho việc dịch bằng cách nhấp vào liên kết Dịch trường tùy chỉnh ở trên cùng, đối với Projects, bạn có thể thiết lập 3 trường tùy chỉnh:_client, _project_image_gallery, & _url nhưng đối với những trường này, tôi khuyên bạn nên làm theo điểm tiếp theo -
Hãy xem trang quản trị Projects trông như thế nào, chúng ta nhấp vào “Projects” trong màn hình quản trị và bây giờ – giống như trong bất kỳ trang hoặc bài viết “bình thường” nào, chúng ta có thể nhân bản hoặc dịch bất kỳ Project hiện có nào, tạo một Project mới bằng bất kỳ ngôn ngữ nào chúng ta muốn và điều rất quan trọng – sử dụng toàn bộ chức năng của loại nội dung project – trong trường hợp này, chúng ta có thể thêm Chi tiết, Miêu tả và bộ sưu tập hình ảnh đặc biệt mà nó cung cấp cho chúng ta, như thế này:
Làm cho các Trường tùy chỉnh (và những thứ khác) có thể dịch được trong trang chỉnh sửa bài viết tùy chỉnh
Điểm cuối cùng ở đây – như bạn có thể đã nhận thấy trong màn hình trước – bạn cũng có thể kiểm soát cách xử lý Trường tùy chỉnh và thậm chí cả Phân loại & Loại bài viết cho việc dịch trong mỗi trang chỉnh sửa cho một Bài viết, hãy phóng to phần đó lên một chút:
Ở đây, chúng ta muốn _project_image_gallery được sao chép giữa các ngôn ngữ và tôi thấy các trường _client & _url hợp lý khi không được dịch – bạn vẫn có thể thay đổi những trường này trong trang bài viết đã dịch nhưng chúng ta không thực sự cần dịch chúng.
Tùy chỉnh kiểu dáng cho bộ chuyển đổi ngôn ngữ
Cuối cùng nhưng không kém phần quan trọng, hãy thực hiện một tinh chỉnh nhỏ để bộ chuyển đổi ngôn ngữ WPML được tích hợp hoàn hảo vào menu điều hướng chính của Stitched. Bộ chuyển đổi ngôn ngữ WPML đã được thêm các class vào đó để có thể tùy chỉnh kiểu dáng theo nhu cầu của bạn, bạn thậm chí có thể tạo toàn bộ một bộ chuyển đổi ngôn ngữ tùy chỉnh nếu bạn muốn. Ở đây điều đó là không cần thiết, tất cả những gì chúng ta muốn là thêm một chút padding cho lá cờ để nó “nằm” đúng vị trí và không có vẻ kỳ cục
Để làm điều đó, hãy truy cập WPML->Ngôn ngữ->Tùy chọn bộ chuyển đổi ngôn ngữ->CSS bổ sung (tùy chọn) và thêm một chút padding vào class kiểm soát kiểu dáng của hình ảnh lá cờ trong bộ chuyển đổi ngôn ngữ – img.iclflag
Bây giờ nó trông rất đẹp, giống như bất kỳ mục menu nào khác của Stitched
Kết luận
Stitched là một giao diện rất tuyệt vời để xây dựng trang web đa ngôn ngữ và giới thiệu với thế giới về bản thân cũng như các dự án của bạn, bạn cũng có thể thêm một cửa hàng vào đó bằng cách sử dụng WooCommerce & WPML Multilingual & Multicurrency for WooCommerce. Chúng ta đã thấy cách bạn có thể dễ dàng điều chỉnh các tính năng của nó bằng cách sử dụng WPML.
Các phiên bản được sử dụng
- WordPress 3.9
- WPML 3.1.5
- Giao diện Stitched 1.0.2
- Plugin Projects 1.2.0
