WPML

Một trong những quyết định quan trọng nhất bạn đưa ra khi xây dựng trang web WordPress là chọn một giao diện. May mắn thay, có hàng ngàn giao diện xuất sắc để bạn lựa chọn. Hôm nay, chúng tôi muốn nói về việc sử dụng các giao diện khởi đầu tối giản, khi nào chúng là một lựa chọn tốt và tại sao.

Giao diện khởi đầu bao gồm tất cả, chuyên biệt và tối giản


Việc phát triển giao diện trong WordPress đã tiến hóa theo nhiều hướng, thu hút các đối tượng và nhu cầu khác nhau.

Các giao diện phổ biến nhất hiện nay là các giao diện “đa năng”, thực sự bao gồm mọi thứ trong đó. Avada, Enfold và Divi là những ví dụ tuyệt vời. Chúng bao gồm các “skin” thiết kế khác nhau, trình tạo trang riêng và rất nhiều chức năng mà bạn có thể bật và tắt từ bảng điều khiển quản trị.

Một số trang web yêu cầu chức năng đặc biệt, điều khó đạt được với một giao diện đa năng. Các trang web bất động sản và danh bạ là những ví dụ điển hình. Đối với những trang web này, có hàng chục giao diện chuyên biệt, bao gồm những gì bạn cần để xây dựng trang web. Các giao diện này cung cấp một giải pháp được thiết kế riêng cho các ứng dụng rất cụ thể.

Và, nhiều nhà phát triển thích tự xây dựng và chọn các thành phần khác nhau mà họ sẽ sử dụng để phát triển trang web. Đối với họ, một giao diện khởi đầu tối giản hoạt động tốt nhất, vì nó cung cấp những yếu tố cơ bản nhất mà không làm trang web bị quá tải bởi các tính năng thừa.

Mặc dù mỗi phương pháp đều có ưu điểm riêng, tôi sẽ nói về các giao diện tối giản, khi nào chúng hữu ích nhất và cách tận dụng tối đa chúng.

Một giao diện khởi đầu tối giản không nên có những gì?


Thực ra, việc định nghĩa một giao diện khởi đầu tối giản dựa trên những gì nó nên tránh sẽ dễ dàng hơn.

Tôi nghĩ rằng điều quan trọng nhất trong một giao diện tối giản là tránh sự phụ thuộc vào nhà cung cấp. Khi bạn tạo trang web của mình bằng một giao diện bao gồm tất cả, bạn có mọi thứ mình cần. Tuy nhiên, điều này có thể giống như việc ký một hợp đồng nghiêm ngặt. Bạn nhận được mọi thứ mình cần từ giao diện nhưng không có đường lui. Không bao giờ. Nếu bạn yêu thích mọi thứ về giao diện, điều đó thật tuyệt. Nhưng khi gặp sự cố, bạn phải chấp nhận chúng, vì việc chuyển đổi giao diện gần như là không thể.

Một giao diện khởi đầu thực sự tối giản sẽ cung cấp cho bạn những gì bạn cần (từ một giao diện), nhưng vẫn cho phép bạn chuyển đổi giao diện, trong trường hợp bạn cần. Tất nhiên, việc chuyển đổi giao diện sẽ đòi hỏi một số công việc, nhưng nó sẽ không giống như việc xây dựng lại toàn bộ trang web từ đầu.

Việc chuyển đổi giao diện trên một trang web chính thức không bao giờ là “cho vui”. Không ai chuyển đổi giao diện chỉ vì họ thấy chán. Bạn có thể cần chuyển đổi giao diện nếu nó hết vòng đời hỗ trợ hoặc có những vấn đề mà bạn không nhận ra khi chọn nó. Điều này hiếm khi xảy ra, nhưng khi bạn đang phát triển hàng chục trang web cho khách hàng, tôi chắc chắn bạn đã từng gặp tình huống này.

Một giao diện khởi đầu tối giản nên bao gồm những gì?


Vì vậy, không có sự phụ thuộc, nhưng giao diện thực sự cần cung cấp những gì? Chà, câu trả lời cho điều này thực sự thay đổi theo thời gian. Hôm nay có một tập hợp các yêu cầu nhất định và tôi chắc chắn rằng năm sau sẽ có những yêu cầu khác.

Các giao diện tối giản mà chúng ta sử dụng ngày nay đều cung cấp:

  • Các tùy chọn bố cục trang (chiều rộng, khoảng đệm, đóng khung nội dung, v.v.)
  • Phần đầu trang, phần chân trang và thanh bên có thể tùy chỉnh
  • Các menu có thể tùy chỉnh
  • Kiểm soát kiểu chữ

Về mặt chức năng, đây thực sự là mức tối thiểu cần thiết. Tất nhiên, giao diện cần phải nhanh, được viết bằng mã an toàn, bao gồm siêu dữ liệu SEO và tương thích với các plugin phổ biến.

Vì chúng ta đang nói về các giao diện tối giản và không phụ thuộc vào nhà cung cấp, nên không có các tính năng xây dựng trang web trong giao diện, chẳng hạn như trình tạo trang tích hợp, biểu mẫu liên hệ và những thứ khác mà bạn có thể có được từ các plugin.

Các giao diện khởi đầu tối giản mà bạn nên biết


Có nhiều giao diện tối giản xuất sắc hơn những gì tôi sẽ đề cập ở đây. Tôi sẽ viết về các giao diện mà khách hàng đã đề xuất cho chúng tôi và chính chúng tôi đã sử dụng. Bằng cách này, tôi có thể viết từ kinh nghiệm xây dựng trang web của chúng tôi và tránh những lời quảng cáo thổi phồng.
Được tạo cho các trình tạo trang
Bố cục đáp ứng
Kiểm soát bố cục Tốt Rất tốt Tốt
Tùy chọn tùy chỉnh phần đầu trang và phần chân trang Tốt Rất tốt Tốt
Tùy chọn cấu hình menu Cơ bản Rất tốt Cơ bản (sẽ có thêm tùy chọn vào tháng 2 năm 2018)
Mức độ tùy chỉnh tổng thể (phông chữ, màu sắc, khả năng hiển thị của các thành phần, v.v.) Tốt Xuất sắc Tốt
Sẵn sàng cho thương mại điện tử
Có thể nhập demo
Thân thiện với SEO
Sẵn sàng để dịch
Hỗ trợ RTL
Tích hợp mã Microdata/schema.org
Font Awesome
Tối ưu hóa tốc độ
Tích hợp Mega Menu / Sắp ra mắt

Mở rộng các tính năng của GeneratePress, OceanWP và Astra


Làm thế nào để bạn tạo ra một giao diện tinh gọn và hiệu quả, nhưng vẫn cung cấp chức năng phong phú? Câu trả lời là “các tiện ích bổ sung”. Các tiện ích bổ sung chuyên dụng cho phép bạn cài đặt các tính năng mà bạn cần cho các dự án khác nhau.

Hãy xem mỗi giao diện cung cấp những tiện ích mở rộng cao cấp nào và chúng hữu ích như thế nào trong việc xây dựng các trang web hoàn chỉnh.

Các tiện ích bổ sung cao cấp của Generate Press

Các tiện ích mở rộng của GeneratePress Các tính năng chính
Tiện ích mở rộng Typography and Colors Kiểm soát hoàn toàn các phông chữ cho mọi phần trên trang web của bạn: phần thân, phần đầu trang, điều hướng và các phần khác. Xác định và thay đổi màu sắc cho (hầu hết) tất cả các thành phần
Tiện ích mở rộng WooCommerce Kiểm soát việc hiển thị các thành phần khác nhau: giỏ hàng trong menu, breadcrumb, thanh bên, hình ảnh sản phẩm, sản phẩm liên quan và hơn thế nữa. Chế độ không bị phân tâm cho trang thanh toán. Thay đổi giao diện của các nút, văn bản, tiêu đề sản phẩm và các thành phần khác.
Tiện ích mở rộng Disable Elements and Copyright Bạn có thể chọn có hiển thị phần đầu trang, điều hướng chính, hình ảnh bài viết, tiêu đề và phần chân trang hay không – cho từng trang. Bạn có thể chọn từ bảy bố cục trang khác nhau. Tùy chỉnh thông báo bản quyền của giao diện.
Tiện ích mở rộng Sections, Backgrounds and Spacing Chia trang thành nhiều phần và gán nội dung cũng như thiết kế khác nhau cho từng phần: tính năng, tiêu đề, hiệu ứng thị sai, hình ảnh, nội dung đơn giản. Thêm nền vào hầu hết mọi phần trên trang web của bạn: phần đầu trang, phần thân, điều hướng, thanh bên, widget và các phần khác.
Các tiện ích mở rộng Menus+, Secondary Navigation và Page Header Tùy chỉnh menu của bạn trên thiết bị di động hoặc máy tính để bàn. Dễ dàng hiển thị menu phụ và chọn nơi hiển thị: nổi, bên dưới phần đầu trang và hơn thế nữa. Hình ảnh phần đầu trang cho từng trang.
Tiện ích mở rộng Blog Chọn các thành phần Blog sẽ hiển thị: toàn bộ nội dung hoặc đoạn trích, ngày tháng, tác giả, chuyên mục và các thành phần khác. Tùy chỉnh nhãn “Đọc thêm”.
Tùy chỉnh hình ảnh blog. Hiển thị các bài viết gần đây nhất lớn hơn các bài viết cũ.
Tiện ích mở rộng Hooks Thêm mã của riêng bạn vào trang web, mà không cần chỉnh sửa bất kỳ tệp giao diện nào. Chọn phần của trang web nơi mã được tải.

Tính năng thưởng: Các tiện ích bổ sung của GeneratePress Premium cho phép bạn nhập và xuất các cài đặt của chúng. Điều này cho phép bạn tiết kiệm thời gian cho các dự án khác yêu cầu cùng một cài đặt.

Các tiện ích mở rộng cốt lõi của OceanWP

Cho đến nay, chúng ta có thể đếm được tổng cộng 15 tiện ích mở rộng cốt lõi của OceanWP (7 miễn phí và 8 cao cấp). Nhưng nếu bạn đọc bài đăng blog mới nhất của Nicolas, có vẻ như sẽ có thêm nhiều tiện ích khác sắp ra mắt!

Hãy xem bên dưới cách tận dụng tối đa các tiện ích mở rộng.

Tiện ích mở rộng OceanWP Các tính năng chính
Product Sharing và Social Sharing Với tiện ích mở rộng này, bạn có thể thêm các nút chia sẻ trên mạng xã hội vào trang sản phẩm đơn lẻ hoặc bài viết của mình.
Modal Window Dễ dàng thiết lập, giảm thời gian tải và đơn giản hóa thiết kế tổng thể. Bạn có thể sử dụng nó cho một biểu mẫu, tạo khách hàng tiềm năng, cảnh báo và các thông báo quan trọng khác.
Posts Slider Bạn có thể tạo một thanh trượt để hiển thị các bài viết mới nhất của mình, điều này sẽ tạo ra một shortcode mà bạn có thể sử dụng ở bất kỳ đâu trên trang web của mình.
Custom Sidebar Chỉ cần kéo và thả các widget của bạn vào đó. Bạn có thể quyết định chính xác trang nào bạn muốn hiển thị nó.
Demo Import Có một vài bản demo sẵn sàng sử dụng cho từng ngành: Du lịch, Cửa hàng, Yoga, Kiến trúc sư, v.v.
Ocean Extra Đây giống như một trình quản lý bảng điều khiển hoặc một bảng điều khiển giao diện. Bạn có thể chọn tắt hoặc bật bất kỳ phần nào trong Tùy biến để làm cho nó tải nhanh hơn.
Portfolio Có một số cách hiệu quả để bạn trình bày công việc của mình và bạn có thể lọc theo tác giả, chuyên mục và bất kỳ thẻ nào khác.
WooPopup Cửa sổ bật lên được hiển thị khi bạn nhấp vào “thêm vào giỏ hàng”. Bạn có toàn quyền kiểm soát bán kính, ngoài ra bạn có thể thay đổi các liên kết, văn bản và tùy chỉnh các thông điệp.
Sticky Header & Footer Gắn phần chân trang vào cuối màn hình của bạn và thêm bất kỳ văn bản, menu hoặc màu sắc nào vào đó.
Elementor Widgets Nhóm OceanWP và Elementor đã làm việc cùng nhau để thêm một số widget mới vào Elementor.
Footer Callout Đây là một cách mạnh mẽ để thêm thông tin quan trọng về công ty của bạn hoặc các nút ngay trước phần chân trang truyền thống.
Ocean Hooks Thêm mã, nội dung và shortcode của riêng bạn trên toàn bộ trang web, thậm chí không cần đến giao diện con (child theme).

Các tiện ích bổ sung cao cấp của Astra

Astra tập trung vào sự đơn giản. Với các tùy chọn tối thiểu, người dùng nhận được kết quả mong muốn thông qua các cài đặt được phân loại rõ ràng trong Tùy biến. Astra Pro là một plugin tất cả trong một giúp mở rộng giao diện và thêm nhiều tính năng hơn.

Các tiện ích mở rộng của Astra Các tính năng chính
Transparent Header Tạo các phần đầu trang trong suốt và làm cho trang web của bạn nổi bật.
Typography Kiểm soát tốt hơn các phông chữ và khả năng đọc của trang web của bạn với mô-đun này
Sticky Header Cho phép phần đầu trang của bạn dễ dàng truy cập ngay cả khi người dùng cuộn xuống.
Page Headers Thiết kế khu vực Tiêu đề trang hấp dẫn với breadcrumb, các trường meta và các tùy chọn tuyệt vời khác.
Advanced Footers Có thêm các khu vực widget ở phần chân trang và các thiết kế sáng tạo với mô-đun Advanced Footer.
White Label Giữ cho thông tin trong trang quản trị WordPress đơn giản dưới thương hiệu của bạn.

Thiết lập trang web với một giao diện khởi đầu


Với cả ba giao diện mà tôi đã giới thiệu ở trên, quá trình thiết lập rất giống nhau:
  1. Cài đặt giao diện
  2. Truy cập vào giao diện người dùng của trang web và nhấp vào Tùy biến
  3. Sử dụng Tùy biến để thiết lập giao diện của trang web

Thêm chức năng vào trang web với Toolset

Khi bạn dựa thiết kế của mình trên một giao diện khởi đầu tối giản, đó chính xác là những gì bạn nhận được – chỉ là chức năng tối thiểu để hiển thị nội dung.

Toolset có thể là giải pháp toàn diện của bạn để thêm chức năng vào trang web. Vì Toolset là một bộ các plugin, chúng chạy trên bất kỳ giao diện nào. Điều này có nghĩa là bạn vẫn có thể chuyển đổi giao diện mà không cần xây dựng lại toàn bộ trang web.

Dưới đây là một số thứ mà bạn có thể thêm với Toolset, mà không cần viết bất kỳ mã nào:

Tính năng của Toolset Ví dụ
Tạo các loại nội dung tùy chỉnh của riêng bạn cho trang web như Portfolio, Dự án, Chuyến tham quan, v.v.
Thêm các phân loại và trường tùy chỉnh vào các loại nội dung tùy chỉnh đó.
Chọn cách hiển thị các loại nội dung tùy chỉnh đó bằng cách sử dụng Layouts kéo và thả để xây dựng một mẫu.
Tạo các tìm kiếm tùy chỉnh dựa trên các loại nội dung tùy chỉnh và các trường của bạn.
Tạo biểu mẫu để gửi từ giao diện người dùng.
Hiển thị nội dung trên Google Maps

Tích hợp với Toolset và những lợi ích khi xây dựng trang web với các loại nội dung tùy chỉnh


Astra, GeneratePress và OceanWP đều là các giao diện tương thích với loại nội dung tùy chỉnh. Điều đó có nghĩa là bạn có thể tùy chỉnh các tùy chọn của chúng cho từng mẫu bạn thiết kế. Điều này bao gồm các mẫu cho các loại nội dung tùy chỉnh và các trang lưu trữ của bạn.

Video này cho thấy sự tích hợp giữa Toolset và giao diện Astra:

Ví dụ: bạn có thể quyết định hiển thị thanh bên trên các trang thông thường của mình, nhưng không hiển thị cho các loại nội dung tùy chỉnh: Chuyến tham quan hoặc bất kỳ loại nội dung nào khác được tạo bằng Toolset.

Kiểm soát các tùy chọn giao diện của Astra cho từng bố cục riêng biệt

Kết luận


Các giao diện tối giản hứa hẹn cho phép xây dựng các trang web tinh gọn và hiệu suất cao, được thiết kế riêng cho nhu cầu của từng dự án.

Chúng tôi đã đề cập đến ba giao diện rất phù hợp với mô tả này. Tất cả chúng đều cung cấp một điểm khởi đầu tuyệt vời và cung cấp các tiện ích bổ sung giúp việc tùy chỉnh trở nên dễ dàng. Mỗi giao diện này đều có một phiên bản miễn phí tuyệt vời trên WordPress.org và cung cấp các tiện ích bổ sung trả phí.


Khi bạn cần xây dựng chức năng tùy chỉnh nâng cao hơn, bạn có thể làm điều đó bằng cách sử dụng PHP của riêng mình hoặc với các plugin Toolset mà không cần lập trình.

Chúng tôi hy vọng rằng bạn thấy hướng dẫn này hữu ích. Hãy cho chúng tôi biết về trải nghiệm của bạn bằng cách để lại bình luận.

Bạn thấy bài viết này hữu ích? Hãy chia sẻ bài viết này: